sketch中组建的建立和使用

1、标签随着文字的长度变化而变化，而且拖动标签时，文字和按钮位置随着便签的程度变化，始终保持距离两侧距离不变，高度不变，文如下图效果

做前思考：要实现三个问题，第一个是标签随着文字长度的变化而变化，第二个是文字和按钮之间的距离始终 保持一致，第三个问题是横向拖动标签，里面的中文字和按钮距离两侧的距离始终保持不变。
大体的思路：针对第一个问题，可以将标签布局设置成从左往右，或者将文字布局设置成从左往右，针对第二个问题， 分别固定文字和按钮在标签中的位置，（文字和按钮在标签中的位置固定，而标签又是随着文字的长度自动变化，那文字和按钮的间距就固定不变了），针对第三个问题，将文字和按钮编组，使之成为一个整体，然后固定左右和高度即可。

操作步骤：1)先画一个线框，里面添加上文字和icon，然后将整体创建组件。病在创建组件的时候选择布局为从左往右。

2)在“标签”组件中分别编辑文字和按钮的位置，使其在标签中的位置固定。

                             
3）将“标签”中的文字和按钮编组，并设定这个编组的位置，如图，这样就实现了上面的效果

2、手机导航栏的组件设计，
要求
1）返回按钮旁边的文字可以编辑（不限制于两个字符），
2）标题文字可以编辑
3）右侧的按钮可以自由的替换，
4）拖动导航栏，左侧按钮，右侧按钮距离两侧的位置不变，左侧按钮和旁边的文字间距不变
5）导航栏颜色可以改变，效果如下




做前思考：上面的导航栏大体可以分成三个部分，左边，中间，右边，（三个部分大概会有三次操作或者编组）

大体思路：针对1）可以通过设置文本宽度实现，文本采取左对齐
针对2）可以通过设置文本宽度实现，文本采取居中对齐
针对3）可以通过单独设置组件来实现
针对4）可以通过编组并固定位置来实现，将除了导航栏的底部条之外的其他部分编组，并固定位置，来实现左右按钮保持距离两侧边距不变，再将返回肩头旁边的按钮固定位置
针对5）可以通过事先设定好颜色并编辑组件来更改

操作步骤：
1）画一个距行，宽度375，高度44，然后将上图的元素放在上面，整体编组，创建一个组件
2）将左侧返回箭头位置选择，靠左，靠上，高度，宽度固定，如图



然后再将返回按钮旁边的文字设置位置，靠左，靠上，高度不变，文字的宽度更改大小，样式选择左对齐，如图


（文字对齐方式，一定要选择左对齐！！！要不文字的位置就随着导航栏拖动而变化了）


修改好，你会发现原来的文字框变宽了

3）用同样的方法设置标题文字宽度，标题文字对齐方式，选择居中，标题的布局选择固定高度
4）设计好右侧图标的大小区域，然后分别将各自的占位图创建组件，布局选择靠右，靠上，长度和宽度固定，如图

5）通过将菜单的底部长方形创建组件，使其单独成为一个部分，来实现后期更改颜色。更改菜单栏的颜色，和右侧的按钮图标，可以点击右侧的覆盖层自由变化


6）下面就可以愉快的玩耍了，随意更换标签上的文字，更换右侧的图标，随意拉宽导航栏，也不会出现位置移动，变形了