首先集成Dear ImGui源码并选择对应图形API的绑定文件,接着初始化上下文与后端,然后在主循环中调用NewFrame和Render绘制UI,通过Begin/End定义窗口,使用内置控件创建交互元素,最终实现轻量级即时模式界面。

Dear ImGui 是一个高效的立即模式图形用户界面库,特别适合用于游戏开发、工具调试和实时控制面板等场景。它不依赖复杂的窗口系统,而是与你的渲染后端(如 OpenGL、DirectX)集成,让你能快速构建轻量级 UI。以下是 C++ 中使用 Dear ImGui 创建 GUI 的基本流程和关键要点。
集成 Dear ImGui 到 C++ 项目
要使用 Dear ImGui,需先将其源码集成到项目中:
- 从 GitHub 仓库 下载 ImGui 源码
- 将核心文件(imgui.cpp、imgui.h、imgui_draw.cpp、imgui_widgets.cpp 等)加入编译
- 根据你使用的图形 API,选择并集成对应的绑定文件,例如:
- OpenGL: 使用 examples/imgui_impl_opengl3.* 和 imgui_impl_glfw.*(若用 GLFW)
- DirectX: 使用 imgui_impl_dx11.* 等
- 确保已正确链接 OpenGL、GLFW 或 DirectX 相关库
初始化 ImGui 上下文与后端
在主程序启动图形上下文后,初始化 ImGui:
// 初始化示例(基于 GLFW + OpenGL3)IMGUI_CHECKVERSION();
ImGui::CreateContext();
ImGuiIO& io = ImGui::GetIO(); (void)io;
ImGui::StyleColorsDark();
ImGui_ImplGlfw_InitForOpenGL(window, true);
ImGui_ImplOpenGL3_Init("#version 130");
这一步创建了 ImGui 的上下文,并连接输入系统(键盘、鼠标)和渲染后端。
立即学习“C++免费学习笔记(深入)”;
在主循环中使用 ImGui 构建界面
在每一帧的渲染循环中插入 ImGui 的调用:
ImGui_ImplOpenGL3_NewFrame();ImGui_ImplGlfw_NewFrame();
ImGui::NewFrame();
// 创建窗口和控件
ImGui::Begin("调试面板");
ImGui::Text("当前帧率: %.1f FPS", io.Framerate);
ImGui::SliderFloat("亮度", &brightness, 0.0f, 1.0f);
ImGui::ColorEdit3("颜色", (float*)&color);
if (ImGui::Button("重置")) { /* 处理逻辑 */ }
ImGui::End();
ImGui::Render();
ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());
所有 UI 元素都写在 ImGui::Begin() 和 ImGui::End() 之间。控件状态直接与变量绑定,无需事件回调。
常用控件与布局技巧
ImGui 提供丰富的内置控件:
- 文本显示: ImGui::Text(), ImGui::LabelText()
- 按钮: ImGui::Button(), ImGui::SmallButton()
- 输入框: ImGui::InputFloat(), ImGui::InputInt(), ImGui::InputText()
- 滑块: ImGui::SliderFloat(), ImGui::SliderInt()
- 复选框: ImGui::Checkbox()
- 下拉菜单: ImGui::Combo()
使用 ImGui::SameLine() 让元素同行排列,ImGui::Spacing() 添加空白,ImGui::Separator() 插入分隔线,可实现简单布局。
基本上就这些。只要图形环境搭建好,UI 编写非常直观。注意每次帧开始调用 NewFrame(),结束时渲染 DrawData。调试工具、参数调节器这类需求,用 ImGui 几乎零成本就能实现。










