harmonyOS中tablist+PageSlider实现不同tab切换效果，响应不同tab中的按钮事件

1、Tablist
Tablist是harmonyOS的一个组件，它可以实现多个页签栏的切换，Tab为某个值页签。页签中可以放按钮、输入框等常见的组件，每个页签的布局可以不一致，可以设置成DirectionalLayout、TableLayout、AdaptiveBoxLayout等布局。每个Tab放置在Tablist中，每个页签的名称可以根据自己需要去设置，但应该简洁明了。
Tablist的共有属性继承ScrollView，属性如下图所示，如果想了解更多属性可参考HarmonyOS官方文档

2、PageSlider
PageSlider是用于页面之间切换的组件，它通过响应滑动事件完成页面间的切换。
PageSlider无自有的XML属性，共有XML属性继承自：StackLayout
3、代码
测试程序共三个xml文件，ability_main.xml中包含Tablist和PageSlider，是主要布局文件，firstpage_tab.xml和message_tab.xml文件是两个tab，用于展示不同内容

具体xml代码如下：
ability_main.xml

<DirectionalLayout    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:orientation="vertical"    >    <TabList ohos:id="$+id:tablist" ohos:height="match_content" ohos:width="match_parent" ohos:background_element="#dddddd" ohos:normal_text_color="#a0a0a0" ohos:selected_text_color="#0000FF" ohos:selected_tab_indicator_color="#00FF00" ohos:weight="1" />    <PageSlider ohos:id="$+id:page_slider" ohos:height="match_content" ohos:width="match_parent" ohos:weight="9" >    </PageSlider></DirectionalLayout>

firstpage_tab.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:testtext" ohos:height="match_content" ohos:width="match_content" ohos:text="这是首页" ohos:text_size="32fp" />    <Button ohos:id="$+id:firstBt" ohos:height="match_content" ohos:width="match_content" ohos:text_size="32fp" ohos:background_element="#0000f1" ohos:text="first"/></DirectionalLayout>

message_tab.xml

<DirectionalLayout    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:orientation="vertical"    ohos:background_element="#D8D536"    >    <Text ohos:height="match_content" ohos:width="match_content" ohos:text="这是信息页" ohos:text_size="24fp" />    <Button ohos:id="$+id:msgBt" ohos:height="match_content" ohos:width="match_content" ohos:text_size="24fp" ohos:background_element="#0000ff" ohos:text="message"/></DirectionalLayout>

java代码
请忽略我代码中注释的代码，懒得去整理（狗头），TabPageSliderProvider主要是管理PageSlider。在程序中最重要的部分就是两个tab中为按钮添加监听事件，这个是我写这篇文章的主要目的！！！！！！之前为了实现两个tab中按钮的点击事件找了很多资料，也在官方文档中找了半天，最后啥也没有。
应为不同Tab是动态切换的，而两个tab中的资源又不共享，所以只能动态的添加按钮，一定不能将按钮在onStart时候加载进来！！！

java工程结构

MainAbilitySlice.java

