一、 布局约束功能的基础概念 #
1. 定义与作用 #
- 定义： 布局约束（Constraints）用于设置元素在水平（Horizontal）或垂直（Vertical）方向上，与其上级 Frame 的关系。
- 前提条件（重点）： 元素必须置入于一个 Frame（画板）中，才能启用该功能。如果元素没有 Frame，就无法进行约束设置。
2. 设置面板 #
- 在右侧属性面板中，约束功能面板（Constraints）专门用于设置水平方向和垂直方向的对齐约束。
- 该面板还提供了一个直观的图例（通常是一个四周带有线的矩形）来示意用户已设置的对齐宽度。
二、 约束的四种类型 #
布局约束功能包含四种主要类型，用于应对不同的适配需求：
1. 单侧约束（Single-Side Constraint） #
- 特点： 元素只基于上级 Frame 的一侧进行对齐（如左、右、上、下对齐）。
- 默认设置： 默认情况下，约束是基于左上角对齐，即保持元素与左上角的间距一致。
- 结果： 拖动 Frame 改变大小时，元素会保持其自身的尺寸不变，仅按照选定的对齐方向保持间距。
- 水平方向： 可设置 Left（左对齐）或 Right（右对齐）。
- 垂直方向： 可设置 Top（上对齐）或 Bottom（下对齐），常用于底部的导航栏等元素。
2. 反向约束（Left and Right / Top and Bottom） #
- 特点： 元素同时基于相对的两侧（如左右两侧或上下两侧）进行对齐。
- 实现方式： 在水平或垂直方向上，选择 Left + Right 或 Top + Bottom。
- 结果： 当 Frame 尺寸发生变化时，元素本身的大小会发生改动，会被拉扯变大，以满足其与两侧间距的一致性。
- 应用场景： 常用于需要随着屏幕拉伸的元素，如搜索框或全屏按钮。
3. 中心约束（Center） #
- 特点： 元素根据其与父级 Frame 的中线位置进行对齐。
- 实现方式： 选择 Center 选项。
- 结果： 元素会保持在原来的比例位置上。当 Frame 尺寸变化时，元素自身的大小不会改动，但其位置会基于中线比例发生变动。
- 应用场景： 常用于设计固定大小且需要始终位于屏幕中央的元素，如弹窗。
4. 比例约束/缩放（Scale） #
- 特点： 元素会按比例进行缩放。
- 实现方式： 选择 Scale 选项。
- 结果： 元素和其与 Frame 的间距都会按比例进行放大或缩小。
- 应用场景： 相对较少，但可用于需要等比缩放的场景，如背景图片或视频区域，以确保宽高比不变。但来源指出，在 Figma 中直接使用此功能的应用场景非常少，并且不如手动调节灵活。
三、 约束功能的高级逻辑与层级关系 #
1. 约束只针对上级 Frame 生效（重点） #
- 层级限制： 约束功能只针对其直接上级 Frame 生效。
- 多层 Frame： 即使存在多层 Frame 嵌套，子元素也只根据上一个层级的 Frame 进行对齐和运动。
2. 普通编组（Group）与约束 #
- Group 的特性： 普通编组（Group）本身没有对齐属性。
- 批量操作： 虽然可以对 Group 设置约束，但这只是对组内的子元素进行批量操作。Group 会将约束逻辑穿透给下级的子元素。
- 结果： 如果组内的子元素拥有不同的约束设置，那么 Group 的约束设置会显示为
Mix（混合），表明其本身没有固定的对齐逻辑。
3. 自动布局（Auto Layout）与约束 #
- 子元素限制： 自动布局的子元素是没有约束设置的。因为子元素的布局设置由自动布局的属性决定。
- 自身可设置： 自动布局的父级容器本身可以设置约束。例如，可以对自动布局容器设置左右约束，使其宽度随外部 Frame 改变而变化。
最后一次修改于 2025-11-19