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 框架塞不进的地方：

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

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

动手前，先把环境对一遍

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

工具	用途	备注
C++ 编译器	编译核心与后端代码	GCC / Clang / MSVC，支持 C++11 即可
Git	拉取项目源码	近两三年的版本都行
GLFW	创建窗口、提供图形上下文	`examples/libs/glfw/`里有预编译库
构建工具	组织编译与链接	Make / Visual Studio / CMake 任选

用下面命令拉取源码：

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 集成步骤就走完了。

🐛 跑不起来？高频坑一览

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

症状	原因	解决
编译报 "imgui.h" not found	没把`backends/`加进包含路径	工程里补上后端目录的头文件路径
链接报未定义 ImGui_ImplGlfw_InitForOpenGL	后端源文件没加进工程	把对应后端的`.cpp`拷进来一起编译
窗口能开但屏幕一片空白	少了清屏或渲染调用顺序不对	对照示例主循环，四行调用逐一核对
中文显示成方块	字体图集默认不含中文字形	按 docs/FONTS.md 加载含中文的字库
控件一多帧率就掉	每帧绘制调用太多	合并文字、减少控件，参考 demo 的写法