今天我们来讲解一下构件的动态响应，这是构件库构建最重要的部分，也是Sketch构件库构建系列的最后一部分！
过去回顾：
尽管如此，还是来个大概：
关于定尺手柄实战环节弹性布局关于定边关于嵌套的弹性布局动态响应是怎样的？最后的
什么是动态响应式
响应估计大家都很熟悉了。从专业上讲，就是系统对不同媒体(运行web的设备)和窗口(显示网页的浏览器窗口)的适应。
跨设备响应的好友之间会有更多的联系，从大屏(pc)、中屏(平板)到小屏(移动)。为了适应不同的设备，需要产生一个至少有三个断点的设计方案。
要说全球市场的反应比较好，https://ant.design/index-cn ANTD算是一个。可以去官网感受一下蚂蚁是如何做到媒体和窗口的完美应对的。
回归主题，组件响应和页面响应本质上是一样的，都是元素跟随父元素的适应性变化。但是，组件的父级可以是组或页面。
以响应的方式处理组件具有重要意义。以上面提到的商品卡为例。如果我们不对它做任何适应，当我们拉伸尺寸时，它会看起来像这样：
画面和间距扭曲，整个组装被破坏，效果很挫败。
但是，如果我们对组件进行调整，一切都会变得非常自然和合规：
在sketch中，实现动态响应效果的功能是Resizing(后译为弹性布局)。
00-1010所谓柔性布局，就是让元素跟随父分组或画板的大小变化而产生的适应性变化。在sketch中，对应的是右边面板的调整大小功能。包括固定到边缘、固定大小和预览。请忽略中文截图的拙劣翻译。)
但需要注意的是，弹性布局需要有一个参考，控制大小位置的关系。因此，只有当元素具有父关系时，灵活布局面板才会出现，其中父关系包括分组和画板。如果一个元素被包裹在没有父关系中，而只是在一个页面中，那么灵活布局的功能就不会出现。
以商品卡为例。一开始这个卡片是存在于一个画板中的，也就是说它是作为画板的父级下的子级存在的，所以才会出现灵活布局的功能。
但是，当我们把画板去掉，让它独立存在于页面上，你会发现，灵活布局的功能消失了。因为此时的商品卡片缺少父关系，所以没有办法用引用来控制其大小和位置关系。
但是，当我们对它们进行分组时，灵活布局又出现了，因为商品卡片又一次获得了父关系，只是这次父关系由画板改为分组。
=pc” img_width=”1080″ img_height=”464″ alt=”超详细！手把手教你用Sketch搭建组件库（下）” inline=”0″>
固定边缘
固定边缘（Pin to Edge），即固定元素到边缘的内间距。
不论怎么拉伸，我自岿然不动。
拿商品标签举例。未固定边缘时，拉伸会直接破坏组件内的间距，显然这不是我们想要的。
我们希望内容与与左侧边缘的内间距保持不变，这该怎么搞呢？
非常简单，进入源组件页面，在右侧弹性布局面板中将内容固定到左侧边缘即可。
回到标签组件，就会发现不论我们怎么拉伸，内容始终是固定在左侧边缘的。
关于固定尺寸
固定尺寸（Fix Size）即固定元素自身的尺寸大小。
拿商品图为例，没有固定尺寸时，拉伸后会失真变形。
我们想要商品图尺寸不随编组或者画板尺寸的改变而改变，所以选择固定图片的宽高。
不论我们怎么拉伸编组，82 年的拉菲尺寸依旧保持不变。
关于预览
我们在选定一种属性后可以实时在右侧窗口中预览到效果，以帮助我们判断是不是自己想要的。注意，我们在点选后预览动画只会播放一次。如果想要再次观看效果，需要 hover 在预览窗口上哦～
不过在很多组件中，固定边缘和固定尺寸往往是相互搭配、多次使用，下面我们通过一些实战来巩固。
手把手实战环节
依旧是我们的这个商品卡片，我们的目标就是让卡片中的所有元素能够适配任意的尺寸，包括不同的宽度和高度。
第一步，确定参照物。
我们确定整个商品卡片这个组件为响应参照物，后续所有的子级元素都要跟随它尺寸的变化而变化。
第二步，确定响应策略。
在这一步，我们确定卡片中所有元素的位置关系和尺寸的响应规则。
首先，我们需要商品标题、商品价格和标签保持下方和左侧的内间距固定，同时它们的尺寸保持固定（已经提前建立了从左至右的自适应规则）所以我们固定左下边缘和宽高。
其中，标签由于是嵌套在商品卡片组件当中的，所以我们需要对标签组件内部做一次弹性布局。固定左侧边缘和宽高即可。
商品图我们希望保持尺寸不跟随改变，所以直接固定其宽高。商品图背景需要始终保持四个方向内间距的一致，因此固定上下左右的边缘。
最后来个弹性布局的总览。
第三步，响应效果测试。
到了激动人心的测试环节了！嗯，看着相当完美。任意尺寸都能轻松 hold 住。
当然，这一步环节的效果如果不在我们的预期之内，需要返回检查每一个元素的弹性布局在哪里出了问题，比如文字的对齐方式啊，比如父子级的关系啊等等，反复调试～
弹性布局的嵌套
弹性布局是可以嵌套使用的。
比如，我对 A 使用了弹性布局，那么 A 的父级 B 也可以使用弹性布局。一层层嵌套下去，就可以应对那些复杂页面的响应效果。只是嵌套的调试适配较为麻烦，而且很容易在某个环节忽略掉。
这里我借鉴了幺零三大佬所使用的办法，将具备父子级关系的元素一层层得逐级拆解，并在每一层分层进行弹性布局规则制定。
比如这个页面，它包含了较多的层级，如果直接草率上手做弹性布局会很麻烦，而且毫无逻辑的做法也很低效。正确的做法是一步步拆解后分层展开。
为了便于阅读理解，下面每一层的版块和元素抽象成了骨架图。
第一层弹性布局
首先，从一整个版面来看，我们确定整个画板作为响应参照物，而内容区域需要保持不变的安全边距。所以我们直接固定内容区域四个方向的边缘。
第二层弹性布局
接着，我们对内容区域进行拆解。现在我们的弹性布局对象变为拆解后的四个版块，而参照物依旧是整个画板。我们希望搜索框和 banner 的高度与上方间距保持不变，因此固定高度和上方边缘。商品版块宽高可以自由变化，所以仅固定上方边缘。
第三层弹性布局
最后，我们对各个版块再次拆解，绝大部分被拆解为了最小颗粒。此时的弹性布局子级对象变为了这些更加细分的元素，比如暗提示、图标、大标题、折扣标等等。而响应参照物则变为了元素所依附的父级。比如搜索框是暗提示和图标元素的父级，而 banner 就是文字、按钮和图片的父级。最后的布局规则如下，具体逻辑不再赘述~
基于这个拆解的步骤，我们可以清晰得在每一层级进行分层弹性布局~
来看下骨架图的响应效果，没啥问题。
再来看下界面的响应效果~可以
最后
sketch 搭建组件库系列就此结束了，从组件的搭建、到组件的动态自适应、再到组件的动态响应式，这三个环节缺一不可。不过很多东西我自己也在摸索阶段，所以文章尚且不能面面俱到。后续有任何的疑问或者建议，欢迎随时留言。
但愿这篇文章对你有所帮助。
欢迎关注作者微信公众号：「转行人的设计笔记」
