跳到主要内容

标签页 Tab

标签页（Tab）是现代界面里组织内容的利器：一个窗口里塞下十几页内容，用户点一下标签就能切换，既省空间又清晰。HiEasyX 的 TabBar + TabItem 组合让你轻松实现这一效果。

函数原型​

标签页由两层结构组成：外层是 TabBar（标签栏），内层是 TabItem（单个标签页）。

// 标签栏（外层容器）
bool BeginTabBar(const HXString &Id, TabBarProfile &Profile);
void EndTabBar();

// 标签项（内层页面）
bool BeginTabItem(const HXString &Title, TabItemProfile &Profile);
void EndTabItem();

参数说明​

TabBarProfile​

TabBarProfile 控制整个标签栏的外观和行为：

字段类型默认值说明
ActiveTabint0当前激活的标签页索引。会被控件修改。
FontSizeint20标签文字的字体大小。
TabMinHeightint28每个标签页的最小高度。
HorizontalPaddingint16标签文字左右内边距。
VerticalPaddingint6标签文字上下内边距。
CloseButtonWidthint20关闭按钮的宽度。设为 0 可隐藏关闭按钮。
KeyboardSwitchingboolfalse是否启用键盘 Ctrl+Tab / Ctrl+Shift+Tab 切换标签。

TabItemProfile​

字段类型默认值说明
Activeboolfalse该标签页是否处于激活状态。内部状态，通常不需要手动设置。
返回值很重要

BeginTabItem 返回 bool：只有当该标签页被选中时，才返回 true。这意味着你可以把一整页的内容放在 if 语句里，未被选中的页面不会执行任何绘制逻辑，性能上非常友好。

生命周期警告

TabBarProfile 必须是 static 或全局变量。ActiveTab 需要在帧与帧之间保持记忆，如果每帧都重置为 0，用户永远也切不到第二页。

返回值​

函数返回值说明
BeginTabBarbool是否成功创建标签栏。通常恒为 true。
BeginTabItembool该标签页当前是否被选中。是则渲染其内部内容。
EndTabBar / EndTabItemvoid—

完整示例​

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

// 全局资料结构体
static HX::TabBarProfile g_tabBar;
static HX::TabItemProfile g_tabPage1;
static HX::TabItemProfile g_tabPage2;
static HX::TabItemProfile g_tabPage3;

int main() {
    static HX::WindowProfile wp;
    // 开启键盘快捷键切换
    g_tabBar.KeyboardSwitching = true;
    g_tabBar.CloseButtonWidth = 20;

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

        HX::Window(HXStr("Tab 示例"), wp);

        if (HX::BeginTabBar(HXStr("main_tabs"), g_tabBar)) {
            // ---- 第 1 页：基本信息 ----
            if (HX::BeginTabItem(HXStr("基本信息"), g_tabPage1)) {
                HX::Text(HXStr("用户名：HelloWorld"));
                HX::Text(HXStr("等级：Lv.42"));
                HX::EndTabItem();
            }

            // ---- 第 2 页：设置 ----
            if (HX::BeginTabItem(HXStr("设置"), g_tabPage2)) {
                static HX::CheckboxProfile chk;
                chk.Checked = true;
                HX::Checkbox(HXStr("开机自启动"), chk);

                static HX::SliderProfile1f sld;
                HX::Slider1f(HXStr("音量"), g_volume, sld);
                HX::EndTabItem();
            }

            // ---- 第 3 页：关于 ----
            if (HX::BeginTabItem(HXStr("关于"), g_tabPage3)) {
                HX::Text(HXStr("HiEasyX 是一个基于 EasyX 的 IMGUI 框架。"));
                HX::Text(HXStr("版本：v1.0.0"));
                HX::EndTabItem();
            }

            HX::EndTabBar();
        }

        HX::End();
        HX::Render();
    }

    return 0;
}
关闭按钮

当 CloseButtonWidth > 0 时，每个标签页右侧会出现一个小 ×。点击它可以关闭该标签页。如果你不想让用户关闭某个特定页面，目前可以通过把 CloseButtonWidth 设为 0 全局关闭，或者在外部逻辑中重新添加被关闭的页面。

键盘切换​

开启 KeyboardSwitching = true 后，用户可以按：

  • Ctrl + Tab — 切换到下一页
  • Ctrl + Shift + Tab — 切换到上一页

这在多文档编辑器（IDE）场景下非常顺手。

常见疑问​

Q：标签页太多，一行放不下了怎么办？ 目前 HiEasyX 的 TabBar 不支持自动折叠或多行标签。如果标签过多，建议考虑用 TreeView 做侧边栏导航，或者分页加载。

Q：如何动态添加/删除标签页？ TabBar 本身不限制标签页数量。你可以在 BeginTabBar 和 EndTabBar 之间用循环动态生成 BeginTabItem。但注意删除标签后，ActiveTab 索引可能会越界，你需要手动修正。

运行效果​

截图占位符：请补充 $name 控件的运行效果截图。

截图占位符：请补充 Tab 运行效果 的运行效果截图，保存为 ./assets/Tab_view.png。`n