鸿蒙开发之ArkUI 界面篇三十六抖音极速版底部tabs

要实现的界面图下图右侧红框处：

切换有高亮，中间和另外4个还不一样，没有文字，企业四个有文字和图片，那就是需要自定tabBar，定义个需要使用Builder修饰的函数，函数没有返回值，也没没有fuction关键字，就是一个名字加需要的参数，在函数体内是Colum+Image+Text，中间那个自定就只是Bulider修饰的函数只需要一个Image展示图片即可，完整代码如下：

复制代码

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

  @Builder
  myBuilder (itemIndex: number, title: string, img: ResourceStr, selImg: ResourceStr) {
    // 如果激活的是自己, 图片/文本 都需要调整样式 → 需要区分不同的 tabBar
    Column() {
      Image(itemIndex == this.selectedIndex ? selImg : img)
        .width(30)
      Text(title)
        .fontColor(itemIndex == this.selectedIndex ? Color.Red : Color.Black)
    }
  }

  @Builder
  centerBuilder () {
    Image($r('app.media.ic_reuse_02'))
      .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')))

      // 特殊形状的Tab
      TabContent() {
        Text('赚钱界面')
      }
      .tabBar(this.centerBuilder())

      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')))
    }
    .onChange((index: number) => {
      // console.log('激活的索引', index)
      this.selectedIndex = index
    })
    .animationDuration(0)
    .scrollable(false)
  }
}

总结：鸿蒙tabs控件已经能够实现主流app的tab导航功能，包括小米优品、今日头条极速版底部那样的tab导航功能，切换的高亮效果需自定一tabBar来实现，完成高亮的本质就是点击的或者是滑动的时候更换对应的icon和文字效果。自定义bar语法是Bulider修饰的函数，这个函数没有返回值，没有function修饰，自定的tabBar函数体内是任何的组件或者是容器。

鸿蒙开发之ArkUI 界面篇 三十六 抖音极速版底部tabs

鸿蒙开发之ArkUI 界面篇三十六抖音极速版底部tabs