容器组件Tabs如何自定义 tabBar-高亮切换

1.TabBar 如果放在底部的话，一般会显示图形和文字，甚至有特殊的图标，如果要实现此类效果，就需要 自定义tabBar

Tabs() {
    TabContent() {
        // 内容略
    }
    .tabBar(this.tabBarBuilder())
  }

@Builder
tabBarBuilder() {
  // 自定义的Tabbar结构
}

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

onChange(event: (index: number) => void)

Tab页签切换后触发的事件。 - index：当前显示的index索引，索引从0开始计算。 滑动切换、点击切换 均会触发

onTabBarClick(event: (index: number) => void)10+

Tab页签点击后触发的事件。 - index：被点击的index索引，索引从0开始计算。

3.结合事件，来实现高亮的切换效果

1. 用状态变量保存，onChange,ontabBarClick中获取到的索引值
2. 给每个 tabBar起个标记，0，1，2.。。
3. 在tabBar内部比较 标记==this.index?高亮:不高亮

   @Entry
   @Component
   struct TabsDemo03 {
     @State selectedIndex: number = 0
   
     build() {
       Column() {
         Text(this.selectedIndex + '')
         Tabs() {
           TabContent() {
             Text('首页')
           }
           .tabBar(this.tabBarBuilder($r('app.media.ic_tabbar_icon_2'), '首页', 0, $r('app.media.ic_tabbar_icon_2_selected')))
   
   
           TabContent() {
             Text('搜索')
           }
           .tabBar(this.tabBarBuilder($r('app.media.ic_tabbar_icon_3'), '探索', 1, $r('app.media.ic_tabbar_icon_3_selected')))
         }
         .barPosition(BarPosition.End)
         .scrollable(true)
         .layoutWeight(1)
         .onChange((index: number) => {
           this.selectedIndex = index
         })
   
       }
     }
   
     @Builder
     tabBarBuilder(img: ResourceStr, text: string, index: number, selectedImg: ResourceStr) {
   
       Column() {
         Image(this.selectedIndex == index ? selectedImg : img)
           .width(30)
         Text(text)
           .fontColor(this.selectedIndex == index ? Color.Red : Color.Black)
       }
     }
   }