自动布局

自动布局的使用方法

自动布局是 Motiff 妙多中十分强大的功能，使用自动布局可以高效完成设计工作。

有很多常见的设计场景可以使用自动布局，比如：

• 随着文本内容响应式变化的按钮。
• 可以自适应添加、删除、复制的列表。
• 通过嵌套自动布局容器构建响应式的界面。

对于自动布局，以下功能无法同时使用：

🚫 不可以对自动布局容器的子图层应用约束，除了使用绝对位置的子图层。👉🏻探索更多「约束」功能

🚫 不可以对自动布局容器的子图层使用智能排列。

操作自动布局

添加自动布局

自动布局是容器的一个属性。👉🏻探索更多「容器」功能

你可以为一个容器，组件或其他选择的多个图层添加自动布局。这包括：

• 容器
• 组件或变体组件
• 组或选中的多个图层

有 3 种方式可以添加自动布局：

• 在选中容器的状态下，点击右边栏中自动布局旁边的 。
• 右键点击要添加自动布局的图层，选择添加自动布局。
• 选中要添加自动布局的图层，使用快捷键：Shift + A。

添加/编辑/移除子图层

添加子图层

你可以将任何图层添加到自动布局中。

1. 1.拖动图层到一个自动布局容器中。
2. 2.根据蓝色指示线的提示选择放置的位置。

复制子图层

在自动布局中，你可以复制子图层。Motiff 妙多会将其副本自动添加到原图层的右侧（水平排列）或下方（垂直排列）：

1. 1.在自动布局中选中子图层。
2. 2.使用快捷键进行复制：
   • macOS：⌘ Command + D 。
   • Windows：Ctrl + D 。

调整子图层顺序

你可以改变子图层在自动布局中的顺序：

1. 1.在自动布局中选中子图层。
2. 2.有以下方法可以重新排序子图层：
   • 使用键盘上的方向键，把子图层放到新的位置。
   • 拖动子图层到新的位置。

移除子图层

你可以从自动布局容器中删除子图层，有如下三种操作：

• 删除：选中子图层并使用 Delete 或 Backspace 键。
• 隐藏：点击 隐藏图层。
• 移出：选中子图层，将其拖动到自动布局容器外。

删除自动布局

你可以删除自动布局，自动布局容器将恢复为普通容器。

有3种方式删除自动布局：

• 选中自动布局容器，点击右边栏中自动布局旁边的 。
• 右键点击自动布局容器，选择删除自动布局。
• 选中自动布局容器，使用快捷键：
  • macOS：⌥ Option + ⇧ Shift + A
  • Windows：Alt + Shift + A

自动布局的基本属性

方向

方向是指子图层在自动布局容器中的排列方向。

自动布局的方向有两种：水平方向和垂直方向。

每个自动布局只能设置一种方向，要构建多个方向的话需要进行嵌套。

间距

你可以通过画布或右边栏调整子图层间的距离。

在画布区域调整

在画布区域有以下方式调整自动布局的间距：

• 选中自动布局容器并使鼠标悬停在容器上，出现粉色手柄，通过拖动手柄来调节间距的大小。
• 选中自动布局容器，点击间距区域并在输入框中输入间距值。

在右边栏调整

在右边栏有以下方式调整自动布局的间距：

• 直接输入数值。
• 在输入框中使用方向键调整数值。
• 在输入框中的按住图标或者按住 ⌥ Option 进行来回拖动。

边距

边距是指自动布局容器的边界和子图层之间的距离。

你可以在垂直或水平方向上统一设置边距，也可以对上、下、左、右的边距分别设置不同的值。

可以通过画布或右边栏调整边距。

在画布区域调整

在画布区域有以下方式调整自动布局的间距：

• 选中自动布局容器并使鼠标悬停在容器上，出现粉色手柄，通过拖手柄来调节边距的大小。
• 选中自动布局容器，点击边距区域并在输入框中输入边距值。

以上方式都可以使用快捷键实现同时调整多个边距：

在右边栏调整

在右边栏中，可以分别调整垂直方向（上和下）、水平方向（左和右）的边距。

