Dear ImGui 是一个流行的 C++ 即时模式 GUI（Immediate Mode GUI）库，广泛用于游戏开发工具、调试界面、编辑器和可视化工具。
本教程将带你从零开始学习：
- 什么是 ImGui
- 如何在项目中集成 ImGui
- 如何创建 UI 控件
- 窗口系统与布局
- 表格与菜单
- 完整示例代码
目录
1. 什么是 ImGui
Dear ImGui 是一个开源 GUI 库，主要用于开发者工具界面。
它的特点：
- 极简 API
- 无需复杂 UI 状态管理
- 高性能
- 适合实时工具
- 支持 OpenGL / Vulkan / DirectX
GitHub：
https://github.com/ocornut/imgui
2. 即时模式 GUI
ImGui 使用 Immediate Mode GUI 模型。
传统 GUI：
创建按钮
UI系统保存按钮
事件系统触发ImGui：
if (ImGui::Button("Save"))
{
SaveFile();
}特点：
- UI 每一帧重新生成
- 代码就是 UI
3. 下载与集成 ImGui
从 GitHub 下载 ImGui：
imgui/
├ imgui.cpp
├ imgui.h
├ imgui_draw.cpp
├ imgui_tables.cpp
├ imgui_widgets.cpp
├ imgui_demo.cpp同时添加后端：
backends/
├ imgui_impl_glfw.cpp
├ imgui_impl_opengl3.cpp将这些文件加入你的工程即可。
4. 初始化 ImGui
IMGUI_CHECKVERSION();
ImGui::CreateContext();
ImGuiIO& io = ImGui::GetIO();
ImGui::StyleColorsDark();
ImGui_ImplGlfw_InitForOpenGL(window, true);
ImGui_ImplOpenGL3_Init("#version 330");5. 每帧渲染流程
while (!glfwWindowShouldClose(window))
{
glfwPollEvents();
ImGui_ImplOpenGL3_NewFrame();
ImGui_ImplGlfw_NewFrame();
ImGui::NewFrame();
ImGui::Begin("Hello");
ImGui::Text("Hello World");
if (ImGui::Button("Click me"))
{
printf("Clicked");
}
ImGui::End();
ImGui::Render();
ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());
}6. 常用 UI 控件
文本
ImGui::Text("Hello ImGui");按钮
if (ImGui::Button("Start"))
{
StartGame();
}输入框
static char name[64] = "";
ImGui::InputText("Name", name, sizeof(name));滑动条
static float value = 0.5f;
ImGui::SliderFloat("Value", &value, 0.0f, 1.0f);复选框
static bool enabled = true;
ImGui::Checkbox("Enable Feature", &enabled);7. 窗口系统
ImGui::Begin("Settings");
ImGui::Text("Game Settings");
ImGui::End();窗口支持：
- 拖动
- 缩放
- 折叠
8. 布局系统
同一行
ImGui::Button("A");
ImGui::SameLine();
ImGui::Button("B");分隔线
ImGui::Separator();9. 菜单栏
if (ImGui::BeginMainMenuBar())
{
if (ImGui::BeginMenu("File"))
{
if (ImGui::MenuItem("Open"))
{
}
ImGui::EndMenu();
}
ImGui::EndMainMenuBar();
}10. 表格
if (ImGui::BeginTable("table", 3))
{
for (int row = 0; row < 5; row++)
{
ImGui::TableNextRow();
for (int column = 0; column < 3; column++)
{
ImGui::TableSetColumnIndex(column);
ImGui::Text("Row %d Col %d", row, column);
}
}
ImGui::EndTable();
}11. Demo Window
ImGui 内置了一个非常重要的学习工具：
ImGui::ShowDemoWindow();Demo Window 包含：
- 控件示例
- 表格示例
- Docking
- 绘图 API
12. 完整示例
void ShowUI()
{
ImGui::Begin("Control Panel");
static float speed = 1.0f;
static bool enable = true;
ImGui::Checkbox("Enable", &enable);
ImGui::SliderFloat("Speed", &speed, 0.0f, 10.0f);
if (ImGui::Button("Reset"))
{
speed = 1.0f;
}
ImGui::End();
}总结
Dear ImGui 是开发工具界面的强大解决方案。
核心理念：
UI = Code
每一帧重新构建它非常适合：
- 游戏开发工具
- 调试界面
- 编辑器
- 可视化工具
如果你正在开发 C++ 工具软件或游戏编辑器，ImGui 是一个非常值得使用的库。