Dear ImGui 入门教程：零基础开发者如何 30 分钟画出第一个窗口

Dear ImGui 入门教程：零基础开发者如何 30 分钟画出第一个窗口

【免费下载链接】imguiDear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies项目地址: https://gitcode.com/GitHub_Trending/im/imgui

Dear ImGui 是一款几乎零依赖的轻量级 C++ GUI 库，让你直接在程序里画出窗口、按钮和调试面板。这篇教程写给从未碰过 GUI 库的你，跟下来就能看到第一个窗口跑起来。

它到底是个什么东西

它就像画在游戏或工具窗口上的一张"临时画布"——每帧告诉它界面长什么样，画完即走，不留任何状态。这种写法叫"即时模式"（Immediate Mode），和 Web 开发里维护组件树的方式正好相反。

它最突出的优势是塞得进传统 GUI 框架塞不进的地方：

• 零依赖，几个文件就能跑
• 单线程帧循环，无消息循环
• 能嵌进游戏引擎和编辑器

官方仓库自带一个演示窗口，一次展示上百个控件，是你最快的"控件样书"。

动手前，先把环境对一遍

先别急着敲代码，花两分钟把环境对一下。

用下面命令拉取源码：

git clone https://gitcode.com/GitHub_Trending/im/imgui

这条命令会把 Dear ImGui 最新源码下载到当前目录的imgui文件夹里，后面用到的文件全在里面。

📁 目录结构，30 秒扫一遍

项目不大，先看根目录这几行就够：

imgui/ ├── imgui.h # 主头文件，核心入口，API 全在这 ├── imgui.cpp # 核心实现：窗口、输入、布局逻辑 ├── imgui_draw.cpp # 渲染逻辑：文字与图形的顶点生成 ├── imgui_widgets.cpp # 按钮、输入框等常用控件实现 ├── backends/ # 平台与渲染后端，选一套组合 ├── examples/ # 各平台可直接运行的完整示例 └── misc/ # FreeType 字体、C++ 附加件，先忽略

imgui.h是核心入口，先记住它。examples/里每个平台都有能直接编译的示例，拿不准时照着抄就行。

🚀 三步跑通 Dear ImGui

这是全文重点，三步把 Dear ImGui 从源码变成屏幕上的窗口。

第一步：引入核心文件

从根目录把这 4 个文件拷进你的项目：

• imgui.h——主头文件，后面要调用的接口都从这里进
• imgui.cpp——核心实现，管窗口生命周期和输入分发
• imgui_draw.cpp——渲染逻辑，把文字和形状翻译成图形命令
• imgui_widgets.cpp——按钮、输入框、复选框等常用控件的实现

第二步：选对你的图形后端

后端（Backend）是帮 ImGui 接上具体窗口系统和图形 API 的适配层。按你的环境挑一套：

• backends/imgui_impl_glfw.cpp+backends/imgui_impl_opengl3.cpp——GLFW 窗口加 OpenGL3，最通用，本文就用它
• backends/imgui_impl_sdl3.cpp+backends/imgui_impl_opengl3.cpp——项目里已经用 SDL 时选这套
• backends/imgui_impl_win32.cpp+backends/imgui_impl_dx11.cpp——Windows 原生窗口加 DirectX 的组合

第三步：粘贴最小可运行代码

先建好 GLFW 窗口和 OpenGL 上下文，这部分可以直接抄 examples/example_glfw_opengl3/main.cpp 的前半段。然后贴入初始化代码：

ImGui::CreateContext(); // 创建全局上下文，只做一次 ImGui_ImplGlfw_InitForOpenGL(window, true); // 让 GLFW 把输入事件喂给 ImGui ImGui_ImplOpenGL3_Init("#version 130"); // 让渲染后端构建字体纹理

接着在主循环里按顺序调用：

while (!glfwWindowShouldClose(window)) { ImGui_ImplOpenGL3_NewFrame(); // 准备本帧的渲染 ImGui_ImplGlfw_NewFrame(); // 同步鼠标键盘输入 ImGui::NewFrame(); // 正式开帧 ImGui::Begin("Hello World"); // 开一个窗口 ImGui::Text("Dear ImGui 跑起来了！"); // 画一行文字 ImGui::End(); // 关闭窗口 ImGui::Render(); // 收集本帧的绘制命令 ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData()); // 交给 OpenGL glfwSwapBuffers(window); // 交换缓冲区，上屏 }

编译运行，你会看到一个可拖动的窗口和一行字。到这里，完整的 Dear ImGui 集成步骤就走完了。

🐛 跑不起来？高频坑一览

一报错先别慌，八成逃不出下面这张表。

多数问题本质是"漏拷一个文件"或"调用顺序错了"。拿示例逐行对一遍，基本都能定位。

跑通之后，往哪走

想继续深挖这份 Dear ImGui 使用教程，按这 5 个方向来：

1. 把 imgui_demo.cpp 读一遍——它本身就是一本可运行的控件手册，示例启动后自动弹出
2. 学改主题和配色——imgui.h 里的样式 API，一行StyleColorsDark()切深色
3. 正式支持中文——docs/FONTS.md 讲清楚字体加载和字形范围怎么配
4. 搞懂后端机制——docs/BACKENDS.md 覆盖后端选型和自定义后端的完整写法
5. 跑其他平台的示例——docs/EXAMPLES.md 给出每个平台的逐步构建说明

你已经迈出第一步：让第一帧画面上了屏。剩下的，只是在上面继续加东西。

【免费下载链接】imguiDear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies项目地址: https://gitcode.com/GitHub_Trending/im/imgui