Sketch组件嵌套细节及Resizing功能细节

以下说明全部是自己工作中的经验总结并沿用至今。可能不是最优的方法/说明，希望同行多多交流。

你有你的高级方法，我有我的低级玩法，不是很高级，但是一样走得通，安排！

-----------------------

sketch组件嵌套细节，以按钮为例：

按照寻常的画法，我们画出一个按钮，做好命名及分组。

制作该按钮的组件

1：转化按钮文字为组件：

2: 按钮背景也是有可能变化的，所以也转化为组件。

3: 把按钮文字，和按钮背景放在同一个“按钮”文件夹里，再将这个文件夹转化为组件：

最后，我们到Symbols中可以看到，一个按钮组件的组成：

接下来，你可以很愉快的使用这个控件，并根据交互 修改上面的文案：

在你愉快的使用中，或许遇到下面的情况：

按钮文案是4个字，或者小于4个字，都没问题，多余4个字就出问题了？

出现这个问题的原因在于你的 文本宽度没有设定合理。

回到前面你的制作流程中，点击文本，其实sketch已经告诉你它的尺寸了，文本也是有尺寸的哦~

你的文本宽度只有4个字的宽度，写5个字，当然只能截取了。

出现这个问题的解决办法：将你的文本宽度设置为当前按钮的宽度。

当然，你要把文办宽度设置 大于 按钮宽度，我也拿你没办法。

再回到 Symbols里去看，其中的 “按钮文字” 那个组件，宽度已经变化了。

这个时候，你再愉快的使用这个按钮组件，就可以写更多的按钮文字了。当然，文字个数太多，依然会超出按钮宽度。

深入研究一下：按钮的背景如何变化？

1.我们还是到Symbols中去看：在“按钮背景”这个组件中，我新建一个“按钮背景颜色”图层，并指定颜色，至于 之前的“按钮背景”图层上，为了方便理解，我将原来的 “按钮背景”  修改成  “按钮背景形状”。

顾名思义，“按钮背景颜色”控制按钮的背景颜色，“按钮背景形状”就控制按钮的形状了。

2.将两个图层mask一下

得到一下结果：

之前的“按钮背景形状” 图层 自动转化为了 叫做 “mask” 的遮罩图层，当然，你理解不了，可以改名。

3.将控制颜色的 “按钮背景颜色”图层，转化为 组件：

得到一下结果：

4.为了方便管理，我们把这个组件命名为 “按钮背景颜色红”

这个组件只是管理 颜色，所以，我们可以修改它的大小，方便在 Symbols文档里排列

5. 选择这个 红色背景组件，按住atl键，拖动复制出一个 组件出来(关键点)，设定其他颜色，并命名为方便管理的其他名称

接下来，回到page中，你可以愉快的修改按钮的背景颜色了：

--------------总结------------------

sketch组件嵌套的细节之一：

形状组件的管理形状，颜色组件管理颜色，不用再 为每一种颜色的按钮都去做一次组件了。

用sketch的组件原理来做  按钮背景颜色的变化  是最理性的管理方式，以此类推，你还可以做更多风格上的变化。

---------------------------------

Resizing功能的细节，以列表项目为例说明：

1.按照常规的方法，画出一个列表项的各个图层：

包含列表项背景，列表项目标题，下一级图标

在组件化之前，要理解Resizing的原理

----------画重点-----------

红色部分 是  对象距离它的父级 的 上下左右边距是不是固定。

蓝色部分 是  对象它自身的宽度高度是不是固定

2. 在理解Resizing原理后，我们将列表项每个图层组件化

如图：文字的个数是变化的，所以应该给文本宽度一个最大可能性宽度。

针对文字图层的 Resizing属性。

文本距离列表项左边有间隔，并且这个间隔应该是固定的，所以在Resizing中我们 仅仅点亮了 如图属性。

文本宽度因为设置了一个最大值，所以固定与否都可以。

到此，可将标题转化为组件。

针对列表项右侧的图标，

我们做如下设置：

无论列表项的宽度如何变，这个图标永远靠着列表项右边的，并且与列表项右边距离固定。

无论列表项的宽度如何变，这个图标的尺寸是固定不变的，所以fix属性则均点亮

至此，将图标转化为组件。

列表项背景转化为组件。

再查看Symbols中：

接下来，你可以使用这个组件，并任意修改内容，宽度上也可以变化，在变化过程中，文字，图标 相对于列表项的位置都是 固定的。

--------以下细节画重点---------

我们有时候会碰到这样的可能性

列表项中间有一个标识来说明 这个功能很火，火热进行中。

然后我们根据前面一个案例的原理，将每个图层设定要Resizing属性并 转化组件

如图

最后把整个列表项 转化为组件

然后使用这个组件

发现，修改文字个数之后，文字后面的标识图标并没有因为文字个数多而移动。

问题在于：

现在 “标识图标”  的父级是 “列表项”。它基于列表项的左边 的确没有变。

你希望  “标识图标”  基于 “列表项文字” 变化，那 就要 把  “标识图标”的父级换成  “列表项文字”

回到Symbols中。

1.在 “列表项文字”组件中 插入 “标识图标” 组件

当然，你要把之前 “列表项” 组件  中的  “标识图标”组件，删掉。

然后 把 列表项文字 的 属性 如图 修改一下，这里很重要

接下来就会得到你希望的结果：

标识图标  会根据 你 写的文字的个数 而自动右移动。

------总结----

Resizing属性一定要 搞清楚对象 以及它的 父级，

---------------------

以上案例仅仅是示意说明，可以衍生实际项目中的很多情况，项目中遇到具体问题可以参考示意中的思路来解决。