HarmonyOS中实现TabBar(相当于Android中的TabLayout+ViewPager)

参考网址:自定义页签切换联动

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(自定义页签切换联动) 封装的简单使用(代码可直接使用),这种方式是为了复用。

相关推荐
yenggd3 小时前
sr mpls te隧道配置案例
网络·华为
爱笑的眼睛113 小时前
深入解析HarmonyOS应用开发:ArkTS语法精要与UI组件实践
华为·harmonyos
爱笑的眼睛113 小时前
深入浅出 ArkTS:构建响应式 HarmonyOS 应用的现代语法与实践
华为·harmonyos
优质网络系统领域创作者5 小时前
华为AC+AP无线网络组网与配置指南
华为
爱笑的眼睛118 小时前
深入浅出 ArkTS:HarmonyOS 应用开发的语言基石
华为·harmonyos
安卓开发者8 小时前
鸿蒙Next中使用Socket进行网络通信:完整指南与实战
华为·harmonyos
A懿轩A8 小时前
【HarmonyOS应用】《账理通》更新啦!
华为·harmonyos
安卓开发者9 小时前
鸿蒙NEXT Remote Communication Kit:打破设备壁垒,构筑无缝协同体验
华为·harmonyos
爱笑的眼睛119 小时前
HarmonyOS ArkTS深度解析:从语法特性到UI开发实践
华为·harmonyos
无风听海1 天前
HarmonyOS之LocalStorage
华为·harmonyos