如果你想为四边设置不同边距，在右边栏中点击 ，修改不同的边距值。

对齐

你可以在自动布局容器上设置子图层的对齐方式，无法单独控制子图层的对齐方式。

自动布局容器的方向和间距类型决定你可以使用的对齐方式。

在右边栏中，可以通过可交互图示调整对齐方式。

当间距类型设置为自动间距时，则每个方向只有三种对齐方式：

• 水平方向：顶部、居中、底部。
• 垂直方向：左、中、右。

响应类型

自动布局容器可以根据子图层的大小/数量变化响应式的调整自己大小，子图层也可以根据容器的大小变化响应式的调整自己的大小。

你可以通过响应类型控制容器、子图层如何进行响应式的大小变化。

在右边栏中的设计面板调整响应类型。响应类型有3种，分别是：「包围内容」、「填充容器」和「固定」，其中宽度和高度的响应类型要分别设置。

包围内容 你可以将自动布局容器设置为「包围内容」，设置后，容器的大小将根据子图层的数量/大小变化。在保留间距和边距的前提下，容器会尽可能缩小尺寸包裹住子图层。

填充容器 你可以将自动布局子图层设置为「填充容器」，设置后，子图层的大小将根据容器的大小变化。 在保留间距和边距的前提下，子图层会尽可能变大去填满容器内的剩余空间。

固定 你可以将自动布局容器或自动布局子图层设置为「固定」，设置后，图层不再响应式的根据容器，或根据子图层变化大小。

自动布局的进阶属性

间距类型

可以通过设置间距类型，调整子图层在容器内的间距排列方式。

点击右边栏的自动布局模块中的 打开更多设置，调整间距类型：

• 固定间距（默认设置）：指的是子图层之间间距是固定的数值，也就是说不管容器大小怎么变，子图层的间距都是固定值。
• 自动间距：指的是在保留边距的前提下，子图层的间距会尽可能变大去填满容器内的剩余空间。

重叠时的遮挡方式

重叠时遮挡方式可以实现切换子图层重叠时的顺序。

当多个子图层重叠时，默认排列在后的子图层在上。

你可以更改在画布上看到的重叠的视觉顺序。

选择自动布局框架后，点击 打开更多设置，进行选择：

• 前遮后：自动布局容器中排列在前的子图层在上。
• 后遮前：自动布局容器中排列在后的子图层在上。

文本基线对齐

设置文本基线对齐，可以调整文本与文本或文本与其他图层之间的对齐关系。

当内容水平排列时，对齐方式中支持选择「文本基线对齐」。

在对齐选项旁边，点击 打开更多设置，在文本基线对齐旁边，点击 启用基线对齐。

绝对位置

绝对位置能够使子图层不受自动布局规则控制，在图层列表中仍在自动布局容器内部。启用了绝对位置的子图层精准放置在其父图层上。

要启用绝对位置，请选中自动布局容器的子图层，然后单击右边栏中的 。

自动布局的复杂应用

自动布局的操作便捷，但其强大功能远不止如此，你还可以通过以下用法探索自动布局的复杂应用。

自动布局和约束

你不能将约束应用于自动布局容器的子图层，除非该对象启用了绝对位置。相反，你可以使用响应类型来定义图层如何响应容器调整大小。

自动布局的嵌套

你可以将水平方向的自动布局嵌套垂直方向的自动布局，构建更复杂的响应式界面。

在示例中，通过三层自动布局嵌套结构实现响应式卡片：

• 第一层级：用户 ID 和描述是一个垂直方向的自动布局。
• 第二层级：将用户信息和用户头像创建一个水平方向嵌套的自动布局。
• 第三层级：将用户资料、文案、图片创建一个垂直方向嵌套的自动布局。

你可以通过以下方式嵌套自动布局：

• 将自动布局容器拖到现有的自动布局容器中
• 围绕选中的自动布局容器（和其他图层）创建一个新的自动布局容器。

组件中的自动布局

组件本身是容器，你可以为组件添加自动布局。

你无法通过多选组件批量添加自动布局，需要选中每个容器依次添加自动布局。

通过下表可以了解组件和实例中自动布局的功能：