第四讲：布局艺术 —— 掌控窗口内的空间
一、 ImGui 的布局灵魂：光标（Cursor）系统
ImGui 不像 Qt 有复杂的Layout对象（如QVBoxLayout）。它更像是一台打字机。
1. 核心概念：CursorPos
- 虚拟光标：每当你画一个控件，光标就会根据控件的大小自动向下移动。
- 面试考点：“绝对坐标” vs “相对坐标”。
GetCursorScreenPos(): 返回光标在整个屏幕（像素）上的绝对位置。GetCursorPos(): 返回光标相对于当前窗口左上角 的位置。- 应用场景：当你需要用
DrawList手绘背景图或特殊的连接线时，必须分清这两个坐标，否则 UI 滚动时你的手绘内容会“乱飞”。
二、 常用布局工具：打破“垂直排列”
面试官常问：“ImGui 默认是垂直排列的，怎么实现水平排版？”
1. SameLine()：并排的艺术
ImGui::Button("A");ImGui::SameLine();ImGui::Button("B");- 底层逻辑：
SameLine会强行把光标移回到上一行的末尾，并预留一定的偏移量（Spacing）。
2. Group()：将多个控件视为一体
ImGui::BeginGroup();ImGui::Text("User Profile");ImGui::Button("Avatar");ImGui::EndGroup();ImGui::SameLine();ImGui::Button("Delete");- 面试深度点：
Group的作用是计算内部所有控件的包围盒（Bounding Box）。 - 如果不用
Group，SameLine只会跟在“Avatar”后面；用了Group，后面的按钮会跟在整个“头像+文字”块的后面。
三、 动态宽度与对齐：CalcItemWidth
面试官：“如何让一个 Slider 自动填满窗口的剩余宽度？”
- 核心技巧：使用负数宽度。
ImGui::PushItemWidth(-1.0f);// -1 代表延伸到窗口右边缘ImGui::SliderFloat("##FullWidth",&val,0,1);ImGui::PopItemWidth();- 对齐问题：ImGui 并没有原生的
Align::Center。实现居中通常需要手动计算：
然后使用SetCursorPosX(Offset)来偏移光标。
四、 高级布局：子窗口 (BeginChild)
这是大型工具开发（如材质编辑器、属性栏）的必杀技。
- 面试问法：“主窗口太长了，我只想让其中一部分区域可以滚动，怎么办？”
- 解法：
ImGui::BeginChild("ID", Size, Border)。 - 底层原理：
Child实际上是在主窗口内部开辟了一个独立的渲染上下文。它有自己的滚动条、自己的 ID 栈、以及自己的剪裁矩形（ClipRect）。这对于性能优化也有帮助，因为子窗口可以独立处理裁剪。
五、 面试高频题：布局中的“陷阱”
面试官：“为什么我改了窗口字体大小后，原来的SetCursorPos手动对齐全乱了？”
- 深度回答：“因为在 ImGui 中，布局是基于**字号（FontSize）和行高（TextLineHeightWithSpacing）**的。硬编码像素值（如
SetCursorPos(100, 200)）是禁忌。专业的做法是使用相对倍数，例如ImGui::GetTextLineHeight() * 2.0f。这样当用户缩放 UI 或更换字体时，布局能自动适配。”
第四讲总结：面试通关话术
“ImGui 的布局本质上是一个基于光标状态的流式系统。虽然它没有保留模式那样自动化的布局引擎，但通过
SameLine、Group以及对CursorPos的手动干预，我们可以获得极高的灵活性。在实战中，理解窗口相对坐标与屏幕绝对坐标的转换，是实现复杂嵌套 UI 和自定义绘图插件的基础。”
下一讲预告：
《第五讲：表格系统 (Table API) —— 处理海量数据》
这是 ImGui 近年来更新最重磅、也是最复杂的系统。我会教你如何用 Table 系统在不卡顿的情况下展示 10 万行数据，以及如何实现可排序列。
