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

应用场景：

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

TabContent：显示对应页签的内容视图，默认撑满父容器且不支持手动设置宽高 TabBar：用于导航切换，可配置文字/图标或自定义组件 1.TabBar 如果放在底部的话，一般会显示图形和文字，甚至有特殊的图标，如果要实现此类效果，就需要 自定义tabBar

Tabs() {
    TabContent() {
        // 内容略
    }
    .tabBar(this.tabBarBuilder())
  }
 
@Builder
tabBarBuilder() {
  // 自定义的Tabbar结构
}

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

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)
    }
  }
}