跳转至

选项卡控件 (STabCtrl)

选项卡控件是一个用于组织和切换多个页面的容器控件。它通过标签页的形式将内容分组展示，使用户可以方便地在不同页面间切换。

基本信息

  • 类名：STabCtrl
  • 控件标签：tabctrl
  • 基类：SWindow
  • 功能：提供标签页式内容组织和切换功能

属性说明

基本属性

属性名 类型 默认值 说明
curSel int - 当前页索引
tabWidth int - tab宽度
tabHeight int - tab高度
tabPos int - tab左偏移
tabInterSize int - tab间隔宽度
tabAlign string - tab排列方式（top/left/right/bottom）
textDir string - 文本排列方式（hori/horizontal/vert/vertical）
animateSteps int - 动画次数
animateType int - 动画样式：0-背景跟着动；1-背景不动
interpolator string - 动画插值器（Linear/Accelerate/Decelerate/AccelerateDecelerate/Anticipate/AnticipateOvershoot/Bounce/Cycle/Overshoot）

外观属性

属性名 类型 默认值 说明
colorText color - 文本颜色
tabSkin string - tab皮肤
tabInterSkin string - tab间隔皮肤
iconSkin string - tab图标皮肤
frameSkin string - tab框架皮肤
icon-x int - 图标显示位置X
icon-y int - 图标显示位置Y
text-x int - 文本显示位置X
text-y int - 文本显示位置Y

使用示例

基本选项卡

<tabctrl name="tabBasic" 
         pos="10,10,410,310" 
         curSel="0"
         tabWidth="70"
         tabHeight="30"
         tabAlign="top">
    <page title="页面1">
        <text pos="10,10">这是第一页</text>
    </page>
    <page title="页面2">
        <text pos="10,10">这是第二页</text>
    </page>
    <page title="页面3">
        <text pos="10,10">这是第三页</text>
    </page>
</tabctrl>

底部标签选项卡

<tabctrl name="tabBottom" 
         pos="10,330,410,530" 
         curSel="0"
         tabWidth="80"
         tabHeight="25"
         tabAlign="bottom"
         tabSkin="skin_tab_bottom"
         colorText="#333333">
    <page title="首页">
        <text pos="10,10">首页内容</text>
    </page>
    <page title="设置">
        <text pos="10,10">设置内容</text>
    </page>
    <page title="关于">
        <text pos="10,10">关于内容</text>
    </page>
</tabctrl>

带图标的选项卡

<tabctrl name="tabWithIcons" 
         pos="430,10,830,310" 
         curSel="0"
         tabWidth="90"
         tabHeight="32"
         tabAlign="left"
         iconSkin="skin_tab_icons"
         icon-x="5"
         text-x="35"
         colorText="#333333">
    <page title="主页" tip="返回主页" icon="0">
        <text pos="10,10">主页内容</text>
    </page>
    <page title="消息" tip="查看消息" icon="1">
        <text pos="10,10">消息内容</text>
    </page>
    <page title="设置" tip="系统设置" icon="2">
        <text pos="10,10">设置内容</text>
    </page>
</tabctrl>

带动画效果的选项卡

<tabctrl name="tabAnimated" 
         pos="430,330,830,530" 
         curSel="0"
         tabWidth="100"
         tabHeight="35"
         tabAlign="top"
         animateSteps="10"
         animateType="0"
         interpolator="AccelerateDecelerate"
         tabSkin="skin_tab_animated"
         colorText="#333333">
    <page title="页面A">
        <text pos="10,10">页面A内容</text>
    </page>
    <page title="页面B">
        <text pos="10,10">页面B内容</text>
    </page>
    <page title="页面C">
        <text pos="10,10">页面C内容</text>
    </page>
</tabctrl>

事件处理

选项卡控件支持以下事件：

事件名 EventID 说明
EVT_TAB_SELCHANGING EventTabSelChanging::EventID 选择页即将改变事件
EVT_TAB_SELCHANGED EventTabSelChanged::EventID 选择页已改变事件 
// 事件处理示例
EVENT_MAP_BEGIN()
    EVENT_NAME_HANDLER(L"tabBasic", EventTabSelChanged::EventID, OnTabSelChanged)
    EVENT_NAME_HANDLER(L"tabBasic", EventTabSelChanging::EventID, OnTabSelChanging)
EVENT_MAP_END()

void OnTabSelChanged(IEvtArgs *pEvt)
{
    EventTabSelChanged *pRealEvt = sobj_cast<EventTabSelChanged>(pEvt);
    int nOldSel = pRealEvt->nOldSel;
    int nNewSel = pRealEvt->nNewSel;
    // 处理选择页已改变
}

void OnTabSelChanging(IEvtArgs *pEvt)
{
    EventTabSelChanging *pRealEvt = sobj_cast<EventTabSelChanging>(pEvt);
    int nOldSel = pRealEvt->nOldSel;
    int nNewSel = pRealEvt->nNewSel;
    // 处理选择页即将改变
    // 可以通过返回FALSE来阻止页面切换
}

代码操作

// 查找选项卡控件
STabCtrl *pTabCtrl = FindChildByName2<STabCtrl>(L"tabBasic");

// 获取当前选中页
int nCurSel = pTabCtrl->GetCurSel();

// 设置当前选中页
pTabCtrl->SetCurSel(1);

// 获取页面数量
int nPageCount = pTabCtrl->GetPageCount();

// 获取指定页面标题
SStringT strTitle;
pTabCtrl->GetPageTitle(0, strTitle);

// 设置指定页面标题
pTabCtrl->SetPageTitle(0, L"新标题");

// 获取指定页面HWND
SOUI::IWindow *pPage = pTabCtrl->GetPage(0);

// 插入新页面
int nIndex = pTabCtrl->InsertPage(1, L"插入页");

// 删除指定页面
pTabCtrl->RemovePage(0);

// 获取页面矩形区域
CRect rcPage;
pTabCtrl->GetPagesRect(&rcPage);

最佳实践

  1. 标签对齐：根据界面布局选择合适的 tabAlign 值，常见的有 top 和 bottom
  2. 尺寸设置：合理设置 tabWidth 和 tabHeight，确保标签文本完整显示
  3. 视觉反馈：使用 tabSkin 定制标签外观，提供选中和未选中状态的视觉区分
  4. 图标使用：通过 iconSkin 和位置属性为标签添加图标，提高可识别性
  5. 动画效果：适当使用动画属性增强用户体验，但避免过度使用影响性能

常见问题

Q: 标签显示不完整怎么办？

A: 检查 tabWidth 和 tabHeight 属性是否设置合适，确保能完整显示标签文本。

Q: 页面切换动画不流畅怎么办？

A: 调整 animateSteps 和 interpolator 属性，优化动画效果。

Q: 标签图标位置不正确怎么办？

A: 检查 icon-x、icon-y、text-x 和 text-y 属性设置是否正确。

相关控件