自动布局
自动布局是可以让你创建响应其内容的动态容器。
通过自动布局，你可以做到：
-
按钮可以通过调整文本内容来控制整个按钮的大小
-
列表可以通过添删内容、调整内容顺序来重新排列布局
-
元素可以通过复杂的调整设置来响应布局容器
添加自动布局
你可以对容器或多个选中的图层添加自动布局，包括：
- 新的或空的容器
- 带有内容的容器
- 组件或组件集
- 组或多个选中的图层
你可以通过多种方式创建自动布局：
- 单击属性面板的自动布局项中的「+」
- 右键单击该项目并在菜单中找到添加自动布局
- 使用 ⇧ Shift + A 键盘快捷键。
基本设置
方向
你可以改变自动布局的方向，使它们水平排列或垂直排列：
- 选择水平布局，可以添加、删除或重新排列 x 轴方向上的元素。
- 选择垂直布局，可以添加、删除或重新排列 y 轴方向上的元素。
注：目前仅支持一个方向上的自动布局，若想要两个方向的设计，可以使用嵌套自动布局。
间距
你可以在画布中或者自动布局面板中调整自动布局内图层间的距离。
-
选择一个自动布局并使鼠标悬停在间距区域，通过拖动手柄来调节间距的大小
-
选择一个自动布局并使鼠标悬停在间距区域，单击并在输入框中输入间距值来修改间距
-
在右侧自动布局面板中修改间距数值
边距
你可以在画布中或者自动布局面板中调整自动布局与其中图层周围的距离。
选择一个自动布局并使鼠标悬停在边距区域，通过拖动手柄来调节边距的大小
同时调节双边边距：Mac 按住⌥ Option ，Windows 按住 Alt
同时调节四边边距：Mac 按住⇧ Shift + ⌥ Option ，Windows 按住 Shift + Alt
选择一个自动布局并使鼠标悬停在边距区域，单击并在输入框中输入边距值来修改间距
在右侧自动布局面板中修改边距数值：
- 默认情况下，边距输入框被拆分成水平边距和垂直边距，可以在这里修改左右边距或上下边距
- 点击右侧的“展开边距”图标，边距输入框会变为“左，上，右，下”边距，可以独立调整自动布局容器的左侧、顶部、右侧和底部的边距
- 按住⌘ Command 并单击任意输入框，会变为四边输入框，可以同时修改四边的边距
对齐方式
可以通过对齐面板来调整自动布局内图层的对齐方式。
当开启分布式时，间距将变为自动，容器内的图层将自动按照容器大小均匀分配间距。
调整设置
自动布局最强大的功能之一，是它能够控制自动布局容器本身及其内部图层的尺寸，而两者相互有着非常强的依赖关系。 以「自动布局容器」为例，当它是水平布局，同时父级也是「自动布局容器」时，那么它的调整设置就拥有三个选项：
-
适应：将「自动布局容器」设置为「适应内容」，在遵循边距及间距规则的情况下，容器将保持尽可能小的尺寸包围其所有子图层；
-
固定：当「自动布局容器」设置为「固定宽度或高度」，容器尺寸的值将保持不变，同时子图层排列布局方式不被影响；
-
充满：「自动布局容器」中设置为「充满容器」，将拉伸到其父容器的宽度或高度。
自动布局是如何工作的
将自动布局添加到容器时，内部的图层彼此相邻（水平或垂直）排列。然后，容器的大小由容器中各个图层的总大小决定。自动布局容器可以具有边距，填充，描边和角半径，因此你可以创建按钮而无需添加其他图层。 自动布局按钮在编辑文本时，容器会自动调整大小。而且，如果你将一些按钮排列在一起，它们都会按照你的期望移动。
除了按钮之外，在使用重复的 UI 元素（如列表和菜单）创建设计时，自动布局也非常有用。现在只需简单的拖放即可完成操作，而不是无数次单击以将图层移到正确的位置。
嵌套自动布局
通过嵌套自动布局容器，可以将这些单独的自动布局图层组合为完整的界面，其方式与 div 标签可以嵌套在 HTML 中的方式几乎相同。就像在生产环境中一样，你可以轻松地编辑内容并将内容移入或移出自动布局容器。
希望借助「自动布局」，我们可以在 MasterGo 中运用代码结构来设计界面，现在就可体验。
评价此篇文章：👍🏻 有帮助 👎🏻 无帮助
👉本篇文章对你是否有帮助？👍🏻 有帮助 👎🏻 无帮助，我们期待着你的反馈。