控件帮助我们加快我们的工作流，我们可以不断的重复利用我们设计中的元素，当我们对其中的元素改动时，所有的控件也都会更新，我们也可以利用覆盖层来控制我们的独立控件。
一.创建一个控件
要创建一个控件，我们可以选择一个群组，一个美术板，一个层然后在工具栏中选择创建组件，或者选择层>创建组件。给你的组件取一个名字，这是你的控件的父级元素，当你创建一个模板的时候，sketch会自动帮助你创建一个实例，如果你对母版进行了更改，会显示在所有实例中。
如果你在创建控件的时候，勾选了发送控件到控件页面，那么控件就会自动发送到控件层，如果你没有勾选，那么你将在当前页面看到控件。
#如何将一个控件返回成层文件
选择 图层>从控件中分离，任何与其有关的实例将变成文件夹，母版和实例分开，无关联。
#如何用一个控件来替代层
当您创建了一个符号时，您可以在设计中插入任何现有的层。要执行此操作，请在层上单击控件，选择“替换为”，然后选择符号。您选择的符号将调整大小以适应层的大小。
二.插入控件
有两种方法可以访问和在sketch中插入符号。
1.通过单击层列表顶部的组件，可以通过画布左侧的组件面板插入符号（图层和组件之间切换）在组件库中可以选择查看“所有”可用的符号以及仅属于文档或特定库的符号。
2.您可以使用“组件”面板底部的搜索栏快速找到要查找的符号，找到所需的符号后，只需将该符号直接拖放到画布上。快捷键（command +shift+ f）
控件
或者，可以通过顶部工具栏中的“置入”或使用“置入”菜单插入符号。从这里您可以查看文档符号或属于任何已启用库的符号并从中进行选择。
三.编辑控件
编辑控件有两种主要方法。可以编辑符号母版中的内容，也可以使用替代编辑单个实例。
#如何编辑母版
找到你的母版或双击它的任何实例直接转到它。对主控形状所做的任何编辑都将同步到设计中主控形状的任何实例。完成更改后，选择“返回到实例”返回到实例并查看更改是如何跨实例同步的。
编辑母版
#如何使用覆盖编辑实例
选择一个控件实例，您将在检查器中看到一个覆盖层。通过在检查器中编辑这些覆盖层，可以更改单个符号实例中的内容，而不更改其主实例或影响其任何其他实例。
覆盖层
注意：您还可以直接在画布中为符号实例设置文本覆盖。
#如何聚焦覆盖
选择符号实例并将鼠标悬停在其上以高亮显示任何可用的替代，单击其中任何一个以快速找到它，并在检查器中单独显示它。如果符号具有大量替代（或嵌套替代），则这很方便。
或者，在检查器中单击符号名称旁边的三角形，然后在那里选择。也可以控制单击“图层”列表中的替代以查看与其相关的选项。
注意：即使您已经专注于某个特定的覆盖，移动或复制它之类的操作也将应用于整个实例，而不是特定的覆盖层。您需要使用符号母版来更改覆盖层本身。
控件覆盖
#如何使用文本覆盖
可以通过几种方式更改文本覆盖的内容。您可以双击画布上符号实例中的文本层，然后键入新内容，或键入检查器中的覆盖字段。删除该字段中的任何内容都会将其更改回符号母版中的文本。也可以使用字段上方的数据图标填充覆盖。
注意：如果替代文本比符号母版中原来的文本长，则sketch将在文本层扩展时移动文本层旁边的任何层。如果要修复图层并使文字在其上流动，则需要将其锁定在符号母版中。
#如何使用图像覆盖
可以使用填充检查器覆盖任何图像层或形状。您可以将图像拖到预览中，或选择“选择图像…”也可以通过单击数据图标使用数据填充图像覆盖。要删除图像，请单击图像预览并按backspace。
#如何替代文字和图层样式
如果在设计中设置了文字样式或图层样式，则可以在检查器的“替代”面板中找到这些样式。
#如何覆盖原型热点
如果已将热点作为原型的一部分添加到符号母版，则可以覆盖其目标艺术板，或选择“无”将其禁用。
#如何隐藏和显示覆盖
选择符号主控形状，并使用检查器中“管理替代”面板中每个可用替代旁边的复选框来选择在设计中的任意位置选择该符号的实例时哪些替代可用。
隐藏和显示覆盖
#如何重置
选择任意实例，然后单击检查器中“覆盖”面板标题旁边的“重置”图标，以删除和重置已应用于该实例的任何覆盖。
重置
#如何从主控形状分离控件实例
若要在不使用覆盖的情况下对单个符号实例进行编辑，您需要从菜单中选择图层›从控件中分离，将其与其主实例分离。您也可以快捷方式控制单击它，然后在那里选择“从控件分离”。按住选项键可将命令更改为从控件中分离所有内容，从而将控件及其包含的任何嵌套控件转换为组。
#如何交换控件
可以使用检查器中“控件”面板中的“组件”弹出框交换符号。从列表中选择控件或搜索要查找的控件，然后单击将其与当前选定的符号控件。
替换控件
默认情况下，交换控件将调整所选实例的大小，以适合其新的控件母版。要在交换控件时保持实例大小不变，请取消选中组件弹出窗口顶部的“按原始大小交换”选项。
#如何缩放和调整控件大小
使用“缩放”命令，可以像任何其他图层或组一样缩放和调整控件的大小。从菜单中选择Layer＞Transform＞Scale…（或按⌘+K）。边框等样式和属性将与符号本身成比例增加或减少，而不会影响母版控件形状。
四.组织控件
#如何创建控件组
若要在“元件”面板和“插入”菜单中将符号组合在一起，请使用以下格式命名符号：控件组名/控件名。例如，名为Button/Normal和Button/Pressed的两个符号将成为名为Button的组的一部分。
注意：在一个组中出现两个或多个控件之前，它们必须出现在自己的子菜单中。
#在“组件”面板中组织控件
也可以通过“组件”面板组织控件。只需双击任何控件或组即可重命名它。您可以将控件拖放到现有的组中，或者只需拖动一个控件就可以创建一个新的组。
控件的排列是按照字母表的顺序排列的。
更名
#使用控件页面
将控件母版发送到“符号”页可以帮助保持事物的组织，特别是在复杂的设计中。它也有助于减少使用控件母版或实例之间的混淆。
若要手动移动控件母版，请将其拖到“图层”列表中的“控件”页标题上，或控制单击它并选择“发送到“控件”页。
五.创建嵌套控件
若要创建嵌套控件，请将符号实例插入“控件”页上的控件母版。现在，编辑该控件实例的主控形状时，它将在任何位置更新，包括其他控件主控形状中的实例。
也可以通过选择两个或多个控件实例并在工具栏中选择“创建控件”来创建嵌套控件。
注意：可以在彼此之间嵌套多少个控件是没有限制的，但不能在其主控形状中使用控件的实例。
#如何使用嵌套控件替代
若要使用嵌套控件以使其显示为替代，需要有两个或多个大小相同的控件母版，并将其中一个用作嵌套控件。
当您在设计中选择控件实例时，您将看到将嵌套控件替换为任何其他相同大小的控件的选项。这在菜单中很有用，例如，当菜单中的按钮处于活动和非活动状态时。
嵌套控件
若要快速访问某个嵌套替代的主控件，请在检查器中单击嵌套替代控件旁边的箭头图标。
六.使用智能布局调整控件大小
当覆盖更改控件的大小时，智能布局将保持控件中各层之间的填充和间距。设置智能布局后，更改控件实例中的替代将自动调整其大小。
要使用智能布局，只需创建一个控件，并为其提供水平或垂直布局。创建该控件的实例并编辑其替代时，智能布局将使用控件主控形状中各层之间的间距和填充作为蓝图，并在调整实例大小时保持它们的一致性。
#如何使用带控件的智能布局
可以在检查器中设置智能布局属性（当编辑现有的控件母版）或创建新的符号时。
若要使用具有现有控件的智能布局，请指向它的主控器（您可以通过选择该控件的任何实例并在键盘上按Enter键快速到达那里），并选择您希望智能布局如何在检查器的布局面板下调整其大小。
This Symbol is set to resize horizontally from the middle.
除了选择控件是水平调整大小还是垂直调整大小外，还需要设置控件的调整方向（请将其与文本对齐方式类似）。可以从以下布局属性中进行选择：
垂直：
自上而下
自下而上
从中间
水平：
从左到右
从右向左
从中间
创建新控件时，可以使用“创建新控件”工作表中“名称”字段下的下拉菜单设置这些属性。
注意：将智能布局属性应用于具有文本层的符号时，需要确保将其设置为“自动高度”（对于垂直布局）或“自动宽度”（对于水平布局）。智能布局将符号母版中文本层的尺寸与实例中文本层的尺寸进行比较，以确定符号中其他层应如何调整大小，因此固定大小的文本层不会工作，因为它们始终保持不变。
当您提供符号智能布局属性时，您将在显示其布局方向的图层列表中，在其名称旁边看到一个新图标。
新图标
如果在已设置智能布局属性时更改控件母版的布局，则该控件的实例可能会出错。若要解决此问题，请尝试单击检查器中“覆盖”面板下显示的“缩小实例以适应内容”按钮。
注意：您仍然可以对具有智能布局特性的控件中的图层应用调整大小约束。如果你想让一个特定的图层忽略你给它一部分的布局设置，这很方便。例如，可以使用调整大小约束来固定图层的大小，并使用具有水平或垂直布局的符号实例阻止其调整大小。
#如何设置最小智能布局维度
选择符号的智能布局属性时，将在检查器的布局面板下看到最小高度（垂直布局）或最小宽度（水平布局）字段。
将尺寸添加到这些字段将阻止符号缩小到最小尺寸以下，而不管其替代内容如何。如果将这些字段留空，则符号将缩小到任何大小以适合其内容。
#如何在符号中使用多个智能布局属性
对于更复杂的UI组件，您可能希望在垂直布局中包含水平布局（反之亦然），如下例所示。为此，可以将智能布局特性应用于符号主控形状中的组，以便在不同方向调整不同图层集的大小。
此卡符号具有垂直布局，并从上到下调整大小。但底部的两个按钮也被分组，具有水平布局并从右向左调整大小。
为此，请打开控件母版，选择要在不同方向调整大小的对象，然后对它们进行分组。现在，您可以将一组单独的智能布局属性应用于检查器布局面板下的该组。与符号本身一样，您将在图层列表中看到一个新的组图标，显示它们的布局方向。
如果您有一个控件，其中一个图层指示该符号的最小高度（如下面卡片示例中的图像），则对其旁边较短的文本图层应用覆盖将导致该符号使用不必要的填充调整大小。如果是这种情况，则需要在控件母版中将文本层和指定符号最小高度的层组合在一起。完成后，您将能够覆盖文本层，并且智能布局将知道在文本超过其最小高度之前不会增加整个符号高度。
此卡符号的最小高度由图像层指定。通过将文本层和图像层组合在一起，可以确保任何文本覆盖不会导致符号使用不必要的填充调整大小。
#如何使用隐藏符号的智能布局
智能布局不仅在覆盖更改符号实例的大小时有效，在隐藏符号时也有效。为此，您需要一组遵循符号母版布局方向的嵌套组件（例如，具有水平布局的菜单中的一行按钮）。通过覆盖面板隐藏其中一个控件将导致其他控件向上移动并填充空白点。这甚至适用于不同高度和宽度的符号。
This navigation menu Symbol has a horizontal layout and a row of button Symbols within it. When one of buttons is hidden using the Overrides menu, the surrounding buttons to move to close the gap.
网友评论