UI 布局阶段核心目标回顾（落地挂机游戏）
-
搭建双窗口：「挂机游戏主面板」（核心功能，保留原有数值 / 按钮 / 进度条）+「游戏设置面板」（新增，调整挂机参数、UI 样式）；
-
掌握分组布局：用分组、折叠面板分隔不同功能区域，避免 UI 拥挤；
-
掌握行列布局：用多列排版让数值和组件对齐，提升美观度；
-
调整 UI 位置与样式：固定 / 调整窗口大小、位置，优化组件间距，适配游戏界面。
步骤 1：先准备布局所需的辅助全局变量
在 main.cpp 的全局变量区域，新增 2 个辅助变量，用于控制设置面板显示和挂机速度（后续设置面板会用到）：
点击查看代码
// 原有挂机游戏核心全局变量
float g_gold = 0.0f;
int g_level = 1;
float g_gold_per_second = 1.0f;
float g_afk_progress = 0.0f;
const float g_progress_max = 1.0f;// 新增：UI布局与设置面板辅助变量
bool g_show_settings_window = true; // 控制设置面板是否显示（默认显示）
float g_afk_speed_multiplier = 1.0f; // 挂机速度倍数（1.0f=正常速度，>1=加速，<1=减速）
步骤 2：搭建双窗口 —— 核心主面板 + 新增设置面板
ImGUI 的窗口核心是 ImGui::Begin()和ImGui::End()，每个窗口对应一组独立的Begin/End，通过唯一窗口名称区分，还可以控制窗口的可关闭、可拖动、可缩放等属性。
2.1 优化原有「挂机主面板」（保留功能，新增布局优化）
先保留原有核心功能，添加窗口属性配置，让主面板更规整（替换原有主面板代码）：
点击查看代码
// 3. 绘制ImGUI UI（核心：双窗口布局 + 布局优化）
// ========== 窗口1：挂机游戏主面板（核心功能） ==========
// ImGui::Begin参数2：窗口关闭回调（这里设为nullptr，不可关闭，仅可拖动/缩放）
// 额外配置：窗口大小限制（最小宽高），避免缩放过小导致UI错乱
ImGui::SetNextWindowSizeConstraints(ImVec2(400, 300), ImVec2(1000, 800)); // 最小400x300，最大1000x800
ImGui::Begin("挂机游戏主面板", nullptr, ImGuiWindowFlags_NoCollapse); // 禁止折叠窗口，更贴合游戏面板// 原有核心功能（Text + Button + ProgressBar）保留，后续步骤再优化排版
ImGui::Text("当前金币：%.2f", g_gold);
ImGui::Text("当前等级：%d", g_level);
ImGui::Text("每秒收益：%.2f 金币/秒（加速x%.1f）", g_gold_per_second, g_afk_speed_multiplier);ImGui::Spacing();
ImGui::Separator();
ImGui::Spacing();if (ImGui::Button("收取金币", ImVec2(120, 40))) { // 自定义按钮大小（宽120，高40）g_gold += 10 * g_gold_per_second;g_afk_progress = 0.0f;
}ImGui::SameLine();
if (ImGui::Button("升级建筑（消耗100金币）", ImVec2(180, 40))) {if (g_gold >= 100.0f) {g_level += 1;g_gold_per_second += 0.5f;g_gold -= 100.0f;}
}ImGui::Spacing();
ImGui::Separator();
ImGui::Spacing();// 升级：挂机进度条速度受倍数控制（乘以g_afk_speed_multiplier）
g_afk_progress += 0.001f * g_afk_speed_multiplier;
if (g_afk_progress > g_progress_max) {g_afk_progress = g_progress_max;g_gold += g_gold_per_second;g_afk_progress = 0.0f;
}ImGui::Text("挂机自动收益进度：");
ImGui::ProgressBar(g_afk_progress / g_progress_max, ImVec2(0.0f, 20.0f)); // 自定义进度条高度（20）
ImGui::SameLine();
ImGui::Text("%.0f%%", g_afk_progress * 100);ImGui::End(); // 结束主面板窗口绘制
2.2 新增「游戏设置面板」（控制挂机速度、UI 样式）
在主面板ImGui::End()之后，添加第二个窗口的Begin/End，实现设置功能：
点击查看代码
// ========== 窗口2：游戏设置面板（新增，可关闭/显示） ==========
// ImGui::Begin参数2：传入bool变量地址，点击窗口关闭按钮时自动设为false
ImGui::SetNextWindowPos(ImVec2(450, 20), ImGuiCond_FirstUseEver); // 首次打开时固定位置（450,20），后续可拖动
ImGui::SetNextWindowSize(ImVec2(300, 250), ImGuiCond_FirstUseEver); // 首次打开时固定大小（300,250）
if (ImGui::Begin("游戏设置面板", &g_show_settings_window)) {// 功能1：调整挂机速度倍数（用ImGui::SliderFloat实现滑动条）ImGui::Text("挂机速度倍数");// 滑动条：最小值0.5，最大值5.0，当前值g_afk_speed_multiplier，保留1位小数ImGui::SliderFloat("##speed", &g_afk_speed_multiplier, 0.5f, 5.0f, "x%.1f");ImGui::Spacing();// 功能2：切换ImGui UI样式（亮色/暗色）ImGui::Separator();ImGui::Text("UI样式选择");if (ImGui::Button("暗色样式（默认）", ImVec2(140, 30))) {ImGui::StyleColorsDark();}ImGui::SameLine();if (ImGui::Button("亮色样式", ImVec2(140, 30))) {ImGui::StyleColorsLight();}ImGui::Spacing();// 功能3：重置设置（恢复默认值）ImGui::Separator();if (ImGui::Button("恢复默认设置", ImVec2(-1, 30))) { // 宽度-1：自动填充窗口宽度g_afk_speed_multiplier = 1.0f;ImGui::StyleColorsDark();}
}
ImGui::End(); // 结束设置面板窗口绘制
双窗口关键说明
-
窗口唯一性：两个窗口的
ImGui::Begin文本（"挂机游戏主面板"、"游戏设置面板"）必须不同，否则会重叠覆盖； -
窗口可关闭：设置面板的
Begin第二个参数传入&g_show_settings_window，点击窗口右上角 ×，该变量会变为false，窗口隐藏；若想重新显示，可在主面板添加一个 “打开设置面板” 按钮，点击时将g_show_settings_window设为true； -
窗口位置 / 大小固定：
ImGui::SetNextWindowPos/Size配合ImGuiCond_FirstUseEver，仅在首次打开窗口时生效，后续用户可自由拖动 / 缩放，兼顾灵活性和首次体验；
组件自定义大小：ImVec2(width, height)用于设置按钮、进度条的尺寸，width=-1时自动填充当前窗口宽度，适配性更好。
步骤 3：掌握分组布局 —— 用分组 / 折叠面板规整 UI
当 UI 组件较多时，用ImGui::BeginGroup()/EndGroup()（普通分组）或ImGui::CollapsingHeader()（可折叠分组）分隔功能区域，避免混乱，这里优化主面板的数值展示区域为折叠分组：
优化主面板数值展示（添加折叠分组）
替换主面板中的 \(3\) 行ImGui::Text，改为折叠分组：
点击查看代码
// 原有主面板中，替换数值展示的3行Text
// 可折叠分组：默认展开（ImGuiTreeNodeFlags_DefaultOpen）
if (ImGui::CollapsingHeader("游戏核心数值", ImGuiTreeNodeFlags_DefaultOpen)) {ImGui::BeginGroup(); // 普通分组，规整内部组件ImGui::Text("当前金币：%.2f", g_gold);ImGui::Text("当前等级：%d", g_level);ImGui::Text("每秒收益：%.2f 金币/秒（加速x%.1f）", g_gold_per_second, g_afk_speed_multiplier);ImGui::EndGroup(); // 结束普通分组
}
分组布局关键说明
-
ImGui::CollapsingHeader()：点击分组标题可展开 / 折叠，适合存放非核心、可隐藏的内容，ImGuiTreeNodeFlags_DefaultOpen表示默认展开； -
ImGui::BeginGroup()/EndGroup()：将一组组件视为一个整体，方便后续统一调整位置、添加间距，不影响其他组件； -
分组嵌套：折叠分组内部可以嵌套普通分组，普通分组内部也可以嵌套组件，灵活适配复杂 UI。
步骤 4：掌握行列布局 —— 用ImGui::Columns实现多列对齐
ImGui::Columns(n, ...)可以将当前窗口分为 \(n\) 列，让组件按列排版，解决 “文本左对齐、数值右对齐” 的需求，这里优化主面板的折叠分组为两列布局：
优化折叠分组为两列布局
替换折叠分组内部的代码：
点击查看代码
if (ImGui::CollapsingHeader("游戏核心数值", ImGuiTreeNodeFlags_DefaultOpen)) {// 行列布局：分为2列，列宽比例1:1，添加列分隔线ImGui::Columns(2, "gold_info_columns", true);// 第一列：标签文本（右对齐，更美观）ImGui::TextAlign(ImVec2(1.0f, 0.0f)); // 文本右对齐（x=1.0f，y=0.0f）ImGui::Text("当前金币：");ImGui::Text("当前等级：");ImGui::Text("每秒收益：");// 切换到第二列ImGui::NextColumn();// 第二列：数值文本（左对齐）ImGui::TextAlign(ImVec2(0.0f, 0.0f)); // 文本左对齐（默认）ImGui::Text("%.2f", g_gold);ImGui::Text("%d", g_level);ImGui::Text("%.2f 金币/秒（加速x%.1f）", g_gold_per_second, g_afk_speed_multiplier);// 结束行列布局，恢复单列ImGui::Columns(1);
}
行列布局关键说明
-
ImGui::Columns(2, "gold_info_columns", true)：参数 1 = 列数，参数 2 = 列唯一标识，参数 3 = 是否显示列分隔线； -
ImGui::NextColumn()：切换到下一列，必须手动调用，否则组件会继续在当前列排列； -
ImGui::TextAlign(ImVec2(x, y))：设置文本对齐方式，x=1.0f右对齐，x=0.0f左对齐，y=0.5f垂直居中，适配多列排版的视觉需求； -
结束行列布局：必须调用
ImGui::Columns(1)，恢复单列排版，否则后续组件会继续按多列排列。
步骤 5：编译运行验证布局效果
核心验证点
-
运行程序后，出现两个窗口：「挂机游戏主面板」（不可折叠、可缩放）+「游戏设置面板」（可关闭、首次固定位置）；
-
主面板中，核心数值在折叠分组内，两列对齐，排版整齐，按钮和进度条尺寸规整；
-
设置面板中，滑动条可调整挂机速度，进度条填充速度随之变化，样式切换按钮生效；
-
窗口可自由拖动、缩放（主面板有最小尺寸限制），关闭设置面板后，可通过新增按钮重新打开（可选扩展）；
-
所有原有功能（收取金币、升级建筑、自动挂机）正常生效，布局优化不影响核心逻辑。
可选扩展：添加 “打开设置面板” 按钮（主面板中）
若设置面板被关闭，可在主面板添加按钮重新打开，代码如下（添加到主面板的按钮区域）：
点击查看代码
// 主面板中，升级建筑按钮下方添加
ImGui::Spacing();
if (ImGui::Button("打开设置面板", ImVec2(120, 30))) {g_show_settings_window = true; // 设为true，显示设置面板
}
UI 布局阶段总结
核心是掌握「窗口（Begin/End）」 「分组（Group/CollapsingHeader）」 「行列（Columns）」三大布局工具；
双窗口实现的关键是唯一窗口名称和窗口属性配置，兼顾灵活性和用户体验；
布局优化的核心是 “规整、分层”，让不同功能的 UI 组件分隔清晰，提升游戏界面的美观度；
这个阶段完成后，你的挂机游戏已经具备了完整的 UI 结构，下一阶段就是「逻辑联动」，实现更流畅的实时刷新和复杂逻辑绑定。
恭喜你顺利推进到 UI 布局阶段，运行成功后，就可以为进入「逻辑联动」阶段做准备啦！
