Fixed、Hug 与 Fill 的尺寸契约

Fixed、Hug 和 Fill 回答的是“这个轴的尺寸由谁决定”。宽和高独立设置，因此一个按钮完全可以宽 Fill、高 Hug。

三种尺寸来源

模式	尺寸来源	星际翻牌中的例子
Fixed	明确的数字	教学基准屏幕、固定卡牌比例的初始样例
Hug contents	内容尺寸 + padding + gap	文案徽章、内容型提示面板
Fill container	Auto Layout 父容器分配的可用空间	面板内主按钮、屏幕中的棋盘区域

顶层屏幕没有提供空间的 Auto Layout 父层，因此不能直接把“屏幕宽 Fill”当适配方案。顶层通常用不同宽度的测试 Frame；内部再使用有意义的布局规则。

避免尺寸循环

父容器宽 Hug、唯一子项宽 Fill，会出现“父等子、子等父”的循环。Figma 可能自动调整模式来解决。看到模式变化时，先查依赖关系。

可工作的搭配是：父面板宽 Fixed 或 Fill，按钮宽 Fill，按钮内文字宽 Hug；父面板高度 Hug，按钮高度 Hug，文字按内容或可换行高度增长。

一道可计算的棋盘题

基准屏幕宽 390，左右边距各 24，棋盘可用宽度为 342。三列卡牌各 98，列间距 12，两侧剩余留白各 12：

390 - 24×2 = 342
98×3 + 12×2 = 318
(342 - 318) / 2 = 12

这是当前教学样例的布局选择。若缩窄到 360，内宽只剩 312，固定 98 的三列加间距将需要 318，必须选择卡牌缩小、间距改变或重新设计布局规则。单纯声明 Auto Layout 不会自动替你做产品决定。

长文案的尺寸策略

先确定文案是否允许换行。固定高度按钮配多行文本可能裁切；无限 Hug 又可能让页面过高。用最小高度、允许的行数、截断规则和完整说明入口共同约束。游戏主操作文案应尽量简短，但仍需测试本地化和异常文字。

请检查主按钮的尺寸依赖。宽度由面板提供，高度最小 56。
普通文案单行；测试“继续第 12 关”和更长异常文案。
若需要换行，请报告高度增长对下方区域的影响。
不要通过水平缩放文字来塞进固定宽度。

练习与检查

分别改变父面板宽度和文字内容，记录按钮宽高的变化。你应能预测结果，而不只是记住三个下拉菜单选项。

依据：Auto Layout 尺寸规则。核查：2026-10-31。