鸿蒙tabBar的详细讲解

「已注销」

986人浏览 · 2025-07-16 11:23:00

「已注销」 · 2025-07-16 11:23:00 发布

tabBar的基本使用(默认在顶部)

@Entry
@Component
struct Index {
  build() {
     Tabs(){
       TabContent(){
         // TabContent下只能有一个子组件哈
         Text("我是消息中的内容")
       }.tabBar("消息")

       TabContent(){
         // TabContent下只能有一个子组件哈
         Text("我是联系人中的内容")
       }.tabBar("联系人")

       TabContent(){
         // TabContent下只能有一个子组件哈
         Text("我是动态中的内容")
       }.tabBar("动态")
     }
  }
}

鸿蒙tabBar的详细讲解_Text

通过 barPosition来调整tabBar位置

barPosition:BarPosition.Start 在顶部/左侧
barPosition:BarPosition.End 在底部/右侧

@Entry
@Component
struct Index {
  build() {
     // barPosition:BarPosition.Start 在顶部
     // barPosition:BarPosition.End 在顶部
     Tabs({barPosition:BarPosition.End}){
       TabContent(){
         // TabContent下只能有一个子组件哈
         Text("我是消息中的内容")
       }.tabBar("消息")

       TabContent(){
         // TabContent下只能有一个子组件哈
         Text("我是联系人中的内容")
       }.tabBar("联系人")

       TabContent(){
         // TabContent下只能有一个子组件哈
         Text("我是动态中的内容")
       }.tabBar("动态")
     }
  }
}

鸿蒙tabBar的详细讲解_滑动切换_02

vertical 调整导航的位置，是水平(true)还是垂直(false)

@Entry
@Component
struct Index {
  build() {
     // barPosition:BarPosition.Start 在顶部/左侧
     // barPosition:BarPosition.End 在尾部/右侧

     Tabs({barPosition:BarPosition.End}){
       TabContent(){
         // TabContent下只能有一个子组件哈
         Text("我是消息中的内容")
       }.tabBar("消息")

       TabContent(){
         // TabContent下只能有一个子组件哈
         Text("我是联系人中的内容")
       }.tabBar("联系人")

       TabContent(){
         // TabContent下只能有一个子组件哈
         Text("我是动态中的内容")
       }.tabBar("动态")
     }.vertical(true) // 调整导航的位置，是水平(true)还是垂直(false)；
  }
}

鸿蒙tabBar的详细讲解_滑动切换_03

scrollable：是否通过手势滑动切换内容

@Entry
@Component
struct Index {
  build() {
     // barPosition:BarPosition.Start 在顶部/左侧
     // barPosition:BarPosition.End 在顶部/右侧
     Tabs({barPosition:BarPosition.End}){
       TabContent(){
         // TabContent下只能有一个子组件哈
         Text("我是消息中的内容")
       }.tabBar("消息")

       TabContent(){
         // TabContent下只能有一个子组件哈
         Text("我是联系人中的内容")
       }.tabBar("联系人")

       TabContent(){
         // TabContent下只能有一个子组件哈
         Text("我是动态中的内容")
       }.tabBar("动态")
     }.vertical(false) // 调整导航的位置，是水平(true)还是垂直(false)；
      .scrollable(false) // 是否通过手势滑动切换(手指向右向左可以滑动) false不允许；true可以
  }
}

animationDuration：切换动画的时间

@Entry
@Component
struct Index {
  build() {
     // barPosition:BarPosition.Start 在顶部/左侧
     // barPosition:BarPosition.End 在顶部/右侧
     //
     Tabs({barPosition:BarPosition.End}){
       TabContent(){
         // TabContent下只能有一个子组件哈
         Text("我是消息中的内容")
       }.tabBar("消息")

       TabContent(){
         // TabContent下只能有一个子组件哈
         Text("我是联系人中的内容")
       }.tabBar("联系人")

       TabContent(){
         // TabContent下只能有一个子组件哈
         Text("我是动态中的内容")
       }.tabBar("动态")
     }.vertical(false) // 调整导航的位置，是水平(true)还是垂直(false)；
      .scrollable(false) // 是否通过手势滑动切换(手指向右向左可以滑动) false不允许；true可以
      .animationDuration(300) // 切换动画的时间，毫秒
  }
}

