约束与脱离自动布局

Auto Layout 解决流内排布；Constraints 解决普通子层在父 Frame 改变尺寸时如何保持关系。它们针对的场景不同。

用具体变化理解约束

水平约束	父层变宽后	适用例子
Left	保持左侧距离	左上角装饰标记
Right	保持右侧距离	右上角小徽章
Left and right	保持两侧距离，宽度可变	普通 Frame 中的横向底板
Center	保持相对中心偏移	居中的背景星球
Scale	按比例改变位置和尺寸	希望整体缩放的特定图形

垂直方向同理。Scale 并不保证文字可读，也不会替你处理安全区；不要把整个手机界面都设为 Scale 来完成适配。

什么时候脱离自动布局

当前界面中常见名称是 Ignore auto layout，旧教程也叫 Absolute position。它让对象脱离自动排布，但仍保留在同一父容器中，可以按约束定位。

适合的例子：卡牌右上角的成功标记、背景星点、面板外缘的小装饰。不适合的例子：为了把十二张卡牌摆齐，把每张牌全部设为绝对定位。

徽章练习

创建一个卡牌 Frame，右上角放一个状态标记。把标记设为脱离布局，水平 Right、垂直 Top。改变卡牌宽度，观察标记是否保持到右边缘的距离。

随后把同一个标记放回布局流。观察它开始占据空间，卡面内容可能被推开。这说明“视觉位置类似”不代表两种结构可以互换。

与 AI 沟通时说明职责

成功徽章应叠在卡牌右上角，不参与 Artwork/Label 的纵向排布。
请检查其父层，使用 Ignore auto layout，并保持距右、上边缘各 8。
卡牌内容本身继续使用自动布局。
修改卡牌宽度后验证徽章位置，不能用页面绝对坐标固定它。

排错顺序

对象跑偏时先看父节点是谁，再看它是否在自动布局流中，最后才看约束值。若父层错误，即使约束设置正确，也会跟随错误的边界变化。

练习与检查

让 AI 解释棋盘为什么适合自动布局、徽章为什么可以脱离流。要求提供各自的变化场景，而不是只给出术语。

依据：Constraints、Auto Layout。核查：2026-10-31。