🧱 常见布局组件汇总
| 组件名称 | 功能作用 | 常见使用场景 |
|---|---|---|
RectTransform | 控制 UI 的位置、大小、锚点、对齐 | 所有 UI 元素都依赖它 |
Canvas | UI 的根节点，所有 UI 元素必须在其下才能被渲染 | 每个 UI 场景或界面都有一个 |
CanvasScaler | 控制 UI 在不同分辨率下的缩放行为 | UI 适配关键组件 |
HorizontalLayoutGroup | 子元素水平排列 | 顶部导航栏、按钮组 |
VerticalLayoutGrou | 子元素垂直排列 | 聊天列表、排行榜、设置面板 |
GridLayoutGroup | 子元素网格排列 | 关卡选择界面、背包、九宫格面板 |
ContentSizeFitter | 自动调整父物体尺寸以包裹所有子元素 | 动态聊天框、评论列表 |
LayoutElement | 控制单个子元素的宽高、最小/最大尺寸 | 精细控制每个元素的尺寸 |
ScrollRect | 实现可滚动区域，配合上面布局组件使用 | 聊天、邮件、关卡、背包等需要滚动的面板 |
🔹 RectTransform 属性
所有 UI 元素都会自动使用 RectTransform 替代普通的 Transform。以下是它的常用属性：
| 属性名 | 说明 |
|---|---|
Anchor（锚点） | 控制元素的对齐方式和缩放行为（左上、右下、中间等） |
Pivot（中心点） | 控制旋转、缩放的参考点 |
Position（位置） | UI 元素的局部位置（相对于父物体） |
Width / Height | UI 元素的尺寸 |
Left/Right/Top/Bottom | 设置锚点为 Stretch 时生效，定义边距 |
🔹 CanvasScaler 属性（适配关键）
| 属性 | 说明 |
|---|---|
UI Scale Mode | 控制 UI 如何缩放（常选 "Scale With Screen Size"） |
Reference Resolution | 设计时参考的分辨率（如 1920×1080） |
Screen Match Mode | 匹配方式（Match Width Or Height 是最常用的） |
Match | 匹配权重，0=宽度优先，1=高度优先 |
🔹 Horizontal / Vertical Layout Group
| 属性名 | 说明 |
|---|---|
Child Alignment | 子物体的对齐方式（居中、靠左、靠右等） |
Spacing | 子物体之间的间距 |
Padding（上/下/左/右 | 内边距 |
Child Force Expand | 是否强制子物体拉伸宽度/高度 |
Child Control Size | 是否让子物体根据内容自动调整尺寸 |
🔹 GridLayoutGroup（网格布局）
| 属性 | 说明 |
|---|---|
Cell Size | 每个格子的尺寸 |
Spacing | 每个格子之间的间距 |
Start Corner | 从哪个角开始填充（左上、右上等） |
Start Axis | 先填行还是先填列 |
Constraint | 限制方式（固定列数、固定行数、无约束） |
🔹 ContentSizeFitter（动态尺寸）
| 属性 | 说明 |
|---|---|
Horizontal Fit | 适配宽度（Unconstrained、MinSize、PreferredSize） |
Vertical Fi | 适配高度（常用于聊天框自动扩展） |
⚠️ 和 LayoutGroup 冲突时慎用，建议只加在最外层或使用 LayoutElement 控制内部元素
🔹 LayoutElement（单个元素精细控制）
| 属性名 | 说明 |
|---|---|
Preferred Width / Height | 首选尺寸（会被 LayoutGroup 使用） |
Min Width / Height | 最小尺寸 |
Flexible Width / Height | 灵活扩展（占比计算中使用） |
Ignore Layout | 忽略该元素，不受 LayoutGroup 控制 |
🔹 ScrollRect（滚动区域）
| 属性名 | 说明 |
|---|---|
Content | 要滚动的内容区域（通常是一个 VerticalLayoutGroup） |
Viewport | 可见区域（带有 Mask） |
Scrollbar | 绑定滚动条（可选） |
Movement Type | 滚动方式（Elastic 弹性 / Clamped 限制） |
🧩 推荐组合模板
| 目的 | 建议结构 |
|---|---|
聊天 / 邮件 / 评论 | ScrollRect + VerticalLayoutGroup + ContentSizeFitter |
商店/背包网格 | ScrollRect + GridLayoutGroup |
按钮横向组 | HorizontalLayoutGroup + 若干 Button + LayoutElement 可选 |
🎯 实用技巧
- LayoutGroup + ContentSizeFitter 一起使用时要小心递归冲突。
- ScrollView 中 Content 必须有一个布局组件（如 VerticalLayoutGroup）才能动态适配。
- ontentSizeFitter 放在最外层容器上更稳定。
- LayoutElement 用于指定个别元素尺寸或跳过布局管理。
