布局组件 Layout Group

🎯本节学习目标

• 理解布局组件作用
• 掌握三种布局器
• 掌握 Content Size Fitter

🚀课程导读

“一堆按钮自动排整齐”“格子自动对齐”——布局组件自动排列子物体，加项不用手动摆。

◆布局器类型

按排列方式选。

1. 【Vertical Layout Group 垂直】子物体竖直排列（纵向列表、菜单）。
2. 【Horizontal Layout Group 水平】子物体横向排列（一排按钮、导航栏）。
3. 【Grid Layout Group 网格】子物体按网格排（物品栏、地图格子）。
4. 【添加】给“容器对象”（如 Content、Panel）添加对应 Layout Group 组件。
5. 【属性】
6. Padding：内边距（四方向）。
7. Spacing：子项间距。
8. Child Alignment：子项整体对齐（左上、居中…）。
9. Child Force Expand / Control Size：是否强制子项撑满/控制大小。
10. 【效果】子物体自动排列、间距一致、增删自动重排。
11. 【注意】Layout Group 会覆盖子物体的位置（手动拖的位置无效）。

◆Content Size Fitter

让容器“跟着内容变大”。

1. 【问题】Content 里子项多了，容器高度不自动变大，滚动失效。
2. 【解决】给 Content 加【Content Size Fitter】组件。
3. 【属性】Horizontal Fit / Vertical Fit：
4. Unconstrained：不限制；Preferred Size：按子项期望大小撑开。
5. 通常 Vertical Fit 设 Preferred Size 让高度随内容增长。
6. 【组合】Layout Group（排子项）+ Content Size Fitter（撑容器）= 动态列表核心。
7. 【布局刷新】内容动态增删后，布局可能需要重建：LayoutRebuilder.ForceRebuildLayoutImmediate(rectTransform)（进阶）。
8. 【元素本身】子项也可以有自己的布局（嵌套布局）。
9. 【实战】把第 155 课的物品列表加上 Grid Layout Group（3 列网格），自动排列物品。
10. 【注意】Layout 与手动 RectTransform 定位冲突时，以布局为准。

⚠常见错误与排查

★动手练习

✓本节小结

布局组件已掌握。下一课学锚点与 RectTransform。