Godot UI System
Overview
Godot 的 UI 系统建立在其独特的节点/场景架构上。所有 UI 元素都是 Control 节点或其子类,通过各种 Container 类型自动布局,通过 Theme 资源统一管理视觉风格。
Core Concepts
Control Nodes
所有 UI 元素的基类是 Control。常见子类:
Button— 按钮Label— 文本标签LineEdit/TextEdit— 单行/多行文本输入ProgressBar— 进度条TextureRect— 图片显示ScrollContainer— 滚动容器TabContainer— 选项卡Popup/Window— 弹窗
Layout System
Anchor 系统
设置控件的四个边相对于父节点的锚点位置,适合响应式布局。
Container 系统
自动排列子节点的特殊 Control:
VBoxContainer— 垂直排列HBoxContainer— 水平排列GridContainer— 网格MarginContainer— 边距PanelContainer— 面板背景CenterContainer— 居中AspectRatioContainer— 保持比例
Size Flags
- Expand — 扩展占满可用空间
- Shrink Center — 紧凑居中
- Fill — 填充
- 组合实现复杂布局
Theme 系统
Theme资源管理全局视觉风格- 支持“类型”+ “名称”双维度定义
- 可继承和覆盖
- 包含 Font, StyleBox, Color, Constant, Icon, Base Type 等
Signals 与事件
Control 节点发射大量信号用于 UI 交互:
pressed— 按钮被按下text_changed— 文本改变toggled— 复选框切换mouse_entered/mouse_exited— 鼠标悬停resized— 大小改变
Practical Tips
- 使用 Container 而不是固定位置 — 响应式布局必须靠 Container
- 分隔 UI 和逻辑 — 用 Scene 分离 UI 与游戏逻辑
- 深度优先的输入处理 — 使用
accept_event()阻止事件冒泡 - 多分辨率适配 — 使用 Project Settings 的 stretch 模式
Related
godot-4 — 引擎概述 gdscript-patterns — 信号模式在 UI 中的应用