UI 布局：从 CSS 习惯切换到节点装配
小游戏的 UI 同样要解决对齐、间距、滚动和遮挡，但不会自动按浏览器文档流排版。先建立节点尺寸与父子关系，再选择合适的布局组件。
五种常用零件
| 零件 | 主要职责 | 适合的场景 |
|---|---|---|
| UITransform | 内容尺寸、锚点和 UI 空间变换 | 确定按钮点击区域 |
| Widget | 与父级或目标边缘对齐 | 顶部 HUD、底部操作区 |
| Layout | 按横向、纵向或网格排列子节点 | 背包格子、商店条目 |
| ScrollView | 管理滚动视口与内容 | 较长的任务列表 |
| Mask | 限制可见区域 | 滚动列表裁剪、头像边界 |
这些不是 CSS Flex/Grid 的完整替代品。不要期待任意 CSS 属性都有一一对应项。
做一个 HUD 的步骤
- 在 Canvas 下建
HUD，设置合适的 UITransform。 - 给 HUD 添加 Widget，与顶部安全区域对齐，留出边距。
- 让积分、时间分别落在左右区域；文字长度变化时仍保留空间。
- 将结果弹窗放在独立
ResultLayer，检查显示顺序与输入拦截。 - 用最长的中文文案、三位以上分数和窄屏测试布局。
UI 层级顺序常受父子关系和 sibling 顺序影响。Creator 3.x 不应混用 2.x 教程中的 zIndex 方案；先查升级说明。
列表会遇到的规模问题
十个背包格子可以直接实例化。几千条数据全部创建节点、文字和图片，内存与布局计算可能明显增长。ScrollView 本身不等于已经完成列表虚拟化；应先测量，再决定是否复用可见条目。
数据列表与可见节点应分开理解：关掉某个格子的节点，不等于从背包数据中删除物品；销毁节点也不应该误删服务端资产。
给 AI 一份具体规格
做一个 4 列背包网格，最多显示 40 个物品。
每格有图标、数量、选中边框；长按/拖动暂不做。
空背包显示说明，图片失败显示占位，弹窗打开时阻止背景点击。
请列节点树、Layout/ScrollView/Mask 配置和数据刷新入口。
验收：最长物品名不挡住数量，窄屏不溢出，重复打开不重复生成格子。
排错时先临时去掉复杂布局，确认一个格子的尺寸和锚点，再恢复排列与滚动。不要同时改父节点缩放、子节点尺寸和字体大小。