package com.example.tablistdemo2.slice;import com.example.tablistdemo2.ResourceTable;import com.example.tablistdemo2.provider.TabPageSliderProvider;import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;import ohos.agp.components.*;import ohos.agp.text.Layout;import ohos.agp.utils.LayoutAlignment;import ohos.agp.window.dialog.ToastDialog;import ohos.global.resource.Resource;import ohos.hiviewdfx.HiLog;import ohos.hiviewdfx.HiLogLabel;import java.util.ArrayList;import java.util.List;import java.util.logging.Logger;/** * tablist + pageslider控件测试工程 *  pageslider是用于两个tab之间切换时有动画效果 * 时间：2022年10月12日 * @auther ZX */public class MainAbilitySlice extends AbilitySlice {    private static final HiLogLabel label = new HiLogLabel(HiLog.LOG_APP, 0x00201, "标签页");    private TabList tabList;    private TabList.Tab firstPageTab;//首页    private TabList.Tab messageTab;//消息页    private Component firstPageTableLayout;//首页页签界面布局    private Component messagePageTableLayout;//信息页页签界面布局//    private DirectionalLayout directionalLayout;//内容页，用于显示焦点页    PageSlider pageSlider;//界面显示容器    private Button firstBt;//首页按钮    private Button msgBt;//信息页按钮    @Override    public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); initComponent(); initPageSlider(); initListener();    }    private void initComponent() { tabList = (TabList) findComponentById(ResourceTable.Id_tablist); firstPageTableLayout = LayoutScatter.getInstance(getContext()).parse(ResourceTable.Layout_firstpage_tab,null,false); messagePageTableLayout = LayoutScatter.getInstance(getContext()).parse(ResourceTable.Layout_message_tab,null,false);// directionalLayout = (DirectionalLayout)findComponentById(ResourceTable.Id_container_tab); pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slider); //设置页签宽度为自适应，平均分配（适用于页签较少的情况） tabList.setFixedMode(true);//如果是false则表示固定宽度，true表示平均宽度 firstPageTab = tabList.new Tab(getContext()); firstPageTab.setText("first pg");//设置页签名称 tabList.addTab(firstPageTab, true);//设置当前页为默认tab// directionalLayout.addComponent(firstPageTableLayout); messageTab = tabList.new Tab(getContext()); messageTab.setText("msg pg");//设置页签名称 tabList.addTab(messageTab);    }    //初始化pageslider    private void initPageSlider() { List<Integer> layoutIds = new ArrayList<>(); layoutIds.add(ResourceTable.Layout_firstpage_tab); layoutIds.add(ResourceTable.Layout_message_tab); pageSlider.setProvider(new TabPageSliderProvider(layoutIds,this)); //tablist 与pageslider联动（当点击页签栏名称的时候页签内容跟着变化） tabList.addTabSelectedListener(new TabList.TabSelectedListener() {     @Override     public void onSelected(TabList.Tab tab) {  //获取点击tab的索引  int index = tab.getPosition();  pageSlider.setCurrentPage(index);//设置pageslider的索引与tablist索引一致  if(index == 0){//当前是首页  }  else{  }     }     @Override     public void onUnselected(TabList.Tab tab) {}     @Override     public void onReselected(TabList.Tab tab) {} }); //pageslider 与tablist 联动（当滑动页签的时候标签栏名称跟着改变，与上边是相反的） pageSlider.addPageChangedListener(new PageSlider.PageChangedListener() {     @Override     public void onPageSliding(int i, float v, int i1) {}     @Override     public void onPageSlideStateChanged(int i) {}     @Override     public void onPageChosen(int i) {  //i 表示slider的索引  if(tabList.getSelectedTabIndex() != i){//标签页与slider显示不一致      tabList.selectTabAt(i);  }     } });    }    /**     * 初始化监听事件     */    private void initListener() { HiLog.info(label,"添加tab切换监听事件"); tabList.addTabSelectedListener(new TabList.TabSelectedListener() {     @Override     public void onSelected(TabList.Tab tab) {  HiLog.info(label,"onSelected tab.getPosition():"+tab.getPosition());  if(tab.getPosition() == 0){//      directionalLayout.removeAllComponents();//      directionalLayout.addComponent(firstPageTableLayout);      initFirstListener();  }  else{      initMsgListener();//      directionalLayout.removeAllComponents();//      directionalLayout.addComponent(messagePageTableLayout );  }     }     @Override     public void onUnselected(TabList.Tab tab) {  HiLog.info(label,"onUnselected tab.getPosition():"+tab.getPosition());  if(tab.getPosition() == 0){//      directionalLayout.removeComponent(firstPageTableLayout);  }  else{//      directionalLayout.removeComponent(messagePageTableLayout);  }     }     @Override     public void onReselected(TabList.Tab tab) {  HiLog.info(label,"onReselected onUnselected tab.getPosition():"+tab.getPosition());     } }); /**  * 绑定首页按钮监听事件，注：如果是firstpagetab设置为默认tab时调用  * initFirstListener(),如果messageTab设置为默认tab时调用initMsgListener()  */ initFirstListener();    }    //初始化首页tab中的按钮监听事件    private void initFirstListener() { HiLog.info(label,"添加首页中按钮的监听事件"); try {     firstBt = (Button) findComponentById(ResourceTable.Id_firstBt);     firstBt.setClickedListener(new Component.ClickedListener() {  @Override  public void onClick(Component component) {      new ToastDialog(getContext()).setText("这是首页").setAlignment(LayoutAlignment.CENTER).show();      HiLog.info(label,"点击了首页按钮");  }     }); } catch (Exception e){     HiLog.info(label,"出错信息："+e.getMessage()); }    }    //初始化消息tab中按钮监听事件    private void initMsgListener(){ HiLog.info(label,"添加消息中按钮的监听事件"); msgBt = (Button) findComponentById(ResourceTable.Id_msgBt); msgBt.setClickedListener(new Component.ClickedListener() {     @Override     public void onClick(Component component) {  new ToastDialog(getContext()).setText("这是消息页").setAlignment(LayoutAlignment.CENTER).show();  HiLog.info(label,"单击了消息页按钮");     } });    }    @Override    public void onActive() { super.onActive();    }    @Override    public void onForeground(Intent intent) { super.onForeground(intent);    }}

TabPageSliderProvider.java

package com.example.tablistdemo2.provider;import ohos.aafwk.ability.AbilitySlice;import ohos.agp.components.Component;import ohos.agp.components.ComponentContainer;import ohos.agp.components.LayoutScatter;import ohos.agp.components.PageSliderProvider;import java.util.List;public class TabPageSliderProvider extends PageSliderProvider {    private List<Integer> layoutFilesIds;//存放布局文件的ID值    private AbilitySlice abilitySlice;    public TabPageSliderProvider(List<Integer> files, AbilitySlice abilitySlice){ layoutFilesIds = files; this.abilitySlice =abilitySlice;    }    @Override    public int getCount() { return layoutFilesIds.size();    }    //创建布局文件    @Override    public Object createPageInContainer(ComponentContainer componentContainer, int i) { Integer id = layoutFilesIds.get(i); Component component = LayoutScatter.getInstance(abilitySlice).parse(id,null,false); componentContainer.addComponent(component); return component;    }    //销毁对象    @Override    public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) { componentContainer.removeComponent((Component) o);    }    @Override    public boolean isPageMatchToObject(Component component, Object o) { return false;    }}

运行效果


如果还是不了解，请在B站搜索“锋迷商城”，是千锋教育推出的一个harmonyOS2.0开发教程，里边讲了很多东西确实很不错，有兴趣的可以去看一下。（注，本人不是托，我只是在搜资料的时候偶然发现的，感觉比其它几课程讲的好。如果想看tablist中点击事件的可以看P80和P83）

如有侵权，请联系作者删除！！