### 文章目录
- [@toc](#文章目录 @[toc] 一、添加元素（4 种方法） 1）拖拽放入（最常用） 2）直接创建新元素 3）复制已有元素（快速批量） 4）图层树拖入 二、删除元素（3 种方法） 1）彻底删除（主组件/普通 Frame） 2）隐藏（常用，保留位置） 3）透明占位（保留空隙） 三、排序与调整顺序 四、关键规则（必看） 五、常见场景示例 场景1：导航栏加图标 场景2：列表删除项 场景3：按钮组隐藏次要按钮)
- [一、添加元素（4 种方法）](#文章目录 @[toc] 一、添加元素（4 种方法） 1）拖拽放入（最常用） 2）直接创建新元素 3）复制已有元素（快速批量） 4）图层树拖入 二、删除元素（3 种方法） 1）彻底删除（主组件/普通 Frame） 2）隐藏（常用，保留位置） 3）透明占位（保留空隙） 三、排序与调整顺序 四、关键规则（必看） 五、常见场景示例 场景1：导航栏加图标 场景2：列表删除项 场景3：按钮组隐藏次要按钮)
- [1）拖拽放入（最常用）](#文章目录 @[toc] 一、添加元素（4 种方法） 1）拖拽放入（最常用） 2）直接创建新元素 3）复制已有元素（快速批量） 4）图层树拖入 二、删除元素（3 种方法） 1）彻底删除（主组件/普通 Frame） 2）隐藏（常用，保留位置） 3）透明占位（保留空隙） 三、排序与调整顺序 四、关键规则（必看） 五、常见场景示例 场景1：导航栏加图标 场景2：列表删除项 场景3：按钮组隐藏次要按钮)
- [2）直接创建新元素](#文章目录 @[toc] 一、添加元素（4 种方法） 1）拖拽放入（最常用） 2）直接创建新元素 3）复制已有元素（快速批量） 4）图层树拖入 二、删除元素（3 种方法） 1）彻底删除（主组件/普通 Frame） 2）隐藏（常用，保留位置） 3）透明占位（保留空隙） 三、排序与调整顺序 四、关键规则（必看） 五、常见场景示例 场景1：导航栏加图标 场景2：列表删除项 场景3：按钮组隐藏次要按钮)
- [3）复制已有元素（快速批量）](#文章目录 @[toc] 一、添加元素（4 种方法） 1）拖拽放入（最常用） 2）直接创建新元素 3）复制已有元素（快速批量） 4）图层树拖入 二、删除元素（3 种方法） 1）彻底删除（主组件/普通 Frame） 2）隐藏（常用，保留位置） 3）透明占位（保留空隙） 三、排序与调整顺序 四、关键规则（必看） 五、常见场景示例 场景1：导航栏加图标 场景2：列表删除项 场景3：按钮组隐藏次要按钮)
- [4）图层树拖入](#文章目录 @[toc] 一、添加元素（4 种方法） 1）拖拽放入（最常用） 2）直接创建新元素 3）复制已有元素（快速批量） 4）图层树拖入 二、删除元素（3 种方法） 1）彻底删除（主组件/普通 Frame） 2）隐藏（常用，保留位置） 3）透明占位（保留空隙） 三、排序与调整顺序 四、关键规则（必看） 五、常见场景示例 场景1：导航栏加图标 场景2：列表删除项 场景3：按钮组隐藏次要按钮)
- [二、删除元素（3 种方法）](#文章目录 @[toc] 一、添加元素（4 种方法） 1）拖拽放入（最常用） 2）直接创建新元素 3）复制已有元素（快速批量） 4）图层树拖入 二、删除元素（3 种方法） 1）彻底删除（主组件/普通 Frame） 2）隐藏（常用，保留位置） 3）透明占位（保留空隙） 三、排序与调整顺序 四、关键规则（必看） 五、常见场景示例 场景1：导航栏加图标 场景2：列表删除项 场景3：按钮组隐藏次要按钮)
- [1）彻底删除（主组件/普通 Frame）](#文章目录 @[toc] 一、添加元素（4 种方法） 1）拖拽放入（最常用） 2）直接创建新元素 3）复制已有元素（快速批量） 4）图层树拖入 二、删除元素（3 种方法） 1）彻底删除（主组件/普通 Frame） 2）隐藏（常用，保留位置） 3）透明占位（保留空隙） 三、排序与调整顺序 四、关键规则（必看） 五、常见场景示例 场景1：导航栏加图标 场景2：列表删除项 场景3：按钮组隐藏次要按钮)
- [2）隐藏（常用，保留位置）](#文章目录 @[toc] 一、添加元素（4 种方法） 1）拖拽放入（最常用） 2）直接创建新元素 3）复制已有元素（快速批量） 4）图层树拖入 二、删除元素（3 种方法） 1）彻底删除（主组件/普通 Frame） 2）隐藏（常用，保留位置） 3）透明占位（保留空隙） 三、排序与调整顺序 四、关键规则（必看） 五、常见场景示例 场景1：导航栏加图标 场景2：列表删除项 场景3：按钮组隐藏次要按钮)
- [3）透明占位（保留空隙）](#文章目录 @[toc] 一、添加元素（4 种方法） 1）拖拽放入（最常用） 2）直接创建新元素 3）复制已有元素（快速批量） 4）图层树拖入 二、删除元素（3 种方法） 1）彻底删除（主组件/普通 Frame） 2）隐藏（常用，保留位置） 3）透明占位（保留空隙） 三、排序与调整顺序 四、关键规则（必看） 五、常见场景示例 场景1：导航栏加图标 场景2：列表删除项 场景3：按钮组隐藏次要按钮)
- [三、排序与调整顺序](#文章目录 @[toc] 一、添加元素（4 种方法） 1）拖拽放入（最常用） 2）直接创建新元素 3）复制已有元素（快速批量） 4）图层树拖入 二、删除元素（3 种方法） 1）彻底删除（主组件/普通 Frame） 2）隐藏（常用，保留位置） 3）透明占位（保留空隙） 三、排序与调整顺序 四、关键规则（必看） 五、常见场景示例 场景1：导航栏加图标 场景2：列表删除项 场景3：按钮组隐藏次要按钮)
- [四、关键规则（必看）](#文章目录 @[toc] 一、添加元素（4 种方法） 1）拖拽放入（最常用） 2）直接创建新元素 3）复制已有元素（快速批量） 4）图层树拖入 二、删除元素（3 种方法） 1）彻底删除（主组件/普通 Frame） 2）隐藏（常用，保留位置） 3）透明占位（保留空隙） 三、排序与调整顺序 四、关键规则（必看） 五、常见场景示例 场景1：导航栏加图标 场景2：列表删除项 场景3：按钮组隐藏次要按钮)
- [五、常见场景示例](#文章目录 @[toc] 一、添加元素（4 种方法） 1）拖拽放入（最常用） 2）直接创建新元素 3）复制已有元素（快速批量） 4）图层树拖入 二、删除元素（3 种方法） 1）彻底删除（主组件/普通 Frame） 2）隐藏（常用，保留位置） 3）透明占位（保留空隙） 三、排序与调整顺序 四、关键规则（必看） 五、常见场景示例 场景1：导航栏加图标 场景2：列表删除项 场景3：按钮组隐藏次要按钮)
- [场景1：导航栏加图标](#文章目录 @[toc] 一、添加元素（4 种方法） 1）拖拽放入（最常用） 2）直接创建新元素 3）复制已有元素（快速批量） 4）图层树拖入 二、删除元素（3 种方法） 1）彻底删除（主组件/普通 Frame） 2）隐藏（常用，保留位置） 3）透明占位（保留空隙） 三、排序与调整顺序 四、关键规则（必看） 五、常见场景示例 场景1：导航栏加图标 场景2：列表删除项 场景3：按钮组隐藏次要按钮)
- [场景2：列表删除项](#文章目录 @[toc] 一、添加元素（4 种方法） 1）拖拽放入（最常用） 2）直接创建新元素 3）复制已有元素（快速批量） 4）图层树拖入 二、删除元素（3 种方法） 1）彻底删除（主组件/普通 Frame） 2）隐藏（常用，保留位置） 3）透明占位（保留空隙） 三、排序与调整顺序 四、关键规则（必看） 五、常见场景示例 场景1：导航栏加图标 场景2：列表删除项 场景3：按钮组隐藏次要按钮)
- [场景3：按钮组隐藏次要按钮](#文章目录 @[toc] 一、添加元素（4 种方法） 1）拖拽放入（最常用） 2）直接创建新元素 3）复制已有元素（快速批量） 4）图层树拖入 二、删除元素（3 种方法） 1）彻底删除（主组件/普通 Frame） 2）隐藏（常用，保留位置） 3）透明占位（保留空隙） 三、排序与调整顺序 四、关键规则（必看） 五、常见场景示例 场景1：导航栏加图标 场景2：列表删除项 场景3：按钮组隐藏次要按钮)
一、添加元素（4 种方法）
1）拖拽放入（最常用）
- 选中外部图层/组件
- 拖进 Auto Layout 容器
- 看蓝色指示线 ：
- 线在开头 → 插最前
- 线在中间 → 插两元素之间
- 线在末尾 → 插最后
2）直接创建新元素
在 AL 容器内单击画布，直接用文字/形状工具画，自动成为子元素。
3）复制已有元素（快速批量）
- 选中 AL 内元素
- Mac：Command+D ；Win：Ctrl+D
- 副本自动排在原元素右侧/下方（按布局方向）
4）图层树拖入
左侧图层列表，直接把图层拖到 AL Frame 下方，同样会有蓝线提示位置。
二、删除元素（3 种方法）
1）彻底删除（主组件/普通 Frame）
- 选中元素 → 按 Backspace/Delete
- 或直接拖到 AL 容器外
- 结果：后面元素自动补位，间距保持一致
2）隐藏（常用，保留位置）
- 选中元素 → 图层眼睛图标关闭
- 或右侧面板取消勾选 Visible
- 特点：不占空间，布局收缩
3）透明占位（保留空隙）
- 不删除、不隐藏
- 右侧面板把 Opacity 设为 0%
- 特点：位置与间距完全保留，仅看不见
三、排序与调整顺序
- 拖拽排序：在 AL 内部上下/左右拖，蓝线定位新位置
- 方向键微调 ：选中元素 → 按上下左右，快速移动顺序
- 图层树排序：左侧列表直接上下拖动图层，顺序同步到画布
四、关键规则（必看）
- AL 内不能用 Constraints ：直接子元素只能用 Resizing（Hug/Fill/Fixed）
- 组件实例限制 ：
- 主组件（Main Component）：可删、可加、可排序
- 实例（Instance） ：不能删除 ，只能隐藏/透明
- 删后自动重排：无论删哪个，剩余元素自动按原间距对齐，不会乱
五、常见场景示例
场景1：导航栏加图标
- 水平 AL → 拖入图标 → 蓝线放在最左 → 自动左对齐、间距均匀
场景2：列表删除项
- 垂直 AL → 选中某行 → Delete → 下面所有行自动上移，间距不变
场景3：按钮组隐藏次要按钮
- 水平 AL → 选中次要按钮 → 隐藏 → 剩余按钮自动靠拢，宽度自适应