鸿蒙开发实现tabBar-高亮切换

应用场景：

Tabs组件是鸿蒙HarmonyOS开发中常用的容器组件，主要用于实现页面内容的分类切换，提升用户操作效率和信息获取体验。由TabContent（内容区）和TabBar（导航栏）两部分组成：

• TabContent：显示对应页签的内容视图，默认撑满父容器且不支持手动设置宽高
• 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)	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)
       }
     }
   }