如何运用Godot UI布局指南打造效果？

UI 布局主要依赖 Control 节点体系 + 容器（Container）+ 锚点（Anchor） 布局组件 Container（自动布局的关键） 容器 用途 HBoxContainer 横向排列 VBoxContainer 纵向排列 GridContainer 网格 MarginContainer 内边距 CenterContainer 居中 PanelContainer 带背景 ... 其它 Container 组件结合组件设置，控制设置的方位（上，下，左，右，居中），设置是收缩还是撑满容器。 锚点（Anchor）定位布局 在 Godot 中，非常核心的规则：“父节点的属性决定了子节点的行为。” 简单一句话总结：如果父节点是容器（Container），子节点的锚点（Anchors）就会失效。 可以使用进行定位布局，可直接使用锚点预设，也可以自定义： 在使用自定义时： Anchors Points（锚点）：百分比定位 锚点的值通常在 $0.0$ 到 $1.0$ 之间。它定义了节点四个边缘（左、上、右、下）相对于父级容器尺寸的比例。 0.0： 父级的最左侧或最顶端。 0.5： 父级的正中间。 1.0： 父级的最右侧或最底端。 Anchors Offsets（偏移）：像素微调 偏移量是基于锚点位置的像素加减。 如果 Anchor Left 是 $0.5$（中心），而 Offset Left 是 $20$： 那么该节点的左边界将位于：父容器中心点 + 20 像素的位置。 如果 Anchor Right 是 $1$（最右），而 Offset Right 是 $-50$： 那么该节点的右边界将位于：距离父容器最右侧缩进 50 像素的位置。 内容组件 基础 UI 内容控件 文本类 节点 说明 Label 显示静态文本 RichTextLabel 富文本（颜色、图片、BBCode） LineEdit 单行文本输入 TextEdit 多行文本输入 按钮类 节点 说明 Button 普通按钮 CheckBox 复选框 CheckButton 开关式按钮 OptionButton 下拉选择框 MenuButton 带弹出菜单的按钮 LinkButton 超链接样式按钮 图像 / 显示类 节点 说明 TextureRect 显示图片 NinePatchRect 九宫格拉伸背景 ColorRect 纯色矩形（遮罩、背景） VideoStreamPlayer 播放视频（UI 中可用） 进度 / 数值显示控件 常用于：血条、加载条、音量调节 节点 说明 ProgressBar 进度条 TextureProgressBar 自定义贴图进度条 SpinBox 数值输入（带加减） HSlider / VSlider 滑动条 HScrollBar / VScrollBar 滚动条 窗口 / 面板类 节点 说明 Panel 普通面板 Window 独立窗口（Godot 4 新强化） Popup 弹出窗口基类 PopupPanel 面板弹窗 AcceptDialog 确认弹窗 ConfirmationDialog 确认/取消弹窗 FileDialog 文件选择 ColorPicker / ColorPickerButton 颜色选择器 Panel = 有背景、有边框、可被 Theme 控制的 UI 容器/背景控件 常见用途：设置面板，弹窗底板，HUD 背景，卡片 Panel 会使用 Theme 中的 StyleBoxTexture 来绘制背景和边框： 背景色 / 背景贴图 边框宽度、颜色、圆角 可统一由 Theme 控制 不会自动排列子节点，不会处理间距、对齐 可在其内添加布局容器节点进行布局处理，或者使用PanelContainer 可以在统一在主题中设置新的Panel类型进行类样式设置，也可直接在面板中的“主题覆盖” 使用新的“StyleBoxTexture” 来设置“AtlasTexture”, 设置“AtlasTexture” 在 “Sub-Region”编辑子区域即可。