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

原创已于 2025-05-26 17:42:33 修改 · 718 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#harmonyos #华为 #javascript #typescript

于 2025-05-16 14:48:17 首次发布

应用场景：

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.结合事件，来实现高亮的切换效果

用状态变量保存，onChange,ontabBarClick中获取到的索引值
给每个 tabBar起个标记，0，1，2.。。

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