今天我们来聊聊组件的动态响应性，这是搭建组件库的重中之重，也是搭建组件库系列的最终章！

先前的评论：

不过，这里有一个大纲：

什么是动态响应

响应式想必大家都很熟悉，说得更专业一点，就是指系统对不同介质（运行网页的设备）和窗口（显示网页的浏览器窗口）的自适应变化。

做跨设备响应的朋友接触的会比较多，从大屏（PC）、中屏（平板）到小屏（移动端），为了适配不同的设备，需要制作至少三种断点设计方案。

AntD() 在全局响应度方面是目前市场上数一数二的，大家可以去官网体验一下 Ant 是如何实现 media 和 完美响应的。

回到正题，组件响应式和页面响应式本质上是一样的，都是元素跟随父元素做出的自适应变化。区别在于组件的父元素可以是群组，也可以是页面。

让组件具有响应性非常重要，就拿上篇文章中的产品卡片为例，如果我们不对其进行任何适配，它在调整大小时会是这样的：

图像和间距被扭曲，整个组件被毁坏，效果非常令人失望。

但如果我们调整这些组件，一切都会变得非常自然和顺利：

在 中，实现动态响应效果的函数为（以下统一译为弹性布局）

关于弹性布局

所谓弹性布局，就是让元素自适应父组或画板尺寸的变化，对应右侧面板的功能，包括 Pin to Edge、Fix Size 和 （预览）。（请忽略中文版截图翻译的不好。）

不过需要注意的是，弹性布局需要引用来实现大小和位置的控制，所以只有当元素有父级关系时才会出现弹性布局面板，这里的父级包括group和，如果元素没有任何父级关系包裹，只在一个页面中，则不会出现弹性布局功能。

以产品卡片为例，起初这张卡片是存在于一个画板中的，也就是说它是作为子级存在于父画板之下的，所以就会出现弹性布局的功能。

但是当我们移除画板，让它独立存在于页面上时，你会发现弹性布局功能消失了。这是因为产品卡片现在缺少父级关系，无法使用引用来控制其大小和位置。

但是当我们对它们进行分组时，弹性布局又会出现，因为产品卡又有了父关系，不过这次父级从画板变成了组。

固定边缘

Pin to Edge，即将元素内部间距固定于边缘。

无论我怎么伸展，我都一动不动。

以商品标签为例，当边缘没有固定好的时候，拉伸会直接破坏组件内的间距，这显然不是我们想要的。

我们希望内容和左边缘周围的填充保持不变，我们该怎么做呢？

很简单，只需要进入源组件页面，将内容固定到右侧弹性布局面板的左边缘即可。

回到标签组件，你会发现无论我们如何拉伸它，内容始终固定在左边缘。

关于固定尺寸

固定大小是指元素本身的大小是固定的。

以产品图片为例，如果没有固定尺寸，拉伸后就会变形。

我们希望产品图片尺寸不随着群组或者画板尺寸而改变，所以我们选择固定图片的宽度和高度。

无论我们如何进行分组，1982 年拉菲的尺寸始终保持不变。

关于预览

选中某个属性之后，我们可以在右侧窗口实时预览效果，帮助我们判断是否是我们想要的。注意，点击之后预览动画只会播放一次，如果想再次观看效果，需要将鼠标悬停在预览窗口上~

但在很多组件中，固定边和固定尺寸经常会一起使用，而且使用次数比较多，下面我们通过一些实际应用来巩固一下。

实践课程

仍然使用我们的产品卡片，我们的目标是让卡片中的所有元素适应任何尺寸，包括不同的宽度和高度。

第一步，确定参照物。

我们确定整个商品卡片组件为响应式引用，所有后续子元素都必须随着其尺寸变化而变化。

第二步，确定应对策略。

这一步我们确定卡片中所有元素的位置关系和尺寸规则。

首先我们需要商品标题、商品价格和标签下方和左侧保持固定的，同时保持它们的尺寸固定（从左到右的自适应规则已经提前建立好）所以我们固定左下角的和宽高。

由于标签是嵌套在产品卡组件中的，所以我们需要在标签组件内部做弹性布局，固定左边缘和宽高即可。

我们希望保持产品图片的尺寸不变，所以我们固定了它的宽度和高度。产品图片背景需要在四个方向上保持一致的间距，所以我们固定了顶部、底部、左侧和右侧边缘。

最后，这里是对灵活布局的概述。

第三步，响应效果测试。

现在到了令人兴奋的测试部分！嗯，它看起来很完美。它可以轻松容纳任何尺寸。

当然，如果这一步的效果不如预期，我们就需要回头检查各个元素的弹性布局到底是哪里出了问题，比如文字的对齐方式，父子关系等等，反复debug。

弹性布局的嵌套

布局灵活，可以嵌套。

比如我对A使用了弹性布局，那么A的父级B也可以使用弹性布局。通过层层嵌套，就可以处理那些复杂页面的响应性。但是嵌套的调试和适配比较麻烦，而且很容易忽略某个环节。

这里我借鉴了101三位大师使用的方法，将有父子关系的元素逐层分解，并在每一层制定灵活的布局规则。

比如这个页面包含很多层级，如果草草地做弹性布局会很麻烦，不合逻辑的做法也是低效的，正确的做法是逐步拆开，然后再一层层展开。

为了方便阅读和理解，下面将各层的章节和元素抽象成骨架图。

第一层灵活布局

首先从整个布局的角度，我们确定整个画板作为响应式参考，内容区域需要保持恒定的安全边距。所以我们直接在四个方向固定内容区域的边缘。

第二层灵活布局

接下来我们拆解一下内容区域，现在我们的弹性布局对象就变成了拆开的四个部分，参照物依然是整个画板。我们希望搜索框的高度和顶部间距保持不变，所以我们固定了高度和顶部边缘。商品部分的宽度和高度可以自由变化，所以只固定了顶部边缘。

第三层灵活布局

最后我们把每个版块再拆开，大部分都拆成了最小的颗粒，这时候弹性布局的子对象就变成了这些更细分的元素，比如隐藏提示、图标、大标题、折扣标签等，响应引用就变成了元素依附的父级，比如搜索框就是隐藏提示和图标元素的父级sketch控件库，搜索框则是文本、按钮和图片的父级。最终的布局规则如下，具体逻辑就不赘述了~

基于这个拆解步骤，我们就可以清晰的在每一层进行分层弹性布局了~

我们看一下骨架图的响应效果，没有任何问题。

我们来看看界面的响应效果吧~

终于

组件库搭建系列就到此结束了。从组件搭建，到组件的动态适配，再到组件的动态响应，这三个环节缺一不可。不过很多东西我还在摸索中，所以文章不可能面面俱到。如果以后大家有什么问题或者建议sketch控件库，欢迎留言。

希望本文对您有所帮助。

如有侵权请联系删除！