菜单

基本控件

相关源文件

基本控件是任何 Dear ImGui 界面的基础构建块。本页面涵盖了构成 ImGui 即时模式 UI 系统的核心要素,包括文本显示、按钮、复选框、单选按钮、滑块、拖拽控件和输入字段。有关更复杂的控件,如树、表格和高级输入控件,请参阅 高级控件

概述

在 Dear ImGui 中,控件在每一帧中创建和处理。当调用控件函数时,它会立即处理输入、更新其状态并生成绘制命令。这种“即时模式”范式与传统的“保留模式” GUI 不同,后者中的控件在帧之间保持不变。

来源: imgui.cpp1-200 imgui_widgets.cpp100-150

文本控件

文本控件以各种格式选项显示文本。这些是最简单的控件,不响应用户输入。

基本文本函数

功能描述返回值
Text(const char* fmt, ...)显示格式化文本void
TextColored(const ImVec4& col, const char* fmt, ...)显示彩色文本void
TextDisabled(const char* fmt, ...)显示“禁用”外观的文本void
TextWrapped(const char* fmt, ...)显示在窗口边缘自动换行的文本void
BulletText(const char* fmt, ...)显示带项目符号的文本void
LabelText(const char* label, const char* fmt, ...)显示带标签的文本void

使用示例

来源: imgui_widgets.cpp160-412

按钮控件

按钮是可交互控件,点击时返回 true。它们是最常用的用户交互控件之一。

按钮类型

功能描述返回值
Button(const char* label, const ImVec2& size = ImVec2(0, 0))标准按钮bool (点击时为 true)
SmallButton(const char* label)更小的按钮版本bool (点击时为 true)
InvisibleButton(const char* str_id, const ImVec2& size)没有视觉外观的按钮bool (点击时为 true)
ArrowButton(const char* str_id, ImGuiDir dir)带方向箭头的按钮bool (点击时为 true)
ImageButton(const char* str_id, ImTextureID user_texture_id, const ImVec2& size)带图片的按钮bool (点击时为 true)

按钮行为

来源: imgui_widgets.cpp415-700 imgui_demo.cpp750-820

复选框和单选按钮

这些控件用于切换布尔状态或从一组选项中进行选择。

复选框

单选按钮

来源: imgui_widgets.cpp700-800 imgui_demo.cpp825-860

滑块和拖拽控件

滑块和拖拽控件提供了修改数值的交互方式。

滑块控件

滑块是一种控件,用户在固定轨道上拖动滑块来设置值。

功能描述返回值
SliderFloat(const char* label, float* v, float v_min, float v_max)浮点值的水平滑块bool (更改时为 true)
SliderInt(const char* label, int* v, int v_min, int v_max)整数值的水平滑块bool (更改时为 true)
SliderAngle(const char* label, float* v_rad)角度滑块(弧度制)bool (更改时为 true)
SliderFloat2/3/4(...)多组件浮点值滑块bool (更改时为 true)
SliderInt2/3/4(...)多组件整数值滑块bool (更改时为 true)
VSliderFloat/Int(...)垂直滑块bool (更改时为 true)

拖拽控件

拖拽控件通过在控件内的任何位置拖动来修改值。

功能描述返回值
DragFloat(const char* label, float* v, float v_speed=1.0f)浮点值的拖拽控件bool (更改时为 true)
DragInt(const char* label, int* v, float v_speed=1.0f)整数值的拖拽控件bool (更改时为 true)
DragFloat2/3/4(...)多组件浮点值拖拽控件bool (更改时为 true)
DragInt2/3/4(...)多组件整数值拖拽控件bool (更改时为 true)

来源: imgui_widgets.cpp3500-4500 imgui_demo.cpp900-1100

输入控件

输入控件允许用户输入文本和数值。

文本输入

数值输入

来源: imgui_widgets.cpp4800-6200 imgui_demo.cpp1150-1300

组合框和列表框

这些控件提供从列表中选择选项的功能。

组合框

列表框

来源: imgui_widgets.cpp7000-7500 imgui_demo.cpp1350-1500

进度条和指示器

进度条

来源: imgui_widgets.cpp2500-2600 imgui_demo.cpp1600-1650

颜色控件

基本的颜色选择控件。

来源: imgui_widgets.cpp8700-9500 imgui_demo.cpp1700-1850

控件架构

Dear ImGui 中的基本控件遵循标准的实现模式,以实现其即时模式行为。

来源: imgui.cpp300-800 imgui_widgets.cpp300-600 imgui_internal.h1000-1500

输入输出流程

许多控件的基本模式包括

  1. 输入状态:通过 ImGuiIO 检查鼠标位置、按键状态
  2. 处理:确定控件状态(悬停、激活等)
  3. 输出状态:设置控件状态信息并返回结果

来源: imgui.cpp600-900 imgui_widgets.cpp300-600

最佳实践

  1. ID 管理:每个控件都需要一个唯一的 ID(自动从标签生成或显式提供)
  2. 状态处理:捕获返回值表明控件何时被激活/编辑
  3. 布局流程:使用 SameLine()Spacing() 等来控制控件排列
  4. 持久化状态:任何需要在帧之间持久化的状态都必须存储在您的应用程序变量中

示例

请参阅 examples/example_glfw_opengl3/main.cpp 中的示例实现,了解如何在工作应用程序中完整使用基本控件

来源: examples/example_glfw_opengl3/main.cpp152-172

总结

基本控件构成了任何 Dear ImGui 界面的基础。它们遵循即时模式范例,即控件在每一帧重新创建,处理输入并自行绘制。本页涵盖的基本控件包括文本显示、按钮、复选框、单选按钮、滑块、拖动控件、输入字段、组合框和进度指示器。

有关更复杂的 UI 元素,请参阅以下相关页面