鸿蒙 TabList 配合 Fraction 实现顶部切换效果演示

今天我想着配合鸿蒙里面提供的顶部切换控件 tablist，来实现顶部 tab 切换，然后下面多个 fraction 的效果。废话不多说，我们正式开始。

效果图如下：

具体实现

定 tablist 布局：

我们在纵向线性布局上面写了一个 tablist 然后下面写了一个 StackLayout 来装载我们的多个 fraction。

java 代码逻辑，顶部标签数据：

privateString[]str={"关注","推荐","热点","问答"};

初始化 tab 并且添加顶部标签文字：

privatevoidinitview(){
TabListtabList=(TabList)findComponentById(ResourceTable.Id_tab_list);
if(tabList!=null){
for(inti=0;i< str.length; i++) {
                TabList.Tab tab = tabList.new Tab(getContext());
                tab.setText(str[i]);
                tabList.addTab(tab);
            }
           /* tabList.setTabLength(60); // 设置Tab的宽度
            tabList.setTabMargin(26); // 设置两个Tab之间的间距*/
            addHomeFraction();
            tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
                @Override
                public void onSelected(TabList.Tab tab) {
                    // 当某个Tab从未选中状态变为选中状态时的回调
                    System.out.println("当某个Tab从未选中状态变为选中状态时的回调");
                    layoutShow(tab.getPosition());
                }

                @Override
                public void onUnselected(TabList.Tab tab) {
                    // 当某个Tab从选中状态变为未选中状态时的回调
                    System.out.println("当某个Tab从选中状态变为未选中状态时的回调");
                }
                @Override
                public void onReselected(TabList.Tab tab) {
                    // 当某个Tab已处于选中状态，再次被点击时的状态回调
                    System.out.println("当某个Tab已处于选中状态，再次被点击时的状态回调");
                }
            });

        }
    }

我们初始化 tablist 控件后，for 循环设置我们 tablist 的 tab，并添加到 tablist 组件的 addTab 方法中。

①多个 fraction 切换逻辑：

privatevoidaddHomeFraction(){
getFractionManager()
.startFractionScheduler()
.add(ResourceTable.Id_mainstack,newAttentionFraction())
.submit();
}


publicvoidlayoutShow(intcode){
switch(code){
case0:
getFractionManager()
.startFractionScheduler()
.replace(ResourceTable.Id_mainstack,newAttentionFraction())
.submit();

break;
case1:
getFractionManager()
.startFractionScheduler()
.replace(ResourceTable.Id_mainstack,newRecommendFraction())
.submit();


break;
case2:
getFractionManager()
.startFractionScheduler()
.replace(ResourceTable.Id_mainstack,newHotspotFraction())
.submit();

break;
case3:
getFractionManager()
.startFractionScheduler()
.replace(ResourceTable.Id_mainstack,newQuestionFraction())
.submit();

break;
default:
break;
}
}

这边我们提供了一个 addHomeFraction 方法和 layoutShow 方法。 我们在进入 MainAbility 的时候调用 addHomeFraction 来加载第一个默认的 fraction。

然后我们在点击顶部的 tablist 标签的时候，我们在 onSelected 回调方法中调用 layoutShow方法。

publicvoidonSelected(TabList.Tabtab){
//当某个Tab从未选中状态变为选中状态时的回调
System.out.println("当某个Tab从未选中状态变为选中状态时的回调");
layoutShow(tab.getPosition());
}

我们只需要传入 tab.getPosition() 点击顶部标签的下标即可，这样依赖我们的 tablist 配合多个 fraction 切换功能就实现了。具体的 fraction 的内部逻辑我们简单说一下。

②关注模块

布局文件：

java 逻辑代码：

packagecom.example.tablist.fraction;
importcom.example.tablist.ResourceTable;
importcom.example.tablist.bean.PositionInfo;
importcom.example.tablist.config.Api;
importcom.example.tablist.provider.PositionProvider;
importcom.google.gson.Gson;
importohos.aafwk.ability.fraction.Fraction;
importohos.aafwk.content.Intent;
importohos.agp.components.Component;
importohos.agp.components.ComponentContainer;
importohos.agp.components.LayoutScatter;
importohos.agp.components.ListContainer;
importjava.util.List;
/***
*
*创建人：xuqing
*创建2021年2月28日1703
*类说明：关注模块
*
*/
publicclassAttentionFractionextendsFraction{
privatePositionProviderpositionProvider;
privateListContainerlistContainer;
@Override
protectedComponentonComponentAttached(LayoutScatterscatter,ComponentContainercontainer,
Intentintent){
Componentcomponent=scatter.parse(ResourceTable.Layout_fraction_attention,container,false);
returncomponent;
}
protectedvoidonStart(Intentintent){
super.onStart(intent);
listContainer=(ListContainer)
getFractionAbility().findComponentById(ResourceTable.Id_jop_page_list);
getPostition();
}
publicvoidgetPostition(){
Gsongson=newGson();
PositionInfopositionInfo=gson.fromJson(Api.getPositioninfo(),PositionInfo.class);
Listlist=positionInfo.getData();
positionProvider=newPositionProvider(list,getFractionAbility());
listContainer.setItemProvider(positionProvider);
}
}

几个 fraction 其实比较简单，都是加载本地死数据显示在 listContainer 控件上面。

其他几个 fraction 因为逻辑都差不多我这边就不展开一个一个讲，有兴趣的同学可以下载完整代码去查阅，鸿蒙到此 TabList 配合 Fraction 实现顶部切换效果就讲完了。

总结

鸿蒙里面提供了比较好用的 tablist 组件，我们只需要简单的基本就能实现顶部 tab 的切换了。 然后配合 fraction 跟 Ability 进行绑定，但是我们的 Ability 需要继承 FractionAbility。这样我们就能完成 fraction 和 ability 的绑定。 我们在 tablist 的回调方法去调用我们替换 fraction 的方法就能实现顶部 tablist 点击切换的时候下面的 fraction 跟着一起切换。

更多的 tablist 和 fraction 的联动效果同学们有兴趣可以私下研究，我这边篇幅有限就不展开讲了。

最后希望我的文章能帮助到各位解决问题，以后我还会贡献更多有用的代码分享给大家。

项目地址：

https://gitee.com/qiuyu123/tablistcut

原文标题：在鸿蒙上实现“顶部切换”效果

文章出处：【微信公众号：HarmonyOS技术社区】欢迎添加关注！文章转载请注明出处。

审核编辑：彭菁