自动布局

自动布局是 MasterGo 中最强大的布局引擎，让设计自动适应内容变化，实现真正的响应式设计。

什么是自动布局

自动布局让你定义一个容器的布局规则——子元素按水平或垂直排列、间距固定、内边距可控。修改内容时容器自动调整。

没有自动布局时：改一个按钮的文字，要手动调整按钮宽度和周围布局。 有自动布局时：改文字，按钮自动伸缩，周围元素自动重新排列。

创建自动布局

1. 选中容器 → 按 Shift + A 或在右侧面板点击「自动布局」
2. 多选至少两个图层 → 右键 → 「添加自动布局」→ 系统自动包裹并设定布局参数

核心属性

方向

方向	行为	典型场景
垂直	子元素从上到下排列	列表、表单、卡片内容
水平	子元素从左到右排列	导航栏、工具栏、按钮组

间距（Gap）

子元素之间的间隔距离。可与变量联动以统一设计规范。

内边距（Padding）

容器边缘与内容之间的距离，可四边统一、独立设置或对称设置。

对齐方式

控制子元素在主轴和交叉轴上的对齐：左上、居中、右下等 9 种组合。

分配方式

模式	行为
紧凑	子元素排在一起，容器跟随内容
两端对齐	首尾元素贴边，中间平均分布
等距分布	所有子元素之间间隔相等

子元素尺寸控制

• 固定尺寸：宽度/高度固定
• 填充容器（Fill）：占满剩余空间
• 适应内容（Hug）：根据自身内容决定尺寸

实战示例

自适应按钮

创建文本 → Shift + A → 方向水平 → Padding: 24/12。修改文本，按钮自动变宽。

导航栏

创建全宽 Frame → 水平自动布局 → 两端对齐 → Logo 在左，菜单在右。

产品卡片

图片+名称+价格+按钮 → 垂直自动布局 → Gap: 8px → 按钮设为填充容器。

嵌套自动布局

外层水平（头像+右侧内容），内层垂直（用户名+时间）。对齐：居中。

常见问题

问题	原因	解决方法
无法拖入新元素	容器被锁定	选中容器 → 解锁
元素飞出容器	固定尺寸但没有裁剪	开启「裁剪内容」
自动布局不生效	容器未设为自动布局	选中容器按 Shift+A
子元素尺寸不对	子元素设为固定值	改为「填充容器」
间距不一致	不同容器用不同 Gap	用变量统一管理间距

提示

把常用间距值（4/8/12/16/24/32/48）创建为数字变量。在自动布局的 Gap 和 Padding 中引用变量，可一键调整设计系统间距规范。