1、鸿蒙tabbar 封装

1 、添加tabbar

    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent(){
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }
        .tabBar(this.TabBuilder(0))
        TabContent(){
          Column().width('100%').height('100%').backgroundColor(Color.Red)
        }
          .tabBar(this.TabBuilder(1))
        TabContent()
          .tabBar(this.TabBuilder(2))
        TabContent()
          .tabBar(this.TabBuilder(3))
        TabContent()
          .tabBar(this.TabBuilder(4))
      }
      .vertical(false)
      .barHeight(56)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width("100%")
      .height("100%")
      .backgroundColor('#F1F3F5')
      .margin({ bottom: 0 })
    }.width('100%')
    .height('100%')

2 、tabbar的点击事件

 @Builder TabBuilder(index: number) {
    Column() {
      Image(this.currentIndex === index ? this.items[index]["selectedIcon"] : this.items[index]["icon"])
        .width(24)
        .height(24)
        .margin({ bottom: 4 })
        .objectFit(ImageFit.Contain)
      Text(this.items[index]["text"])
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }

3 、数据配置

 /// 配置数据
  @State items:Array<Object> =[
    {
      icon:$r("app.media.tabbarc_home_normal"),
      selectedIcon:$r("app.media.tabbar_home_selected"),
      text:"首页"
    },
    {
      icon:$r("app.media.tabbar_category_normal"),
      selectedIcon:$r("app.media.tabbar_category_selected"),
      text:"品类"
    },
    {
      icon:$r("app.media.tabbar_cart_normal"),
      selectedIcon:$r("app.media.tabbar_cart_selected"),
      text:"购物车"
    },
    {
      icon:$r("app.media.tabbar_info_normal"),
      selectedIcon:$r("app.media.tabbar_info_selected"),
      text:"朋友圈"
    },
    {
      icon:$r("app.media.tabbar_mine_normal"),
      selectedIcon:$r("app.media.tabbar_mine_selected"),
      text:"我的"
    }
  ]

4 、完整代码

struct TabbarController {

  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  /// 配置数据
  @State items:Array<Object> =[
    {
      icon:$r("app.media.tabbarc_home_normal"),
      selectedIcon:$r("app.media.tabbar_home_selected"),
      text:"首页"
    },
    {
      icon:$r("app.media.tabbar_category_normal"),
      selectedIcon:$r("app.media.tabbar_category_selected"),
      text:"品类"
    },
    {
      icon:$r("app.media.tabbar_cart_normal"),
      selectedIcon:$r("app.media.tabbar_cart_selected"),
      text:"购物车"
    },
    {
      icon:$r("app.media.tabbar_info_normal"),
      selectedIcon:$r("app.media.tabbar_info_selected"),
      text:"朋友圈"
    },
    {
      icon:$r("app.media.tabbar_mine_normal"),
      selectedIcon:$r("app.media.tabbar_mine_selected"),
      text:"我的"
    }
  ]

  @Builder TabBuilder(index: number) {
    Column() {
      Image(this.currentIndex === index ? this.items[index]["selectedIcon"] : this.items[index]["icon"])
        .width(24)
        .height(24)
        .margin({ bottom: 4 })
        .objectFit(ImageFit.Contain)
      Text(this.items[index]["text"])
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent(){
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }
        .tabBar(this.TabBuilder(0))
        TabContent(){
          Column().width('100%').height('100%').backgroundColor(Color.Red)
        }
          .tabBar(this.TabBuilder(1))
        TabContent()
          .tabBar(this.TabBuilder(2))
        TabContent()
          .tabBar(this.TabBuilder(3))
        TabContent()
          .tabBar(this.TabBuilder(4))
      }
      .vertical(false)
      .barHeight(56)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width("100%")
      .height("100%")
      .backgroundColor('#F1F3F5')
      .margin({ bottom: 0 })
    }.width('100%')
    .height('100%')
  }
}