高度自适应全屏_【年度干货】组件的动态自适应最全面讲解，备好水

2020年的第27篇原创文章 距离年底 30 篇目标还剩 3 篇 (本文约3400字，预计阅读时间4分钟)

上一篇中我提到过，如果我们仅仅负责建立组件，而不考虑组件内容发生变化后的动态自适应是远远不够的。本篇就开始填这个坑，我会在在前文的基础上讲解如何具体实现组件们的自适应。

本篇相较上一篇来说比较难懂，所以我尽量深入浅出得来进行讲解，同时依旧录制好gif动画(公众号很难找到比动画更适合的表达方法了。。)，并且在体积上做了适当压缩避免过长加载影响阅读体验。

依旧来个大纲：

什么是动态自适应

关于智能布局

关于字符层属性

智能布局的规则

手把手实战环节

最后

什么是动态自适应

sketch的自适应功能是在去年9月的58版本推出的，对应的功能叫做“Smart Layout”，后面统一翻译成智能布局。

不用去琢磨动态自适应这个术语的深层含义，说白了，就是让你制作好的组件尺寸基于一类规则，跟随内容的变化而动态变化。(规则我后面结合案例讲下)

举俩例子。

我基于原子设计搭建了商品标签和对话框这俩组件。但是它们现在是“死”的，一旦内容超出初始范围后就吃瘪了，没办法跟随我给的内容量而动态变化。

但是，只要我给组件预置自适应规则，它们就不仅仅是一具么得灵魂的躯壳，可以根据我给出的内容进行实时动态得适应。

而sketch中能够实现自适应的功能就是接下来要着重讲的智能布局。

关于智能布局

可能很多设计师和我一样，在sketch更到58版本后，发现在创建组件时，组件命名区下方多了这么个玩意儿。

点开后会多出各种方向的布局。当时没怎么注意，直到后面才发现这个新增的功能叫智能布局。

当我们选择“无”下面任意一种方向的布局后，即可赋予组件自适应效果。

水平居中布局，即组件尺寸跟随内容从中间向两边变化。

从左往右布局，即组件尺寸跟随内容从左往右进行变化。

从右往左布局，即组件尺寸跟随内容从右向左变化。用gif图应该更好理解一点。