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”编辑子区域即可。
关于Panel的大小，Panel 只有在“有尺寸（rect）”时才会绘制背景，Panel 不会自己产生尺寸，所以就只有两条路：
1️⃣ 被父容器撑开（推荐）
2️⃣ 你手动给它一个大小
列表 / 数据展示类

节点说明ItemList简单列表Tree树形结构TabBar标签栏OptionButton轻量下拉列表交互 & 辅助控件

节点说明TooltipLabel提示信息TextureButton使用贴图的按钮TouchScreenButton触屏按钮Control所有 UI 的基类CanvasLayerUI 层级管理（HUD 常用）容器大小

Godot 的 UI（Control / Container）容器的大小一般来说只可能来自这三种来源之一：
1️⃣ 父节点给它分配的空间（最常见）
2️⃣ 自身的 anchors / offsets（手动或预设）
3️⃣ Container 根据规则“计算并分配”子节点大小（反向是少数特例）
<blockquote>在 Godot UI 中：


来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

感谢分享，学习下。