HarmonyOS中实现TabBar（相当于Android中的TabLayout+ViewPager）

aidou13142025-01-11 12:03

1.自定义组件TabBarView

TypeScript 复制代码

@Component
export struct TabBarView{
  @State currentIndex: number = 0
  @State selectedIndex: number = 0
  private controller: TabsController = new TabsController()

  //tab标签内容+横线布局
  @Builder tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.selectedIndex === index ? '#007DFF' : '#182431')
        .fontSize(18)
        .fontWeight(this.selectedIndex === index ? 500 : 400)
        .lineHeight(22)
        .height('95%')
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.selectedIndex === index ? 1 : 0)
    }
    .backgroundColor(Color.White)
    .width('100%')
    .height('100%')
  }

  @Link arr: Array<string>
  @Builder tabItem(item: string) {}
  @BuilderParam item: (item: string) => void = this.tabItem

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        ForEach(this.arr, (item: string, index: number) => {
          TabContent() {
            this.item(item)
          }.tabBar(this.tabBuilder(index, item))
        }, (item: string, index: number) => index.toString())
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .onChange((index: number) => {
        // currentIndex控制TabContent显示页签
        this.currentIndex = index
        this.selectedIndex = index
      })
      .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
        if (index === targetIndex) {
          return
        }
        // selectedIndex控制自定义TabBar内Image和Text颜色切换
        this.selectedIndex = targetIndex
      })
      .width('100%')
      .height('100%')
      .backgroundColor('#F1F3F5')
    }.width('100%')
  }
}

2.组件中使用

TypeScript 复制代码

import { TabBarView } from "./TabBarView"
@Entry({routeName: 'IndexPage'})

@Component
export struct IndexPage{

  @State arr: Array<string> = ['标签1', '标签2']
  @Builder
  tabItem(item: string){
    //在此处写各个标签对于的布局组件，可抽离出来使代码简洁
    if (item === this.arr[0]){
      //标签1组件
    }else if (item === this.arr[1]){
      //标签2组件
    }
  }
  build() {
    Column(){
      TabBarView({arr: this.arr, item: this.tabItem})
    }
  }
}

说明：我是根据官网提供的Tabs实例代码1（自定义页签切换联动） 封装的简单使用（代码可直接使用），这种方式是为了复用。