HOME / 第 4 部分 · UI 界面 · 动画 · 特效 / 第 32 课
MODULE 4 · UI 界面 · 动画 · 特效
第 32 课 · Control 节点与布局容器
🎯 本课学习目标
- 掌握 Control 控件的通用属性
- 理解容器（Container）自动布局
- 用 VBox/HBox 排列多个控件
本课深入 Control 的通用属性，并学会用容器自动排版多个 UI 控件。
📖 详细教学步骤
Control 通用属性概念
| 属性 | 作用 |
|---|---|
| Position | 位置（相对父控件） |
| Size | 尺寸（宽高） |
| Visible | 是否显示 |
| Modulate | 调色/透明度 |
| Tooltip Text | 鼠标悬停提示 |
| Mouse Filter | 鼠标事件处理方式 |
容器：自动排列的爸爸概念
容器（Container）会自动排列子控件，你不需要手摆位置：
VBoxContainer：子控件竖排HBoxContainer：子控件横排GridContainer：子控件网格排MarginContainer：子控件四周留边CenterContainer：子控件居中
实操：竖排三个按钮实操
- 新建 UI 场景（CanvasLayer 根）
- 加
CenterContainer作为全屏铺满（布局：全矩形） - 在 CenterContainer 下加
VBoxContainer - 在 VBoxContainer 下加 3 个 Button：开始 / 设置 / 退出
- 三个按钮自动竖直排列并居中
💡 容器会自动接管子控件的布局，你只管添加子控件。
容器与间隔实操
- 容器内加
HSeparator / VSeparator分割线 - 用
Control占位节点撑出空隙 - 调整容器 Theme Overrides → Constants → Separation 控制间距
嵌套容器进阶
容器可以嵌套，做出复杂布局：
CenterContainer（居中）
└── VBoxContainer（竖排）
├── TitleLabel
├── HBoxContainer（横排）
│ ├── Button 开始
│ └── Button 退出
└── Label 版本号⚠️
容器里的控件位置拖不动？
正常！容器接管了布局，手动拖动会被覆盖。想手动布局就别用容器，或调整容器属性。
⚠️
容器里的控件挤在一起？
设置容器的 Separation（间距）常量，或加占位 Control。
🧪 动手试一试
🏋️ 课后练习
用 CenterContainer + VBoxContainer 做一个居中的主菜单：标题 + 开始/设置/退出 三按钮，按钮间有间距。
VBoxContainer 的 Theme Overrides → Constants → Separation 设 16。
💡
容器 + 锚点 = 自适应界面的黄金组合，所有分辨率都整齐。
💡
调整容器属性用 Theme Overrides 里的 Constants。
🎓 本课小结
Control 是所有 UI 的基类；容器自动布局子控件（VBox 竖排、HBox 横排、Center 居中、Margin 留边），嵌套容器做出复杂界面。