很多时候，特别是新闻类的app;
会有很多的tabBar他们是可以进行滚动切换的。
我们可以通过barMode(BarMode.Scrollable)来进行设置，让它滚动
请看下面的例子

很多Tabs标签的时候可以进行滚动

@Entry
@Component
struct Index {
  @State titleArr:string[]=['首页1','首页12','首页13','首页14','首页15','首页16','首页17','首页18','首页19',]
  build() {
     Tabs({barPosition:BarPosition.Start}){
       ForEach(this.titleArr,(item:string, index:number)=>{
           TabContent(){
             // TabContent下只能有一个子组件哈
             Text(`我是${item}中的内容`)
           }.tabBar(item)
       })
     }.vertical(false) // 调整导航的位置，是水平(true)还是垂直(false)；
      .scrollable(true) // 是否通过手势滑动切换(手指向右向左可以滑动) false不允许；true可以
      .barMode(BarMode.Scrollable)
  }
}

鸿蒙tabBar的详细讲解_Text_04

TabBar相关的事件

onTabBarClick事件是Tab页签点击后触发的事件。

Tabs(){}
  .onTabBarClick((order:number)=>{
     // 多次重新点击也会触发，order表示的是点击的tabBar元素下标
     console.log('你点击了这个tab', order)
   })

鸿蒙tabBar的详细讲解_Text_05

onChange事件，Tab页签切换后触发的事件。

语法：onChange(event: (index: number) => void)
满足以下任一条件，即可触发该事件：
1、滑动页面进行页面切换时，组件滑动动画结束后触发。
2、通过控制器调用changeIndex接口，Tab页签切换后触发。
3、动态修改状态变量构造的index属性值，Tab页签切换后触发。
4、点击TabBar页签，Tab页签切换后触发。
特殊说明：
使用自定义页签时，在onChange事件中联动可能会导致滑动页面切换后才执行页签联动，引起自定义页签切换效果延迟。
建议在onAnimationStart中监听并刷新当前索引，以确保动效能够及时触发

更改svg图标的颜色

fillColor(value: ResourceColor)
设置填充颜色，设置后填充颜色会覆盖在图片上。仅对svg图源生效，设置后会替换svg图片中所有可绘制元素的填充颜色。
如需对png图片进行修改颜色，可以使用colorFilter。

Image($r("app.media.图标名称")).width(26).height(26).margin({bottom:20}).fillColor(Color.Red)
Image($r("app.media.图标名称")).width(26).height(26).margin({bottom:20}).fillColor(Color.Pink)

切换实现TabBar高亮效果

实现的思路是：通过onChange事件记录当前点击的是哪一个TabBar
然后通过fillColor属性控制svg图片的颜色，点击的那个TabBar进行变色。
fontColor控制文本的颜色，下面我们就一起来看下

@Entry
@Component
struct Index {
  @State selectIndex:number = 0
  @State activeTextColor:string = "#f9f"
  @Builder
  customBuilder(title:string,iconUrl:string,index:number){
    Column(){
      // rgba(0,0,0,0.9019607843137255)
      Image($r(iconUrl)).width(20).fillColor(this.selectIndex==index ? this.activeTextColor : '')
      Text(title)
        .fontColor(this.selectIndex==index ? this.activeTextColor : '#000') // 更改文字的颜色，通过下标来更改哈
    }
  }
  build() {
     Tabs({ barPosition:BarPosition.End}){
       TabContent(){
         Text("历史内容")
       }.tabBar(this.customBuilder('历史', 'app.media.history',0))

       TabContent(){
         Text("更多内容")
       }.tabBar(this.customBuilder('更多', 'app.media.more',1))
     }.onChange((index:number)=>{
       // 这个事件是在切换的时候就会被触发，可以得到索引，从下标是0开始
       this.selectIndex = index
       console.log('索引', index)
     })
  }
}