ImStudio 深度解析用拖拽方式设计并生成代码的 Dear ImGui 可视化布局编辑器【免费下载链接】ImStudioGUI layout designer for Dear ImGui项目地址: https://gitcode.com/gh_mirrors/im/ImStudioImStudio是一款面向Dear ImGui的实时 GUI 布局创建与编辑器Dear ImGui 可视化布局编辑器。它把手写 C 代码画界面变成在画布上拖拽控件并同步输出可用的 ImGui 代码。适合正在用 Dear ImGui 做工具、调试器或嵌入式界面的 C 开发者新手也能通过它快速理解 ImGui 的布局逻辑。它解决什么问题Dear ImGui 的界面完全靠代码描述按钮放哪、滑块多宽都要手写ImGui::Button并不断编译运行调整。问题在于两点布局调试成本高改一个坐标就要重跑程序界面效果难以直观评估代码和视觉来回切换ImStudio 的解法是让画布与生成代码实时联动在编辑器里摆好控件右侧输出面板立刻得到对应代码所见即所得WYSIWYG即画出来的样子和运行起来的样子一致。安装与快速上手⚙️ 依赖很简单CMake3.10 及以上和GLFW。构建脚本要求 C11 标准见 CMakeLists.txt。环境要求CMake 3.10支持 C11 的编译器GLFWWindows / macOS 构建时自动下载Linux 需手动安装Debiansudo apt-get install libglfw3 libglfw3-devArchsudo pacman -S glfwFedorasudo dnf install glfw glfw-develOpenGL构建时由 CMake 检测Linux 构建仓库自带 build.sh 脚本git clone --depth 1 https://gitcode.com/gh_mirrors/im/ImStudio cd ImStudio ./build.shWindows 构建需在 MSVC 的 x64 Native Tools Command Prompt 中执行git clone --depth 1 https://gitcode.com/gh_mirrors/im/ImStudio cd ImStudio md build cd build cmake .. -DCMAKE_BUILD_TYPERelease cmake --build . --config Release跨平台方面Linux 通过find_package检测系统 GLFWWindows/macOS 则通过 cmake/glfw.cmake 在构建期自动拉取 GLFWCMake 配置还包含 CPack 打包Windows 走 WiX 安装包Linux 生成 deb/tgz。项目同时提供 Web 版基于 Emscripten见 src/main_sdl_emscripten.cpp 和 Makefile.emscripten。核心功能实操从侧边栏拖入控件左侧Sidebar按 Primitives基础图形、Data Inputs数据输入等分组列出控件按钮Button、Checkbox、InputText、Combo、Slider 等。点击某个按钮即调bw.create(button)对应对象直接出现在中央画布上实现见 src/sources/ims_gui_sidebar.cpp。适合快速搭出第一版表单或配置面板。在画布上拖拽定位中央Viewportsrc/sources/ims_gui_viewport.cpp是编辑区控件以真实 ImGui 样式渲染可以直接用鼠标拖动、缩放选中对象。由于控件就是真正的 ImGui 控件画布上的外观与最终运行效果一致。适合精细调整间距和对齐。用属性面板微调参数选中对象后右侧Properties面板src/sources/ims_gui_properties.cpp暴露该对象的全部状态位置、尺寸、标签文本、控件值以及Locked锁定、Autoresize自动缩放、Center H水平居中等开关。改一项画布与代码同步刷新。适合不想手动调坐标的场景。嵌套子窗口ImGui 的BeginChild子区域是组织布局的常用手段但嵌套关系在纯代码里很难看清。ImStudio 支持创建Child Window并把控件装进其中对象树的容器结构见 src/sources/ims_object.h 中的ContainerChild。适合做滚动区、分组卡片这类嵌套布局。实时生成代码并导出每做一次修改Output工作区src/sources/ims_gui_output.cpp就重新生成完整代码菜单栏提供一键复制到剪贴板直接粘贴进自己的项目即可。除此之外还附带 Style Color 导出、Demo 窗口等工具入口定义在 src/sources/ims_gui.h。适合需要把界面方案快速落地的场景。底层看架构与实现要点对象模型src/sources/ims_object.hBaseObject保存每个控件的全部状态id、类型、位置、尺寸、标签、值、锁定等Object再挂一个ContainerChild用std::vectorBaseObject表达子窗口内再装控件的树形结构。画布缓冲区src/sources/ims_buffer.cppBufferWindow持有对象树提供create()新建、drawall()整体绘制、getobj()按 id 查找是设计数据的中央存储。对象绘制src/sources/ims_object_draw.cpp按type字段分发把每个BaseObject渲染成对应的真实 ImGui 控件并叠加选中高亮。代码生成引擎src/sources/ims_generator.cppRecreate()按控件类型逐条生成 ImGui 调用用fmt做字符串格式化GenerateCode()遍历对象树拼出完整代码。主窗口与入口src/main_window.cpp组装菜单栏、侧边栏、视口、属性、输出五块区域桌面端入口为 src/main_glfw_opengl3.cppGLFW OpenGL3 后端。数据流很直接侧边栏点击 →BufferWindow::create()写入对象树 → 视口drawall()渲染并响应拖拽 → 属性面板回写对象字段 →GenerateCode()每帧将对象树序列化为代码字符串 → 输出窗口展示、一键复制。进阶用法与扩展静态布局模式生成器有staticlayout开关开启后不再为控件生成ImGui::SetCursorPos改为依赖 ImGui 默认的流式布局。适合做自适应界面而非固定坐标界面。样式与颜色导出通过Style Color工具导出当前主题的配色代码把视觉方案一并带入项目。添加新控件扩展路径清晰——在BufferWindow::create()注册类型、在 src/sources/ims_object_draw.cpp 补绘制分支、在Recreate()补生成规则、在侧边栏加按钮四处改完即可用。Web 部署项目可用 Emscripten 编译为浏览器版本shell.html 提供页面外壳剪贴板经 src/utils/JsClipboardTricks.cpp 走 JS 桥接。实战技巧与常见坑侧边栏的 NOTE 提示得明白这里只是 ImGui 常用控件的子集更多控件可查 Tools 菜单下的 Demo Window 与imgui_demo.cpp生成代码后手动补充即可。生成代码是界面描述片段不是独立可运行程序——粘贴到你自己的 ImGui 主循环里编译控件状态变量如static bool会自动带上对象 id 后缀避免冲突。数值输入框支持*2、5这类快捷运算见侧边栏 HelpMarker 说明调参数时比手打快。Linux 下构建失败多半是没装 GLFWWindows 下请确认在 MSVC 工具命令行里执行 CMake而不是普通 PowerShell。如何参与贡献Fork 仓库 → 建功能分支 → 提交 PR等待审查合并。README 中的 CI 徽章显示项目对 Linux、Windows、macOS 三条平台构建均有流水线覆盖提交前建议在本地把对应平台的 CMake 构建跑通并保持现有代码风格。总结ImStudio 把 Dear ImGui 界面开发中最耗时的布局—调参—验证循环压缩到了画布上拖拽定位置、面板改属性、代码实时生成、剪贴板一键导出整条链路覆盖了从设计到落地。如果你正用 Dear ImGui 维护中大型界面或想快速学会 ImGui 各控件的坐标与流式布局差异把它放在工具链里是值得的。【免费下载链接】ImStudioGUI layout designer for Dear ImGui项目地址: https://gitcode.com/gh_mirrors/im/ImStudio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考