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

相关推荐
Georgewu7 小时前
【HarmonyOS 6】 The target can not be empty. check the build.profile,json5 file of
harmonyos
Georgewu7 小时前
【HarmonyOS 6】Install Failed: error: failed to install bundle.code:9568322
harmonyos
爱笑的眼睛119 小时前
HarmonyOS 应用开发新范式:深入剖析 Stage 模型与 ArkTS 状态管理
华为·harmonyos
爱笑的眼睛1110 小时前
深入浅出 HarmonyOS ArkUI 3.0:基于声明式开发范式与高级状态管理构建高性能应用
华为·harmonyos
电手12 小时前
时隔4年麒麟重新登场!华为这8.8英寸新「手机」给我看麻了
华为·智能手机
程序员潘Sir13 小时前
鸿蒙应用开发从入门到实战(一):鸿蒙应用开发概述
harmonyos
敲代码的鱼哇16 小时前
跳转原生系统设置插件 支持安卓/iOS/鸿蒙UTS组件
android·ios·harmonyos
在下历飞雨17 小时前
Kuikly基础之状态管理与数据绑定:让“孤寡”计数器动起来
ios·harmonyos
在下历飞雨17 小时前
Kuikly基础之Kuikly DSL基础组件实战:构建青蛙主界面
ios·harmonyos
HarmonyOS小助手18 小时前
HEIF:更高质量、更小体积,开启 HarmonyOS 图像新体验
harmonyos·鸿蒙·鸿蒙生态