HarmonyOS - TabBar 实现小米有品风格的高亮切换效果

1、引言 

在HarmonyOS应用开发中，TabBar是一个非常实用的组件，它可以帮助用户快速地在不同的页面之间进行切换。本篇文章将介绍如何使用HarmonyOS中的TabBar组件，并实现一种类似小米有品App中的高亮切换效果。

2、示例设计

1. 定义TabBar:

   • 创建一个TabBar并为其添加四个TabBarItem，分别代表“首页”、“分类”、“购物车”和“我的”。
   • 为每个TabBarItem设置图标和标题。

2. 设置样式:

   • 设置选中状态下的文字和图标颜色为红色。
   • 设置未选中状态下的文字和图标颜色为灰色。

3. 添加事件监听器:

   • 当某个选项卡被选中时，可以播放一个动画或更改背景色来增加视觉反馈。
   • 当选项卡被取消选中时，恢复到默认状态。
   • 当同一个选项卡被再次点击时，可以显示提示信息或执行其他逻辑。

3、源码

@Entry
@Component
struct Index3 {
  // 准备状态，存储激活的索引
  @State selectedIndex: number = 0

  @Builder
  myBuilder(itemIndex: number, title: string, img: ResourceStr, selectImg:ResourceStr) {
    // 如果激活的是自己，图片/文本 都需要调整样式 -》 需要区分不同的TabBar
    Column() {
      Image(
        itemIndex == this.selectedIndex ? selectImg : img
      )
        .width(30)
      Text(title)
        .fontColor(itemIndex == this.selectedIndex ? Color.Orange : Color.Black)
    }
  }
  @Builder
  centerBuilder(itemIndex: number, img: ResourceStr, selectImg:ResourceStr){
    Image(itemIndex == this.selectedIndex ? selectImg : img)
      .width(40)
      .margin({
        bottom:10
      })
  }

  build() {
    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
        Text('首页内容')
      }
      .tabBar(this.myBuilder(0, '首页', $r('app.media.ic_tabbar_icon_0'),$r('app.media.ic_tabbar_icon_0_selected')))

      TabContent() {
        Text('分类内容')
      }
      .tabBar(this.myBuilder(1, '分类', $r('app.media.ic_tabbar_icon_1'),$r('app.media.ic_tabbar_icon_1_selected')))

      TabContent(){
        Text('汇潮学堂')
      }
      .tabBar(this.centerBuilder(2, $r('app.media.ic_reuse_02'),$r('app.media.logo')))
      TabContent() {
        Text('购物车内容')
      }
      .tabBar(this.myBuilder(3, '购物车', $r('app.media.ic_tabbar_icon_2'),$r('app.media.ic_tabbar_icon_2_selected')))

      TabContent() {
        Text('我的内容')
      }
      .tabBar(this.myBuilder(4, '我的', $r('app.media.ic_tabbar_icon_3'),$r('app.media.ic_tabbar_icon_3_selected')))
    }
    .scrollable(false)
    .animationDuration(0)
    .onChange((index: number) => {
      this.selectedIndex = index
      // console.log('',this.selectedIndex)
    })
  }
}