HarmonyOS 开发——自定义tabs导航栏实现切换效果

一.Tabs组件的子组件TabContent有属性.tabBar()，由官方文档可知，其参数value: 可以是字符串、资源引用、自定义构建器或包含 icon 和 text 的对象，用于设置 TabBar 上显示的内容。

但是该导航栏为默认样式，要想实现更多样式，必须自定义TabBar。

自定义TabBar步骤：1.使用@Builder修饰一个函数tabBarBuilder()，里面是自定义的TabBar的结构。2..tabBar()中传参为自定义构建器this.tabBarBuilder()。注：构建器函数里面是可以传参的，所以多个TabContent可以共用一个tabBarBuilder()然后传不同的参数。

二.在自定义TabBar的过程中，我们发现会遇到切换TabContent时，导航栏发生样式变化的场景。

.onChange()事件和.onTabBarClick()事件都可以获得当前页面的索引。所以设置一个存储当前页面的索引值的变量，在触发事件的时候，将获得的索引值存储到这个变量中即可。

//设置当前页面的索引值，默认为0
@State currentIndex: number = 0
//设置onChange事件
Tabs(){}
.onChange((index: number) => {
        this.currentIndex = index
      })

三.在第一点我们提到构建器函数里面是可以传参的，如果我们在传参中加上每个TabContent对应的下标值，那么在自定义的tabBar中，就可以通过判断语句来设置不同TabContent的不同样式。还可以通过传参的下标值与第二点中变量存储