容器图层

什么是容器图层

从设计工具的本质来看，“容器”解决的是“如何把一批元素作为一个整体进行组织、移动与约束”的问题。我们提供三种容器：

• 组（Group）：将若干图层打包为一个整体，便于一起移动、缩放与对齐。
• 画框（Frame）：既是容器也是可视化盒子，拥有自己的样式（填充、描边、圆角、阴影等）和“裁剪内容”能力，可对子元素施加位置约束。
• 自动布局画框：在画框的基础上增加自动布局规则，使子元素按方向、间距、对齐与边距自动排布。

用一句话区分：

• 需要“把一堆东西当成一个对象操作”时，用组。
• 需要“一个可视化盒子承载内容，并控制内部相对定位与裁剪”时，用画框。
• 需要“容器自动排版子元素”时，用自动布局画框。

组（Group）

组的目标是“合并操作成本”。当你把多个图层编组成组：

• 变换一致：移动、缩放、旋转会作用在整个组上，组内相对关系保持不变。
• 对齐/分布：可以把组当作单个对象与其他元素对齐或分布。
• 简化层级：在图层列表中减少同层级元素的数量，便于管理。

与画框的关键不同：

• 组不具备自己的可视化盒子样式（没有独立填充/描边/圆角），不支持“裁剪内容”。
• 组不对内部子元素提供“相对于容器边”的约束设置；缩放组时，本质是对子元素做整体变换。

创建/解散：

• 将所选图层编组：多选图层然后 ⌘/Ctrl + G。
• 取消编组： ⇧ + ⌘/Ctrl + G。

示例：用组操作一组矢量图层的 icon 的尺寸。

画框（Frame）

画框是“可视化容器”。它既像网页里的一个 div，也像一个可导出的画板：

• 可拥有样式：填充、描边、圆角、阴影等（见“样式属性”面板）。
• 可裁剪内容：开启“裁剪内容”后，超出画框边界的子元素将被隐藏。
• 可承载约束：子元素可设置相对于画框的定位约束（目前支持“左/中/右”和“上/中/下”的组合定位）。缩放画框时，被设置约束的子元素会按照约束限制保持与画框的相对位置不变。
• 可嵌套：画框可以嵌套画框，形成清晰的布局层级。

与组的关键不同在于：画框给了内部元素一个“参照系”。当父画框尺寸变化时，子元素依据约束规则决定自身位置，但尺寸不跟随画框尺寸变化。

创建与用法建议：

• 创建空画框：从工具栏选择“画框”，或使用快捷键 F（若未设置，请以界面提示为准）。
• 包裹已有内容：选中图层后，右键选择“创建画框组”（快捷键为 ⌥ + ⌘/Ctrl + G）。
• 推荐场景：页面区域容器、卡片、列表项、页头/页尾等需要“可视样式 + 约束”的结构。
• 按住 ⌘/Ctrl 时用鼠标点击图层，可以快速穿透层级直接选中图层。

子元素约束（Constraints）

当子元素位于画框中时，可在右侧属性面板设置其定位约束：

• 水平：左 / 中 / 右
• 垂直：上 / 中 / 下

含义与行为：

• 贴边：选择“左”（或“上”）代表在父画框宽度（或高度）变化时，子元素保持到该边的距离不变。
• 居中：选择“中”代表在父尺寸变化时，子元素保持居中位置。
• 组合：可组合“左+上”“右+下”等，形成你需要的锚点定位。

裁剪内容（Clip Content）

• 关闭：可在画框外看到超出内容，便于溢出装饰或投影效果。
• 开启：裁剪到画框边界，仅显示容器范围内的内容，常用于列表卡片、可滚动面板的可视窗口等。

自动布局画框

自动布局画框 = 画框 + 自动排版属性。相比普通画框，它增加了对子元素的排列规则：

• 方向：水平或垂直。
• 对齐：多种对齐方式。
• 间距：元素间距与四周边距。

尺寸模式：

• 适应内容：容器尺寸由子元素、间距与边距计算得出。
• 固定宽/高：容器保持指定尺寸，内部仍按自动布局规则排布。

子元素尺寸：

• 适应内容、固定宽高、填充（占据剩余空间）。

使用建议：

• 需要“列表/导航/按钮组”等可增删项且保持规律排版时，优先使用自动布局画框。
• 复杂区域可“画框（负责样式与裁剪）”外包裹“自动布局画框（负责排版）”，或反之，视你希望哪一层承担样式与裁剪而定。

有关详细规则，见《自动布局》。

选择哪一种？

• 只想把元素捆在一起移动/对齐，不需要容器样式与裁剪 → 组。
• 需要容器本身有填充/圆角/阴影，或需要“裁剪内容”“子元素相对定位约束” → 画框。
• 需要自动排版与内容驱动的尺寸/间距管理 → 自动布局画框。

常见操作与快捷键

• 编组：⌘/Ctrl + G
• 解散分组：⇧ + ⌘/Ctrl + G
• 将所选放入画框：⌥ + ⌘/Ctrl + G
• 新建画框工具：F
• 添加自动布局：⇧ + A

转换与嵌套

• 组 → 画框：选中组，右键“放入画框”，原相对关系保持，获得容器样式与约束能力。
• 画框 ↔ 自动布局画框：在画框上开启“自动布局”即可转换；关闭则回到普通画框。
• 允许嵌套：可以在画框内再放组/画框/自动布局画框，形成层次清晰的结构。

故障排查

• 子元素位置在父尺寸变化时“不跟手”？
  • 检查是否为“组”（组不会提供约束），需要时转为“画框”。
  • 若是画框，检查子元素约束是否设置为期望的“左/中/右、上/中/下”。
• 元素被“截掉”了？
  • 检查父画框是否开启了“裁剪内容”。
• 自动布局间距不生效？
  • 先选中的是“自动布局画框”本身，调整其“方向、对齐、间距、边距”。
• 拖拽进不去自动布局？
  • 当元素尺寸较大时，可按住 ⌘/Ctrl 强制插入到自动布局层级（常见交互）。