探索鸿蒙（HarmonyOS）：TabList和Tab

官方文档说：“Tablist可以实现多个页签栏的切换，Tab为某个页签。子页签通常放在内容区上方，展示不同的分类。页签名称应该简洁明了，清晰描述分类的内容。”（https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-tablist-tab-0000001062229749）

TabList就是页面上方的切换按钮，就像今日头条这种。

参考官方代码做了个示例，介绍一下重点。

地址：https://download.youkuaiyun.com/download/Tulipsys/18756600

一、原理

基本原理大概这样：页面上方设置一个TabList，下面设置一个ComponentContainer作为容器。TabList上会设置几个按钮（Tab），点击Tab的时候就将不同的“页面（layout）”载入ComponentContainer中展现出来。

这儿说的“页面”这个词不准确，实际上就是layout，对应layout的xml文件。

二、示例说明

工程名：TabListSample https://download.youkuaiyun.com/download/Tulipsys/18756600

说明：

1.页面上部设置一个TabList，包括3个Tab：Image、Movies、News。

2.点击Tab打开相应的页面。

3.简便起见，每个页面只包含一个Text。

三、重点部分说明

1.在ability_main.xml中添加TabList和ComponentContainer

<?xml version="1.0" encoding="utf-8"?> <DependentLayout     xmlns:ohos="http://schemas.huawei.com/res/ohos"     ohos:height="match_parent"     ohos:width="match_parent"     ohos:orientation="vertical">     <TabList         ohos:id="$+id:tab_list"         ohos:top_margin="10vp"         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"         ohos:normal_text_color="#999999"         ohos:selected_text_color="#eb2f47"         ohos:selected_tab_indicator_color="#FFFFFF"         ohos:selected_tab_indicator_height="2vp"/>     <DirectionalLayout         ohos:id="$+id:tab_container"         ohos:height="match_parent"         ohos:width="match_parent">     </DirectionalLayout> </DependentLayout>

（1）TabList和ComponentContainer必须要设置id，后面要用到。

（2）ComponentContainer这儿用的DirectionalLayout布局。猜测用哪种布局都差不多，没测试过。

2.为每个Tab新建页面

在layout中新建三个Tab页面，分别对应：Image、Movies、News。比如：tabcontent_movies.xml。

<DirectionalLayout     xmlns:ohos="http://schemas.huawei.com/res/ohos"     ohos:height="match_parent"     ohos:width="match_parent"     ohos:orientation="vertical">     <Text         ohos:id="$+id:news_text"         ohos:height="match_parent"         ohos:width="match_parent"         ohos:text_alignment="center"         ohos:text="News Tab"         ohos:text_size="40fp"/> </DirectionalLayout>

用了DirectionalLayout布局，简便起见只放了一Text。

3.编写代码生成TabList。

在MainAbilitySlice中编写代码生成TabList：

tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);         tabList.setTabLength(60); // 设置Tab的宽度         tabList.setTabMargin(26); // 设置两个Tab之间的间距         tabList.setFixedMode(true);         TabList.Tab tab1 = tabList.new Tab(getContext());         tab1.setText("Image");         tabList.addTab(tab1);

注：tab也可以用布局文件生成。用布局文件可以定义比较复杂的tab。

4.定义TabList的TabSelectedListener

定义TabList的TabSelectedListener，完成各种功能。

tabList.addTabSelectedListener(new TabList.TabSelectedListener() {             @Override             public void onSelected(TabList.Tab tab) {                 ComponentContainer container = (ComponentContainer) findComponentById(ResourceTable.Id_tab_container);                 if(tab.getText().equals("Image"))                 {                     imageContent = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_tabcontent_image, null, false);                     container.removeAllComponents();                     container.addComponent(imageContent);                 }else if(tab.getText().equals("Movies"))                 {                     movieContent = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_tabcontent_movies, null, false);                     container.removeAllComponents();                     container.addComponent(movieContent);                 }else if(tab.getText().equals("News"))                 {                     newsContent = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_tabcontent_news, null, false);                     container.removeAllComponents();                     container.addComponent(newsContent);                     Text newsText = (Text)findComponentById(ResourceTable.Id_news_text);                     newsText.setClickedListener(new Component.ClickedListener() {                         @Override                         public void onClick(Component component) {                             new ToastDialog(slice)                                     .setText("you clicked: News text")                                     // Toast显示在界面中间                                     .setAlignment(LayoutAlignment.CENTER | LayoutAlignment.BOTTOM)                                     .show();                         }                     });                 }             }             @Override             public void onUnselected(TabList.Tab tab) {             }             @Override             public void onReselected(TabList.Tab tab) {             }         });     }

最重要的就这几句话：

imageContent = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_tabcontent_image, null, false); container.removeAllComponents(); container.addComponent(imageContent);

四、补充

根据官方文档，TabList应该用于页面顶部。大概试了一下放到底部也可以，效果应该也不错。