第 36 课 · 面板与布局实战

⏱ 预计时长 35 分钟📊 难度入门📚 模块 第 4 部分 · UI 界面 · 动画 · 特效

🎯 本课学习目标

掌握 Panel/PanelContainer 面板
用布局容器搭出完整设置界面
掌握 MarginContainer 留边技巧

本课综合运用容器与面板，搭一个像样的「设置界面」。

📖 详细教学步骤

Panel 与 PanelContainer 区别概念

Panel：纯背景面板，子控件需手动布局
PanelContainer：面板 + 自动布局容器二合一，子控件自动排列并自带边距

💡 推荐用 PanelContainer 做「带背景的区块」。

搭建设置界面骨架搭建

结构规划：

CanvasLayer
└── CenterContainer (全屏)
    └── PanelContainer (背景框)
        └── MarginContainer (内边距)
            └── VBoxContainer
                ├── Label 「设置」
                ├── HBoxContainer: 音量 + HSlider
                ├── HBoxContainer: 音效 + HSlider
                ├── CheckBox 「全屏」
                └── Button 「保存」

逐层搭建（实操）实操

CanvasLayer → CenterContainer（全矩形锚点）
CenterContainer 下加 PanelContainer
PanelContainer 下加 MarginContainer，Theme Overrides → Constants → Margin 设 30（四周留边）
MarginContainer 下加 VBoxContainer，Separation 设 14
依次加 Label/HBox/HSlider/CheckBox/Button

面板背景美化美化

给 PanelContainer 加圆角半透明背景：

选中 PanelContainer → Theme Overrides → Styles → Panel
新建 StyleBoxFlat
设 Background Color 半透明深色（如 0,10,30,200）
Corner Radius 圆角（如 12）、Border 边框

处理设置逻辑代码

把设置值存起来（第 65 课会做真正的持久化）：

GDSCRIPTextends CanvasLayer

var settings = {"volume": 0.8, "sfx": 0.8, "fullscreen": false}

func _on_save_pressed():
    print("保存设置:", settings)
    # 应用全屏
    if settings["fullscreen"]:
        DisplayServer.window_set_mode(DisplayServer.WINDOW_MODE_FULLSCREEN)
    else:
        DisplayServer.window_set_mode(DisplayServer.WINDOW_MODE_WINDOWED)

显示/隐藏设置面板实操

游戏里按 Esc 或点设置按钮切换：

GDSCRIPTfunc _on_settings_pressed():
    settings_panel.visible = not settings_panel.visible

⚠️

面板内容挤到边缘？

用 MarginContainer 设边距，别只靠容器 Separation。

⚠️

面板没有背景色？

PanelContainer 默认背景透明。给它 Theme Overrides → Styles → Panel 设置 StyleBoxFlat 背景。

🧪 动手试一试

🏋️ 课后练习

完成上图设置界面：音量/音效两个滑块、全屏复选框、保存按钮，保存时打印设置内容。

滑块 value_changed 存进 settings 字典，保存按钮读取打印。

💡

CenterContainer 适合做「居中弹窗」，任意分辨率都居中。

💡

StyleBoxFlat 是美化 UI 的万能工具：背景+圆角+边框+阴影。

🎓 本课小结

PanelContainer = 背景+布局二合一；MarginContainer 留边、VBox/HBox 排列；StyleBoxFlat 美化面板；设置面板整体控制显示隐藏。