智能布局

智能布局是一个工具，可以在您编辑、调整大小和删除布局中的元素时自动保持间距和内边距。 使用智能布局，您无需每次进行更改时都手动调整整个布局。 智能布局可以处理所有这些，从而节省您的时间和精力。

为什么使用智能布局？

当您将智能布局应用于您的设计时，它们会在保持您应用于布局的规则的同时自动适应您所做的更改。 智能布局可以显着加快您的设计工作流程，尤其是在您处理具有水平或垂直布局的常见 UI 元素（例如按钮、菜单或输入字段）时。

您可以在设计工作流程的一开始应用智能布局，也可以在调整更成熟的布局时稍后应用。

如何应用智能布局属性

智能布局适用于组、画板和符号。 您可以通过检查器、使用键盘快捷键或使用菜单栏来应用和编辑智能布局属性

通过检查器

选择要应用智能布局的组或画板，然后转到检查器中的布局面板，您将在其中找到不同的智能布局属性。 应用了智能布局的元素将在图层列表中显示一个新的紫色图标，指示其布局方向。 同样，带有智能布局的组将显示一个灰色图标。

通过快捷键

选择要应用智能布局的元素，然后按 ⌘L，然后按 ←、H、→、↑、V 或 ↓ 来设置您的布局方向。 按 L 删除智能布局，或按任何其他键取消操作。

如果您在包含至少一个图层的多重选择中应用智能布局快捷键，它们将自动分组。

通过菜单栏

选择要应用智能布局的元素，然后转到菜单 > 图层并选择一个布局属性 — 或选择选择智能布局，然后选择快捷键（这些快捷键将显示在屏幕底部）。

暂停智能布局

有时您可能希望在不影响其布局的情况下处理元素 — 例如，在使图像变短的同时保持文本在同一位置时。 在这种情况下，您可以轻松地通过按 ⌥⌘L 来暂停智能布局。 当您清除选择时，智能布局将自动恢复。

智能布局设置

智能布局会垂直或水平调整布局大小，并且还会遵循您选择的方向

垂直智能布局将调整内容的大小，从

• 上到下
• 下到上
• 中间

水平智能布局将调整内容的大小，从

• 左到右
• 右到左
• 居中

组合不同的布局方向

您可以将智能布局与水平布局和垂直布局一起应用。 为此，请选择要以不同方向调整大小的图层，然后将它们分组。 现在，您可以在检查器的布局面板下将单独的一组智能布局属性应用于该组。

在何处应用智能布局

智能布局适用于

组和画板：使用检查器、快捷方式或菜单栏来应用智能布局。

当您执行以下操作时，智能布局将触发组

• 调整大小、删除、剪切 ⌘X、缩放或粘贴 ⌘V 组中的图层
• 通过将图层或符号从您的文档拖到具有智能布局的组上，来添加图层或符号。 按住 ⌃ 以忽略已应用智能布局的组。
• 复制 ⌘D 图层（如果图层是均匀间隔的组的一部分，则相同的间距也将应用于新的副本）
• 使用父组中智能布局处于活动状态的智能分布手柄，调整嵌套组（均匀间隔）图层之间的间距
• 编辑组中任何文本图层的内容或字体属性
• 在组中交换符号，或调整它们的大小以适合

符号：当您创建一个新的符号时，您可以立即通过创建符号表应用智能布局。 并且，如果您从已经使用智能布局的组或画板创建一个新的符号，它将遵循相同的布局方向。

要将智能布局应用于现有符号，请通过选择该符号的任何实例并按 ⌘↵ 来前往其源 — 之后您可以在检查器的布局面板中应用智能布局属性。

将调整大小约束与智能布局一起使用

您还可以将调整大小约束应用于使用智能布局的选择。 这使您可以更好地控制选择的行为方式，例如确保它永远不会增长或缩小。

请记住，当您将智能布局应用于文本图层时，它们的对齐方式应为自动高度 （对于垂直布局）或自动宽度 （对于水平布局）。

智能分布和智能布局

除了调整元素大小之外，触发智能布局的另一种方法是使用智能分布调整它们之间的间距。 均匀间隔的图层需要包含在它们自己的组中，嵌套在智能布局组内。

符号中的智能布局

智能布局可以显着加快您的设计工作流程，因为它有助于使您的符号更具可重用性，同时保持其外观一致。

当您为符号选择智能布局属性时，您会在检查器的布局面板下看到最小高度（对于垂直布局）或最小宽度（对于水平布局）的字段。 向这些字段添加尺寸将阻止您的符号缩小到最小尺寸以下，无论其覆盖内容如何。 如果您将这些字段留空，您的符号将缩小到任何尺寸以适合其内容。

如果您分离具有智能布局的符号，Sketch 会将相同的属性应用于生成的组。

请记住，如果您更改符号源的现有智能布局属性，该符号的实例可能会看起来不正确。 在大多数情况下，使用检查器中覆盖面板中的调整实例大小以适合内容 按钮将修复此问题（或转到 图层 > 符号 > 调整实例大小以适合内容）。