一、什么是 Tablist 与 Tab ？

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

二、支持的 XML 属性

Tablist 的共有 XML 属性继承自 ScrollView，ScrollView 详情请参考我的博客：HarmonyOS之常用组件ScrollView的功能和使用。
Tablist 的自有 XML 属性如下：

三、TabList 的使用

① TabList 创建

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>

设置默认状态和选中状态的字体颜色和 indicator 的颜色：

<TabList
	    ...
	    ohos:normal_text_color="#999999"
	    ohos:selected_text_color="#FFFFFF"
	    ohos:selected_tab_indicator_color="#FFFFFF"
	    ohos:selected_tab_indicator_height="2vp"/>

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

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

TabList 中添加 Tab：

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

效果如下：

② 设置 fixedMode

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

tabList.setFixedMode(true);

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); // 1表示位置

在某一位置新增 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已处于选中状态，再次被点击时的状态回调
	        ...
	    }
	});

⑤ TabList 常用接口

方法	说明
getSelectedTab	返回选中的Tab
getSelectedTabIndex	返回选中的Tab的位置索引
getTabCount	获取Tab的个数
getTabAt	获取某个Tab
removeTab	移除某个位置的tab
setOrientation	设置横或竖方向

四、Tab 的使用

设置 Tab 属性：

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

选中某个 Tab：

tab.select();

获取 Tab 在 TabList 中的位置索引：

tab.getPosition();

HarmonyOS之常用组件TabList与Tab的功能和使用

一、什么是 Tablist 与 Tab ？

二、支持的 XML 属性

三、TabList 的使用

① TabList 创建

② 设置 fixedMode

③ 在某个位置新增 Tab

④ 响应焦点变化

⑤ TabList 常用接口

四、Tab 的使用

相关文章