布局网格和约束

布局网格是可视化的辅助工具，可以帮助你组织布局、对齐容器中的图层。

约束允许你定义图层在其父容器尺寸变化时的响应方式，可以控制图层的相对位置和大小。

你可以将布局网格与约束相结合，创建强大而灵活的布局，以便于更精细地控制图层的响应方式。

拉伸的布局网格

当布局方式为「拉伸」时，布局网格可自动适应容器的尺寸。因此，当你调整容器大小时，设计内容能做出响应。

如果布局方式设置为「拉伸」，Motiff 妙多会将距离图层最近的行或列作为约束的参考对象：

• 当垂直约束设置为上、下、上下、居中时，会将行作为约束的参考对象。
• 当水平约束设置为左、右、左右、居中时，会将列作为约束的参考对象。

比如，卡片使用了「拉伸」的布局网格，按钮设置了水平方向为「左」的约束。

这种情况下，若横向拖动卡片，布局网格会自动响应卡片的尺寸变化，按钮的约束参考对象是距离它最近的列。此时按钮的位置与仅添加约束时的位置不同。

固定的布局网格

固定的布局网格允许你定义行的高度和列的宽度。

你可以固定布局网格在父容器中的位置：

• 行：可以固定到容器的上部、下部或中心。
• 列：可以固定在容器的左侧、右侧或中心。

当你使用固定的布局网格时，Motiff 妙多会把父容器作为约束的参考对象。

比如，卡片使用了「固定」的布局网格，按钮设置了水平方向为「左」的约束。

这种情况下，若横向拖动卡片，布局网格仍固定在卡片的左侧，按钮的约束参考对象是其父容器。此时按钮位置与仅添加约束时的位置相同。