Godot UI布局指南

布局组件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富文本颜色、图片、BBCodeLineEdit单行文本输入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 的 UIControl / Container容器的大小一般来说只可能来自这三种来源之一1️⃣父节点给它分配的空间最常见2️⃣自身的 anchors / offsets手动或预设3️⃣Container 根据规则“计算并分配”子节点大小反向是少数特例在 Godot UI 中父 → 子可以控制大小子 → 父几乎不影响大小这是和 WebHTML思维完全不同的地方。容器分情况size (0, 0)的容器普通Control包括 Panel若不设置大小则默认size (0, 0)不会因为子节点存在而变大不会继承父节点 size 结果Button 能显示它自己有 sizePanel 背景看不到size 为 0✅Control / Panel 必须被撑开或手动设大小ContainerVBox / HBox / Grid 等Container 的核心规则Container 自己的大小来自父节点Container 只负责给子节点分配大小唯一的“子 → 父”影响例外Minimum Size最小尺寸有些 Control 会提供最小尺寸建议Label文字尺寸Button文本 paddingTextureRect图片大小Panel只有在以下情况下才生效父节点是Container父节点在计算布局时参考min_size⚠️但依然不会反向改变父 Container 的 size编写主题与网页开发的 CSS 不同Godot 使用的是一套基于Theme主题和StyleBox样式盒的系统。可以使用以下三种主要方式来编写或配置样式1. 使用主题编辑器 (推荐方式)这是最常用且最高效的方法。通过创建一个Theme资源你可以全局性地定义按钮、标签等控件的外观。创建主题在文件系统中右键 - 新建资源 -Theme。编辑样式盒 (StyleBox)StyleBoxFlat用于创建纯色、圆角、边框和阴影的效果最常用。StyleBoxTexture使用图片作为背景支持九宫格拉伸类似 CSS 的border-image。类型变体 (Type Variations)如果你想让工具栏的某些按钮变红如“删除”按钮而其他按钮保持默认可以在主题中创建一个ToolButton的变体。设置基础类型后就可对默认的样进行编辑了。应用主题要使用特定类型的主题变体只需要在检查器主题中的“Type Variation”中进行设置gd 4.6之前要手动填写 4.6 有时能自动读取有时抽风读取不了创建的主题变体。2. 局部覆盖 (Theme Overrides)如果你只想修改某一个特定节点的样式而不想影响全局可以在该节点的“检查器 (Inspector)”面板中找到Theme Overrides。在这里你可以直接更改字体大小、颜色或替换它的StyleBox。注意过度使用局部覆盖会导致 UI 难以维护。建议尽量通过全局 Theme 处理。3. 使用 GDScript 代码编写样式如果你需要根据游戏逻辑动态改变样式可以使用代码。修改基本属性# 修改颜色 $Label.add_theme_color_override(font_color, Color.RED) # 修改字体大小 $Label.add_theme_font_size_override(font_size, 32)动态创建 StyleBox如果你想从头用代码写一个圆角矩形背景func _ready(): var style StyleBoxFlat.new() style.bg_color Color(0.2, 0.6, 1.0) # 天蓝色 style.set_corner_radius_all(10) # 设置圆角 style.border_width_left 2 # 设置边框 # 应用到按钮的 normal 状态 $Button.add_theme_stylebox_override(normal, style)