跳到主要内容

分隔线 Separator

界面元素太多会乱，得有个东西把它们"划清界限"。Separator() 就是干这个的——它在当前位置画一条水平分隔线，把上下内容视觉上分开。

一句话理解

Separator 就是 UI 里的"分割线"，让界面更有层次，不扎堆。

函数原型​

void Separator();

无参数，无返回值。调用即画线。

水平分隔线​

Separator 默认在当前布局位置画一条横线，宽度会自动填满当前可用区域（受 LeftMargin 和 LeftPadding 影响）。颜色来自当前主题的 SeparatorColor。

HX::Text(HXStr("上面的内容"));
HX::Separator();
HX::Text(HXStr("下面的内容"));

使用场景​

场景一：功能分区​

把不同功能的控件用线隔开，让用户一眼看出"这是两块东西"：

HX::Button(HXStr("打开文件"), bp);
HX::Button(HXStr("保存文件"), bp);
HX::Separator();  // 文件操作 和 编辑操作 分开
HX::Button(HXStr("撤销"), bp);
HX::Button(HXStr("重做"), bp);

场景二：表单分段​

长表单里，用分隔线把信息分成几段，减轻阅读压力：

HX::Text(HXStr("基本信息"));
HX::TextInput(nameInput);
HX::TextInput(emailInput);

HX::Separator();

HX::Text(HXStr("详细信息"));
HX::TextInput(phoneInput);
HX::TextInput(addressInput);

场景三：列表项之间​

虽然列表通常用 Table 或 TreeView，但在简单的手动布局中，Separator 也能充当列表项的分隔：

for (int i = 0; i < 3; ++i) {
    HX::Text(HXStr("条目 ") + std::to_wstring(i));
    HX::Separator();
}
为什么叫 Separator 不叫 Line？

因为 HiEasyX 未来可能会扩展出垂直分隔线或其他样式的分隔元素。Separator 这个名字更通用，不局限于"一条横线"。目前版本它只画水平线。

完整示例代码​

#include <include/hex.h>
#include <include/impl/EasyX/hex_impl_easyx.h>

int main() {
    initgraph(800, 600);
    setbkcolor(WHITE);
    cleardevice();

    HX::HXInitForEasyX();
    HX::SetBuffer(GetWorkingImage());

    BeginBatchDraw();

    static HX::WindowProfile wp;
    wp.Size = {400, 450};

    static HX::ButtonProfile bp;
    static HX::TextInputProfile tip;

    while (true) {
        HX::HXBegin();

        ExMessage msg;
        while (peekmessage(&msg)) {
            HX::PushMessage(HX::GetHXMessage(&msg));
        }

        HX::Window(HXStr("Separator 演示"), wp);

        // ---------- 文件操作区 ----------
        HX::Text(HXStr("文件"));
        HX::Button(HXStr("新建"), bp);
        HX::Button(HXStr("打开"), bp);
        HX::Button(HXStr("保存"), bp);

        HX::Separator();

        // ---------- 编辑操作区 ----------
        HX::Text(HXStr("编辑"));
        HX::Button(HXStr("撤销"), bp);
        HX::Button(HXStr("重做"), bp);
        HX::Button(HXStr("剪切"), bp);

        HX::Separator();

        // ---------- 设置区 ----------
        HX::Text(HXStr("快速设置"));
        HX::SetNextItemWidth(200);
        HX::TextInput(tip);

        HX::Separator();

        // ---------- 底部信息 ----------
        HX::Text(HXStr("状态: 就绪"));

        HX::End();
        HX::Render();
        FlushBatchDraw();
        Sleep(16);
    }

    closegraph();
    return 0;
}
小建议

不要滥用 Separator！如果界面里到处是线，反而会显得凌乱。一般建议：

  • 相关联的控件放在一起，不要加线
  • 不同功能模块之间，加一条线
  • 同一模块内部，用 Spacer 或 Padding 做呼吸感，不要用线