容器与组

Motiff 妙多中的容器与组都可以用来包含其他图层。但两者在属性和使用场景上存在显著差异，本文将详细介绍容器与组的不同，方便设计师更灵活地组织设计内容。

当你想要基于特定设备或屏幕尺寸做设计时，可以使用容器帮你划定一个界面区域。Motiff 妙多中的容器功能比传统设计工具的画板更全面。除了可以像画板一样用来包含设计内容外，你还可以给容器添加自动布局、在容器内嵌套其他容器、对容器内的子图层设置约束，由此帮助你创建更复杂的设计内容。当然，你也可以为容器添加圆角、填充、描边、效果等基础属性。

和其他设计工具中的组类似，Motiff 妙多中的组允许你将多个图层组合在一起。组的属性由子图层组合而成，其本身并没有任何属性。所以当你调整子图层的尺寸或移动子图层时，组的边界也会随之改变。

概括地说，容器有自身的属性，不受子图层的属性影响；而组的属性则由子图层所决定。接下来本文将从父子关系、容器、组这三个部分展开：

父/子/兄弟关系

在 Motiff 妙多中，我们使用「父」、「子」、「兄弟」等术语来描述图层间的关系。这些术语常用在解释编程中的类似关系。本节将解释不同场景下图层关系术语的具体含义与用法。

在 Motiff 妙多中，父图层、子图层、兄弟图层的定义如下：

• 父图层：内部包含了其他图层的图层是父图层。组件、容器和组都可以成为父图层。
• 子图层：父图层内部的图层是子图层。
• 兄弟图层：包含在同一个父图层内部的图层之间存在「兄弟关系」，我们将存在「兄弟关系」的图层称为兄弟图层。

容器

在介绍了图层之间的父/子/兄弟关系后，本节将重点介绍容器图层的创建、属性、尺寸调整和移入移出的操作。

创建容器

你可以使用 工具在画布中创建容器图层。Motiff 妙多支持通过以下方式创建：

• 使用快捷键 F / A。
• 工具栏选 工具。

此外，你还可以在画布中创建各种尺寸的容器：

• 点击画布区域创建尺寸为 100 x 100 的默认容器。
• 在画布中点击并拖动绘制光标自定义容器的尺寸。
• 在右边栏中选择预设尺寸。

容器属性

容器图层包含以下属性：

• 圆角：为一个容器创建更柔和的边缘。
• 裁剪内容：打开裁剪内容开关后，超出容器边界部分的图层内容都将被隐藏。
• 自动布局：创建动态响应内容变化的容器。
• 填充：为容器应用纯色、渐变、图片（PNG、JPEG）这几种填充类型。
• 描边：支持为容器添加描边以创建边框或轮廓。
• 效果：支持为容器添加阴影或模糊。

建立在容器上的特殊能力

Motiff 妙多中的容器包含了一些其他图层类型所不具备的特殊能力：

• 约束：定义子图层在调整容器大小时的响应方式。支持为容器内的子图层应用约束。
• 自动布局：支持为容器添加自动布局以创建响应其内容变化的动态布局。

调整容器尺寸

你可以像调整画布中的其他图层一样调整容器大小或比例。

拖动调整尺寸

鼠标拖动容器的边界框以手动调整尺寸：

1. 1.画布上或左边栏上的图层面板选中目标容器。
2. 2.点击容器圆角方向上或任意边上所对的手柄，拖动调整大小。

更换预设尺寸

选择一个预设模板以更改当前容器的尺寸：

1. 1.选中容器图层。
2. 2.在右边栏的设计面板中，容器区域附近选择下拉列表。
3. 3.列表中选择一个预设模板。
4. 4.Motiff 妙多将会更新该容器的尺寸。

设计面板调整

使用右边栏中的设计面板实时调整容器的宽、高。

当前 Motiff 妙多支持在 W 和 H 所对应的输入框区域输入数字，或者通过鼠标悬停到对应图标位置上，拖动调整参数。向左拖动减少数值，向右拖动增加数值。

在宽、高输入框右侧的链接按钮上切换以调整 锁定比例 的开启与否。

适应内容大小

「适应内容大小」可以使得容器自动调整为内容的尺寸。

• 使用快捷键：
  • macOS：⌥ Option + ⇧ Shift + ⌘ Command + R
  • Windows： Alt + Shift + Ctrl + R
• 点击设计面板右上角的 适应内容大小 按钮。

容器与父子关系

嵌套

Motiff 妙多支持在容器、组等图层内部放置其他图层，我们将这一过程称为「嵌套」。通过嵌套可以实现不同图层的组合以创建复杂界面。其中容器图层的嵌套会引入新的层次结构和概念：

• 最外层容器：直接在画布上的容器。
  • Motiff 妙多的最外层容器在图层面板中名称加粗展示。
  • 嵌套在其他容器或组内的容器图层都不能算是最外层容器。
• 非外层容器：包含在另一图层内的容器。
  • 你可以将容器放置在最外层容器内，或其他非外层容器内，甚至是组的内部。
  • 非外层容器既可以是父图层，也可以是子图层。

如下图所示，示例文件中左边的顶部状态栏、底部导航栏、详细信息这三个模块都是包含了子图层的父容器，使用预设尺寸模板可以为这三个模块再创建一个最外层容器，此时上述三个模块就是非外层容器。

移入移出图层的父子关系

当你将图层移动到新的位置时， Motiff 妙多可能会重新为其分配父图层。对于容器图层，将图层移入一个容器或者从当前的父容器中移出并放置到另一个容器中时，会发生父子关系的重新分配。

在 Motiff 妙多中，当你向非最外层容器移入图层时，遵循以下默认逻辑：

• 当移入的图层比容器小时，该图层将会成为容器的子图层。
• 当移入的图层比容器大时，该图层不会成为容器的子图层。

添加新图层的父子关系

在容器内添加新图层时，只要鼠标光标起点落在容器内，新添加的图层不论大小都将成为该容器的子图层。

维持图层间的父子关系

如果你想在移动图层位置的同时维持原先的父子关系，可通过按住以下快捷键实现：

• 移入图层时，按下 Space 键以避免父子关系的重新分配。
• 将图层移出容器的边界框时，按下 Space 键将维持原先的父子关系。

删除容器

选中容器后，使用删除键可以直接删除容器。需要注意的是，直接删除容器也会将容器的子图层一并删除。

如果你在删除容器的同时，还希望保留其中的全部子图层，可以选中右键菜单中的「取消编组」选项，或使用快捷键：

• macOS：⇧ Shift + ⌘ Command + G
• Windows：Shift + Ctrl + G

组

创建编组

要创建一个组，可以先选中一些图层后在右键菜单中选择「创建编组」选项，或使用快捷键：

• macOS： ⌘ Command + G
• Windows： Ctrl + G

选中组

首次点击该组中的图层时，将会直接选中整个组。要选中该组内的单个子图层，需要双击或直接从图层面板中选中该目标子图层。

取消编组

当你要取消编组时，选中该组后右键菜单选中「取消编组」选项，或使用快捷键：

• macOS：⇧ Shift + ⌘ Command + G
• Windows：Shift + Ctrl + G

组的其他属性

组的属性由子图层组合而成，其本身并没有任何属性。

• 当组内的图层被调整时，组的边界也会随之调整。
• 你可以在图层面板中拖动图层以实现某个图层的移入/移出。
• 你也可以将组嵌套在其他组内。