Layouts

简介

Layouts 提供了一种通过将 Shapes “对接”在一起来堆叠它们的方法。这意味着如果堆叠中某个 Shape 的边界框发生变化，其他 Shape 将移动以适应该 Shape 所需的新空间。

这对于创建需要响应尺寸变化的动态布局非常有用，同时也是一项有趣的艺术功能。

创建布局

可以通过简单地将 Shapes 添加到以下布局组类型之一来创建布局：

• Layout Group - 在水平或垂直方向排列 Shapes，并提供换行到多行/多列的选项。
• Grid Layout Group - 将 Grid Layout Rows 排列成列。
• Grid Layout Row - 将 Shapes 排列成行，用于 Grid Layout Group。

1. 创建 3 个 Shapes。
2. 选中所有 3 个 Shapes，在 Viewport 中右键单击，然后选择 Layout > Embed selected in Horizontal Layout。

要创建简单的水平布局：

1. 创建 2 个 Shapes。
2. 创建一个 Layout Group。
3. 在 Scene Window 中选中两个 Shapes。
4. 将两个 Shapes 拖放到 Layout Group 上。
5. 释放鼠标。

两个 Shapes 将并排排列在水平布局中。如果更改任一 Shape 的 Width（Size W），布局将相应更新。

布局组可以像任何其他图层一样通过 Add Layers 窗口创建，但也可以使用 Scene Window 或 Viewport 中的上下文菜单创建。只需选中多个 Shapes，右键单击并选择 Layout > Embed selected in [Horizontal/Vertical/Grid] Layout。

要从布局组中移除 Shape，只需将其拖出布局组即可。

层级

布局组是层级结构，Shapes 从图层堆叠的顶部到底部进行组织。Layout Group 的任何直接子级都将被纳入布局，但比子级更深的 Shape（例如孙级等）将被忽略。

通过在布局组中嵌套布局组，可以创建更复杂的布局。

在下面的示例中，2 个水平布局组是一个垂直布局组的子级，而该垂直布局组本身又是另一个水平布局组的子级。

多个布局组彼此嵌套。

可以通过在 Attribute Editor 中的 Advanced 选项卡下勾选 Exclude from Layout，将布局组中的 Shape 排除在布局之外。参见 Common Attributes。

变换

一旦将 Shape 添加到布局组中，就可以调整其变换（位置/旋转/缩放），这意味着可以为布局组内的 Shapes 制作动画。请注意，布局读取的是 Shape 的边界框，而忽略”顶层”变换。因此，虽然 Shape 可能被旋转，但布局本身不会改变，因为 Shape 的边界框没有改变。

当将 Shape 添加到布局组时，其 Position 将重置为 0,0。虽然 Shapes 不必位于 0,0，但如果 Shapes 被无意移动，布局可能会显得混乱。

从布局组中移除 Shape 时，其变换将保持不变。

边界框

Shape 的世界空间边界框用于计算它在布局中所占的空间。由于顶层变换被忽略，因此 Shape 需要成为另一个 Shape 的子级，才能使任何变换影响布局的边界框计算。

在下面的示例中，由于黄色矩形是 Group（底部）的子级，其旋转会更改该 Group 的边界框，进而影响布局组中其他 Shapes 的布局。

矩形作为布局组的子级。

矩形作为布局组中 Group 的子级。

虽然布局本身忽略子级以下的 Shapes（例如孙级等），但作为层级结构的一部分，它们会被包含在其父级的边界框计算中，从而可能影响布局。

Spacers

Spacers 可用于填充布局中的任何可用空间，从而用于均匀分布空间或将单元格对齐到布局的左/右/顶/底。

在下面的示例中，请注意 Spacer 如何填充布局中的可用空间，从而迫使其他单元格相应地对齐。

放置在两个 Shapes 之间的 Spacer。

放置在两个 Shapes 下方的 Spacer。

要将 Spacer 添加到布局中，只需通过 Add Layers 窗口创建一个，然后将其拖入 Layout Group。

Layout Group 的 Spacing Mode 必须设置为 Manual Spacers，才能将 Spacers 纳入布局计算。在任何其他 Spacing Mode 下，除非设置为 ‘Fixed Size’，否则它们将被忽略。

对齐

Shape 在单元格中的对齐方式可以通过其 Advanced 选项卡下的 Vertical/Horizontal Layout Alignment 选项设置。参见 Common Attributes（Advanced 选项卡）。

请注意，Text Shape 的 Alignment 和 Vertical Alignment 将被这些设置覆盖。

注意事项

• 具有基线对齐的 Text Shape 将对齐到其布局的底部。这意味着任何下行字母将位于其”单元格”之外。
• Layout Group 与 Groups 共享功能，因此子级将继承添加到其上的任何 Transforms、Filters 或 Deformers。
• 通过 Add Layers 窗口或上下文菜单创建任何布局组类型时，它们将在 Scene Window 中被锁定。这是为了防止在 Viewport 中与其他 Shapes 交互时，对组内的 Shapes 添加任何意外的变换。