Files
XCEngine/docs/api/XCEngine/Editor/UI/DividerChrome/DividerChrome.md
2026-03-29 01:36:53 +08:00

3.1 KiB
Raw Blame History

DividerChrome

命名空间: XCEngine::Editor::UI

类型: header-helper

源文件: editor/src/UI/DividerChrome.h

描述: 提供编辑器面板分隔线的轻量绘制函数,用统一的 StyleTokens 控制颜色与线宽。

概述

DividerChrome.h 很小,但它承担的是“视觉一致性”而不是“复杂交互”。它把横向分隔线、纵向分隔线和当前窗口底边线抽成统一 helper避免各个面板自己散落写 AddLine(...) 与硬编码颜色。

在商业编辑器里,这类 helper 很常见,因为它们能把“只是画一条线”这件小事也纳入统一设计系统:线宽、颜色、出现位置都不再是面板作者自己临时决定,而是由共享 token 决定。

公开 API

成员 说明
DrawHorizontalDivider(...) 在任意 ImDrawList 上绘制一条横向分隔线。
DrawVerticalDivider(...) 在任意 ImDrawList 上绘制一条纵向分隔线。
DrawCurrentWindowBottomDivider(...) 读取当前 ImGui 窗口的矩形并在底边绘制横线。

当前实现行为

editor/src/UI/DividerChrome.h 的实现:

  • 默认颜色来自 PanelDividerColor()
  • 默认厚度来自 PanelDividerThickness()
  • 如果传入的 drawList 为空,或绘制范围是退化区间,函数会直接返回。
  • DrawCurrentWindowBottomDivider(...) 不会创建额外布局空间;它只是读取当前窗口的 PosSize 后直接在底边绘线。

这意味着它是纯绘制 helper不管理布局、不创建交互区域也不记录任何状态。

设计说明

把 divider 单独抽出来有两个直接好处:

  • ProjectPanelPanelChrome、自定义标签栏都可以复用同一套边界视觉语言。
  • 当设计风格变化时,只要改 token而不是到处找 AddLine(...) 的裸调用。

可以把它理解成商业引擎编辑器里“panel chrome”的最小组成部分。它不像 splitter 那样负责拖拽,也不像 toolbar scope 那样负责结构;它只负责把层次边界画正确。

使用建议

  • 如果你已经有明确的屏幕坐标,就直接调用 DrawHorizontalDivider(...)DrawVerticalDivider(...)
  • 如果你只是想给当前 child/window 补一条底边线,优先用 DrawCurrentWindowBottomDivider(...)
  • 这类 helper 适合放在面板收尾阶段调用,而不是提前调用后再继续写会改变窗口高度的控件。

典型用法

ImDrawList* drawList = ImGui::GetWindowDrawList();
const ImVec2 min = ImGui::GetWindowPos();
const ImVec2 max(min.x + ImGui::GetWindowSize().x, min.y + ImGui::GetWindowSize().y);

UI::DrawHorizontalDivider(drawList, min.x, max.x, max.y - 0.5f);

当前限制

  • 不负责布局留白,调用者必须自己决定线的位置。
  • 没有 hover / active 等交互状态,它不是 splitter。
  • 只是一层对 ImDrawList::AddLine(...) 的统一封装,不提供更复杂的边框系统。

相关文档