《当自动布局遇上组件.docx》由会员分享，可在线阅读，更多相关《当自动布局遇上组件.docx（10页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、搭建组件库的意义是帮你快速复用，而搭建自动布局化的组件库，就 能完美结合组件和自动布局这两个功能的绝对优势，即能快速复用， 又能大幅提升布局效率！但是，要将这两个核心功能进行结合并去使用，并没有你想象得那么 顺利。01一个可怕的误区先说一个9。以上的人都可能会存在的严重误区：单向不可逆误区。觉得要制作自动布局化的组件，必须先自动布局，再制作组件。一旦先做了组件，如果后面要再自动布局，只能重新制作。自动布局一厂制作组件/这是个非常、非常可怕的误区，因为一旦形成这样的认知，那么以往 所有未进行自动布局的组件，你都需要重新花费第二份时间重新制 作！可以看到，figma为了保证主组件的绝对地位，因此在
2、实例中杜绝了所 有页面布局的改动（更改位置、增加对象、元素拉伸），但在布局固 定的前提下允许内容的diy和整体布局的响应（隐藏对象、文本变更 和动态响应）。这允许我们在有限的组件数量之下，能通过多个不同的实例来覆盖多 状态、多场景的情形。比方，我们基于这个卡片组件，就能通过其实例延展出各个状态的情 形，最后组合为一个更真实、合理的feed流视觉稿。Cooper KristinUI DesignerThis modern trend looks nice and oil the guy who made it deserve the top value. Jokeyhis modern tren
3、d looks nice and all, theguy who made it deserve the top value.Chris Road我就是一个鲜活的例子。因为团队以往的组件库全部没有施加自动布 局，我因为受制于这个错误认知，花了非常非常多的时间进行重新制 作。而当我发现组件和自动布局这两个步骤完全可逆时，我笑的像个傻 子。总之，要制作自动布局化的组件，并不需要遵循组件和自动布局的先 后顺序。你既可以先自动布局再组件化，又可以先组件化再自动布 局！ ！那么问题来了。如何对组件创立自动布局？很简单,选中组件，直接shift+A就行了!但是，如果当前对象已经拥有了 frame这个父级，
4、那么创立组件或自 动布局时，将直接以这个frame父级为底，新加组件或自动布局的属 性，而不会额外给你嵌套。比方这个尚未进行组件化的按钮，制作组件后并没有额外新增嵌套的 父级。创立组件我是按钮我是按钮创立组件后未创立组件再比方这是个尚未进行自动布局的按钮组件，我们选中它施加一层自 动布局。你会发现组件同样没有被额外施加父级，而原父级也没有任何改变。我是按钮创立自动布局我是按钮O buttonT我是按钮Auto layout： button：Auto layoutJ T 三 10 回 10(3未添加自动布局添加自动布局后但你瞅下右侧栏，就会看见多出来一块auto layout面板。正是因为这样，
5、所有自动布局后的组件，都能完美实现自动布局的所有功能。但，也仅限于组件而已。实例与自动布局一旦设定好了自动布局规那么，那么在进行增减、拉伸和调序这些操作 时，父、子级都会基于规那么进行帅到爆的自适应变化。但是！一旦自动布局好的元素做成了组件，由组件拷贝而来的实例 在自动布局下会存在很多限制。以这个自动布局化的卡片实例为例，我们看看它不能干啥？1 .实例无法调序实例中无法实现顺序的调换。Cooper KristinUI DesignerUI DesignerThis modern trend looks nice and all, the guy who mode it deserve the
6、top value.This modern trend looks nice and oil, the guy who mode it deserve the top value.This modern trend looks nice and all, the guy who mode it deserve the top value.This modern trend looks nice and all, the guy who mode it deserve the top value.This modern trend looks nice and oil, the guy who
7、mode it deserve the top value.This modern trend looks nice and all, the guy who mode it deserve the top value.This modern trend looks nice and all, the guy who made it deserve the top value.This modern trend looks nice and all, the guy who made it deserve the top value.This modern trend looks nice a
8、nd all, the guy who made it deserve the top value.Cooper Kristin.实例无法增加对象实例中无法拷贝或者新增对象，就算你强行这么做，你会发现新增的 对象都会跑到实例父级的外部。Cooper KristinUI DesignerThis modern trend looks nice and all. the guy who mode it deserve the top value.This modem trend looks nice and all, the guy who mode it deserve the top volu
9、e.This modern trend looks nice and all, the guy who mode it deserve the top value.Cooper KristinUI Designer Handsome boyThis modern trend looks nice and ail, the guy who mode it deserve the top value.This modern trend looks nice and all, the guy who made it deserve the top value.This modern trend lo
10、oks nice and all, the guy who made it deserve the top value.2 .实例无法拉伸比方头像、图片以及文本框，都是无法像之前那样自由拉伸的。Cooper KristinI II ui uesiqnerCooper KristinUI DesignerThis modern trend looks nice and all, the guy who made it deserve the top volue.This modern trend looks nice and all, the guy who made it deserve th
11、e top volue.This modern trend looks nice and all, the guy who made it deserve the top value.This modern trend looks nice and all, the guy who made it deserve the top volue.This modern trend looks nice and all, the guy who made it deserve the top volue.This modern trend looks nice and all, the guy wh
12、o made it deserve the top value.那么实例能干啥呢？1 .实例可以删除任意的元素，都可以直接del删除。任意的元素，都可以直接del删除。为什么标引号，是因为即便你del删掉了某个对象，但是实例中其实会以隐藏的形式来让它消失。这 一点其实很友好，能防止我们误删J某个元素后无法恢复。Cooper KristinCooper KristinUI DesignerThis modern trend looks nice and all, the guy who made it deserve the top value.This modern trend looks n
13、ice and all, the guy who made ft deserve the top value.This modern trend looks nice and all, the guy who made rt deserve the top value.This modern trend looks nice and all, the guy who made it deserve the top value.This modern trend looks nice and all, the guy who made it deserve the top value.This
14、modern trend looks nice and all, the guy who made it deserve the top value.2 .实例可以增减文本即便是实例，自动布局的文本自适应规那么依然适用，这一点很棒。CoopeUI DesignerCooper KristinUI DesignerThis modern trend looks nice and all, the guy who made it deserve the top value.This modern trend looks nice ond all, the guy who made it deser
15、ve the top value.This modern trend looks nice ond all, th guy who made it deserve th top value.This modern trend looks nice and all, the guy who made it deserve the top valueCooper KristinUI DcsiqnerThis modern trend looks nice and all. the guy who made it deserve the top value.This modern trend loo
16、ks nice and all, the guy who made it deserve the top value.This modern trend looks nice and all, the guy who made it deserve the top value.Cooper KristinOOOOOOOUI DesignerThis modern trend looks nice and all, the guy who mode it deserve the top value.This modem trend looks nice and all, the guy who
17、made it deserve th top value.This modern trend looks nice and all, the guy who mode it deserve the top value.This modern trend looks nice and all, the guy who made it deserve the top value.3 .实例可以动态响应上一篇文章已经讲过，只要对头像外的所有子级设置fill container剧 本，子级就会跟随父级实现动态响应。在实例中，这个原那么同样适 用。Cooper KristinCooper Kristin
18、This modem trend looks nice and all, the guy who made it deserve the top value.This modem trend looks nice and all, the guy who made it deserve the top value.This modern trend looks nice and all. the guy who made it deserve the top value.This modern trend looks nice ond all. the guy who made it deserve the top volue.Thts modern end looks nice ond all. the guy who made it deserve the top value.This modem trend looks nice ond oil. the guy who made it deserve the top value.