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

发布时间:2026/8/29 11:47:52
Dear ImGui 入门教程:零基础开发者如何 30 分钟画出第一个窗口 Dear ImGui 入门教程零基础开发者如何 30 分钟画出第一个窗口【免费下载链接】imguiDear ImGui: Bloat-free Graphical User interface for C with minimal dependencies项目地址: https://gitcode.com/GitHub_Trending/im/imguiDear ImGui 是一款几乎零依赖的轻量级 C GUI 库让你直接在程序里画出窗口、按钮和调试面板。这篇教程写给从未碰过 GUI 库的你跟下来就能看到第一个窗口跑起来。它到底是个什么东西它就像画在游戏或工具窗口上的一张临时画布——每帧告诉它界面长什么样画完即走不留任何状态。这种写法叫即时模式Immediate Mode和 Web 开发里维护组件树的方式正好相反。它最突出的优势是塞得进传统 GUI 框架塞不进的地方零依赖几个文件就能跑单线程帧循环无消息循环能嵌进游戏引擎和编辑器官方仓库自带一个演示窗口一次展示上百个控件是你最快的控件样书。动手前先把环境对一遍先别急着敲代码花两分钟把环境对一下。工具用途备注C 编译器编译核心与后端代码GCC / Clang / MSVC支持 C11 即可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.cppbackends/imgui_impl_opengl3.cpp——GLFW 窗口加 OpenGL3最通用本文就用它backends/imgui_impl_sdl3.cppbackends/imgui_impl_opengl3.cpp——项目里已经用 SDL 时选这套backends/imgui_impl_win32.cppbackends/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 的写法多数问题本质是漏拷一个文件或调用顺序错了。拿示例逐行对一遍基本都能定位。跑通之后往哪走想继续深挖这份 Dear ImGui 使用教程按这 5 个方向来把 imgui_demo.cpp 读一遍——它本身就是一本可运行的控件手册示例启动后自动弹出学改主题和配色——imgui.h 里的样式 API一行StyleColorsDark()切深色正式支持中文——docs/FONTS.md 讲清楚字体加载和字形范围怎么配搞懂后端机制——docs/BACKENDS.md 覆盖后端选型和自定义后端的完整写法跑其他平台的示例——docs/EXAMPLES.md 给出每个平台的逐步构建说明你已经迈出第一步让第一帧画面上了屏。剩下的只是在上面继续加东西。【免费下载链接】imguiDear ImGui: Bloat-free Graphical User interface for C with minimal dependencies项目地址: https://gitcode.com/GitHub_Trending/im/imgui创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考