
#星光计划2.0# 鸿蒙 TabList 配合Fraction 实现顶部切换效果 原创 精华
前言:
各位同学大家好,有段时间没有给大家更新文章,具体多久我也不清楚哈,昨天发了一篇关于 Fraction。的基础用法和生命周期的,今天我想着配合鸿蒙里面提供的顶部切换控件 tablist 来实现顶部tab 切换然后下面多个fraction的效果。那么废话不多说我们正式开始
效果图:
具体实现:
定tablist布局
我们在纵向线性布局上面写了一个tablist 然后下面写了一个 StackLayout 来装载我们的多个fraction
- java 代码逻辑
顶部标签数据
初始化tab并且添加顶部标签文字
我们初始化我们的tablist 控件后 我们for循环设置我们的tablist的tab 并添加到tablist组件的addTab方法中
多个fraction 切换逻辑
这边我们提供了一个addHomeFraction 方法和layoutShow 方法 我们在进入 MainAbility 的时候我们调用 addHomeFraction 来加载第一个默认的fraction 然后我们在点击顶部的tablist标签的时候 我们在 onSelected 回调方法中调用 layoutShow方法
我们只需要传入tab.getPosition() 点击顶部标签的下标即可
这样依赖我们的tablist配合多个fraction切换功能就实现了
##具体的fraction的内部逻辑我们简单说一下
java逻辑代码
几个fraction其实比较·简单都是加载本地死数据显示在listContainer 控件上面,其他几个fraction因为逻辑都差不多我这边就不展开一个一个讲 有兴趣的同学可以下载完整代码去查阅 ,鸿蒙到此TabList 配合Fraction 实现顶部切换效果就讲完了
最后总结 :
鸿蒙里面提供了比较好用的tablist组件 我们只需要简单的基本就能实现顶部tab的切换了 然后我们配合fraction跟我们的 Ability 进行绑定但是我们的 Ability 需要继承 FractionAbility 。这样我们就能完成fraction和ability 的绑定 我们在 tablist的回调方法去调用我们替换fraction的方法 就能实现顶部tablist点击切换的时候下面的fraction跟着一起切换 整个代码逻辑还算比较简单跟上一篇底部切换有异曲同工之妙。 更多的tablist和fraction的联动效果同学们有兴趣可以私下研究 我这边篇幅有限就不展开讲了 最后希望我的文章能帮助到各位解决问题 ,以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ,麻烦给关注和star,小弟在这里谢过啦
项目地址:
