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@BuildermyBuilder(itemIndex: number, title: string, img: ResourceStr, selectImg:ResourceStr) {// 如果激活的是自己，图片/文本 都需要调整样式 -》 需要区分不同的TabBarColumn() {Image(itemIndex == this.selectedIndex ? selectImg : img).width(30)Text(title).fontColor(itemIndex == this.selectedIndex ? Color.Orange : Color.Black)}}@BuildercenterBuilder(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)})}
}