HarmonyOS —常用组件开发指导-TabList和Tab

Tablist可以实现多个页签栏的切换，Tab为某个页签。子页签通常放在内容区上方，展示不同的分类。页签名称应该简洁明了，清晰描述分类的内容。

支持的XML属性

• Tablist的共有XML属性继承自：ScrollViewTablist的自有XML属性见下表：

xml中创建TabList

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="black"
    ohos:orientation="vertical">

   <TabList
       ohos:id="$+id:tab_list"
       ohos:top_margin="40vp"
       ohos:tab_margin="24vp"
       ohos:tab_length="140vp"
       ohos:text_size="20fp"
       ohos:height="36vp"
       ohos:width="match_parent"
       ohos:layout_alignment="center"
       ohos:orientation="horizontal"
       ohos:text_alignment="center" />

</DirectionalLayout>

TabList中添加Tab

TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
TabList.Tab tab = tabList.new Tab(getContext());
tab.setText("Image");
tabList.addTab(tab);
... //请自行创建其他Tab

设置Tab的布局

在xml中设置Tab的布局

<TabList
...
ohos:tab_margin="24vp"
ohos:tab_length="140vp"/>

或者在代码中设置Tab的布局

tabList.setTabLength(140 * 3); // 设置Tab的宽度
tabList.setTabMargin(24 * 3); // 设置两个Tab之间的间距

图1 效果展示

设置fixedMode

默认为false，该模式下TabList的总宽度是各Tab宽度的总和，若固定了TabList的宽度，当超出可视区域，则可以通过滑动TabList来显示。如果设置为true，TabList的总宽度将与可视区域相同，各个Tab的宽度也会根据TabList的宽度而平均分配，该模式适用于Tab较少的情况。

tabList.setFixedMode(true);

图2 fixedMode设置false/true前后的对比效果

在某个位置新增Tab

// 本示例中在"图片"和"视频"之间的页签中新增"新闻"页签
TabList.Tab tab = tabList.new Tab(getContext());
tab.setText("News");
tab.setMinWidth(64);
tab.setPadding(12, 0, 12, 0);
tabList.addTab(tab, 1, false); // 1表示位置 false表示不选中

图3 在某一位置新增tab的效果

响应焦点变化

tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
    @Override
    public void onSelected(TabList.Tab tab) {
        // 当某个Tab从未选中状态变为选中状态时的回调
        ...
    }

    @Override
    public void onUnselected(TabList.Tab tab) {
        // 当某个Tab从选中状态变为未选中状态时的回调
        ...
    }

    @Override
    public void onReselected(TabList.Tab tab) {
        // 当某个Tab已处于选中状态，再次被点击时的状态回调
        ...
    }
});

Tab的使用

• 设置Tab属性

tab.setMinWidth(64);
tab.setPadding(12, 0, 12, 0);

选中某个Tab

tab.select();

获取Tab在TabList中的位置索引

tab.getPosition();