使用约束时,你可以控制一个容器内的图层在调整其所在容器大小时该如何响应。
使用约束构建的设计内容,能够灵活地适应不同分辨率和尺寸的屏幕,不需要按多种设备尺寸重新设计。
约束作用原理
你可以沿水平方向和垂直方向设置约束。
Motiff 妙多默认将图层的约束设置为「左」和「上」。
水平方向
当你沿水平方向调整图层所在容器的大小时,水平方向的约束决定了该图层会以何种方式跟随其所在容器变化。
- 左:该图层距所在容器左侧距离不变,图层宽度不变,右侧距离跟随容器大小变化。
- 右:该图层距所在容器右侧距离不变,图层宽度不变,左侧距离跟随容器大小变化。
- 左右:该图层距所在容器左右两侧的距离保持不变,图层宽度跟随容器大小变化。
- 居中:该图层的中心距所在容器的中心水平距离保持不变。
- 缩放:该图层的宽度、距所在容器左右两侧的距离,都等比例跟随容器大小变化。
垂直方向
当你沿垂直方向调整图层所在容器的大小时,垂直方向的约束决定了该图层会以何种方式跟随容器变化。
- 上:该图层距容器上侧的距离不变,图层高度不变,下侧距离跟随容器大小变化。
- 下:该图层距容器下侧的距离不变,图层高度不变,上侧距离跟随容器大小变化。
- 上下:该图层距所在容器上下两侧的距离保持不变,图层高度跟随容器大小变化。
- 居中:该图层的中心距所在容器的中心垂直距离保持不变。
- 缩放:该图层的高度、距容器上下两侧的距离,都按原比例跟随容器大小发生变化。
使用约束
适用范围
你可以对任意位于容器内的图层设置约束。但你无法对容器外的图层或者自动布局子图层设置约束。
- 你可以对嵌套在其他容器中的容器设置约束。
- 组将显示其所有子图层的约束。如果对组使用约束,约束将应用于组的所有子图层。
组的边界范围由它的所有子图层共同决定,所以组无法独自响应其所在容器的变化。
设置约束
- 1.选中容器内的图层。此时画布上的蓝色虚线代表当前图层水平、垂直方向的约束。
- 2.在属性面板的约束设置中调整水平、垂直方向的约束。
- 你可以通过下拉菜单设置图层的约束。
- 你也可以通过点击左侧的可交互图示设置约束。

你可以按住 Shift 选择多个约束,例如:左右约束。
当想取消选择时,你可以按住 Shift 再次选择已选的约束。全部取消选择后,约束会变为缩放约束。
忽略约束
当你调整容器大小时可以通过按住修饰键暂时忽略约束。
- macOS:调整大小时按住 ⌘ Command 。
- Windows:调整大小时按住 Ctrl 。