logo
帮助文档/图层与工具/布局工具/约束

约束

使用约束时,你可以控制一个容器内的图层在调整其所在容器大小时该如何响应。

使用约束构建的设计内容,能够灵活地适应不同分辨率和尺寸的屏幕,不需要按多种设备尺寸重新设计。

约束作用原理

你可以沿水平方向和垂直方向设置约束。

Motiff 妙多默认将图层的约束设置为「左」和「上」。

水平方向

当你沿水平方向调整图层所在容器的大小时,水平方向的约束决定了该图层会以何种方式跟随其所在容器变化。

  • 左:该图层距所在容器左侧距离不变,图层宽度不变,右侧距离跟随容器大小变化。
  • 右:该图层距所在容器右侧距离不变,图层宽度不变,左侧距离跟随容器大小变化。
  • 左右:该图层距所在容器左右两侧的距离保持不变,图层宽度跟随容器大小变化。
  • 居中:该图层的中心距所在容器的中心水平距离保持不变。
  • 缩放:该图层的宽度、距所在容器左右两侧的距离,都等比例跟随容器大小变化。

垂直方向

当你沿垂直方向调整图层所在容器的大小时,垂直方向的约束决定了该图层会以何种方式跟随容器变化。

  • 上:该图层距容器上侧的距离不变,图层高度不变,下侧距离跟随容器大小变化。
  • 下:该图层距容器下侧的距离不变,图层高度不变,上侧距离跟随容器大小变化。
  • 上下:该图层距所在容器上下两侧的距离保持不变,图层高度跟随容器大小变化。
  • 居中:该图层的中心距所在容器的中心垂直距离保持不变。
  • 缩放:该图层的高度、距容器上下两侧的距离,都按原比例跟随容器大小发生变化。

使用约束

适用范围

你可以对任意位于容器内的图层设置约束。但你无法对容器外的图层或者自动布局子图层设置约束。

  • 你可以对嵌套在其他容器中的容器设置约束。
  • 组将显示其所有子图层的约束。如果对组使用约束,约束将应用于组的所有子图层。

组的边界范围由它的所有子图层共同决定,所以组无法独自响应其所在容器的变化。

设置约束

  1. 1.选中容器内的图层。此时画布上的蓝色虚线代表当前图层水平、垂直方向的约束。
  2. 2.在属性面板的约束设置中调整水平、垂直方向的约束。
    • 你可以通过下拉菜单设置图层的约束。
    • 你也可以通过点击左侧的可交互图示设置约束。 '设置约束.png'

你可以按住 Shift 选择多个约束,例如:左右约束。

当想取消选择时,你可以按住 Shift 再次选择已选的约束。全部取消选择后,约束会变为缩放约束。

忽略约束

当你调整容器大小时可以通过按住修饰键暂时忽略约束。

  • macOS:调整大小时按住 ⌘ Command
  • Windows:调整大小时按住 Ctrl