在MasterGo中为界面元素设置约束需先确保其位于容器内,再通过右侧约束面板设定水平与垂直方向的定位规则,支持单侧固定、双向固定及批量设置,最后拖动容器验证效果。

在MasterGo中为界面元素设置约束,是为了让它们在父容器尺寸变化时保持预期位置和间距,避免每次适配新设备都要手动重排。这一步必须在容器内操作,普通组无法应用约束。
确认元素处于容器内
选中目标图层(如图标、按钮、标题),查看左侧图层列表:若它位于一个标注为「容器」的图层下方,且该容器名称右侧有「C」标识,则满足前提条件。如果不是,右键该图层→「转换为容器」,或先框选多个图层→按 Ctrl/Cmd + Shift + C 创建容器。
注意:组(Group)不支持约束,强行在组上点击约束设置项会无响应。必须是容器(Container)才能启用右侧栏的约束面板。
打开约束设置面板
确保已选中容器内的某个子图层(不能选中容器本身),右侧属性栏自动切换至该图层属性页。
向下滚动到「约束」区域——这里有两个下拉菜单,第一个控制水平方向,第二个控制垂直方向。
鼠标直接点击下拉菜单左侧的定位示意图(如左上角小方块),比点开菜单更快捷;点击后蓝线会实时显示当前生效的约束方向。
设置单侧约束(常用组合)
方法一:顶部+居左固定(如导航栏)
水平选「靠左」,垂直选「顶端」→子元素x坐标锁定,y坐标锁定,拉伸父容器时完全不位移。
方法二:右侧+底部固定(如悬浮操作按钮)
水平选「靠右」,垂直选「底端」→父容器变宽,按钮始终距右边界固定距离;父容器拉高,按钮始终贴底。这比手动计算坐标更可靠。
方法三:左右固定+垂直居中(如横幅标题)
水平选「左右固定」,垂直选「居中」→父容器宽度变化时,标题左右边距等比例缩放;高度变化时,标题y轴位置动态调整至容器中心。⚠️注意:【左右固定】必须同时设置左右两个方向,只设一边会导致布局异常】
批量设置多个子元素约束
第一步:按住 Shift 依次点击图层列表中多个需统一约束的子图层(例如卡片内的图片、标题、副文本)。
第二步:在右侧约束面板中,分别设置水平与垂直约束选项——所有被选中的图层将同步应用该约束规则。
第三步:对其中某个特殊元素(如右上角「更多」图标),单独取消选择→重新单击它→改设为「靠右+顶端」,实现混合约束逻辑。
这一步操作起来很简单,直接多选再点选即可,无需逐个重复设置。
验证约束是否生效
选中父容器,拖动其右边缘或下边缘改变尺寸。
观察子元素:若位置随容器拉伸/压缩而按设定规则移动(如靠右元素始终与右边界保持5px空隙),说明约束已正确绑定。
如果某元素完全不动或飞出画布,立即撤销(Ctrl/Cmd + Z),检查它是否被误放在容器外,或约束方向选反(例如把「底端」错选成「顶端」)。


















