如何使用Tabs完成自定义导航栏

设置自定义导航栏需要使用tabBar的参数,它支持的CustomBuilder的方式传入自定义的函数组件样式.

自定义TabBar 之后，高亮的切换效果就没有了，需要自行实现，首先我们得知道什么时候进行了切换

名称	功能描述
onChange(event: (index: number) => void)	Tab页签切换后触发的事件。 - index：当前显示的index索引，索引从0开始计算。 滑动切换、点击切换 均会触发
onTabBarClick(event: (index: number) => void)10+	Tab页签点击后触发的事件。 - index：被点击的index索引，索引从0开始计算。

通过自定义导航栏实现如下效果:

 我们要定义一个状态变量去记录当前选中的索引,然后onChange方法去控制索引的改变.具体实现代码如下:

@Entry
@Component
struct TabsPage {
  @State
  currentIndex: number = 0

  @Builder
  tabBuilder(title: string, index: number, Img: Resource,) {
    Column({space:8}) {
      Image(Img)
        .fillColor(this.currentIndex === index ? Color.Blue : Color.Black)
        .width(30)
      Text(title)
        .fontColor(this.currentIndex === index ? Color.Blue : Color.Black)
    }
  }

  build() {
    Tabs({barPosition:BarPosition.End}) {
      TabContent() {
        Text('首页')
      }.tabBar(this.tabBuilder('首页', 0,$r('app.media.shouye')))

      TabContent() {
        Text('购物车')
      }.tabBar(this.tabBuilder('购物车', 1,$r('app.media.gouwuchekong')))

      TabContent() {
        Text('我的')
      }.tabBar(this.tabBuilder('我的', 2,$r('app.media.wode')))
    }
    .onChange((index) => {
      this.currentIndex = index
    })
  }
}