4、HarMony 自定义Tabbar

添加 Tabbar 的全部代码 ，希望能够帮到你

import { media } from '@kit.MediaKit'
import HKBookPage from '../pages/book/HKBookPage'
import HKMessagePage from '../pages/home/HKMessagePage'
import HKMinePage from '../pages/mine/HKMinePage'
import HKWorkPage from '../pages/work/HKWorkPage'


@Entry
@Component
export default struct HKTabBar {

  /**默认字体颜色*/
  @State fontColor: string = '#182431'
  /**选中字体颜色*/
  @State selectedFontColor: string = '#007DFF'
  /**默认选中第一个*/
  @State currentIndex: number = 0

  private controller: TabsController = new TabsController()


  @State items :Array<HKTabBarModel> = [
    {
      icon:'app.media.tab_message',
      selectedIcon:'app.media.tab_message_select',
      text:"首页"
    },

    {
      icon:'app.media.tab_work',
      selectedIcon:'app.media.tab_work_select',
      text:"工作台"
    },
    {
      icon:'app.media.tab_book',
      selectedIcon:'app.media.tab_book_select',
      text:"通讯录"
    },
    {
      icon:'app.media.tab_mine',
      selectedIcon:'app.media.tab_mine_select',
      text:"我的"
    }

  ]

  @Builder TabBuilder(index: number) {
    Column() {
      Image($r(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(){
           // 消息页面
            HKMessagePage()
        }
        .tabBar(this.TabBuilder(0))

        TabContent(){
          // 工作页面
          HKWorkPage()
        }
        .tabBar(this.TabBuilder(1))

        TabContent(){
          // 通讯录
          HKBookPage()
        }

          .tabBar(this.TabBuilder(2))

        TabContent(){
          // 我的页面
          HKMinePage()
        }.tabBar(this.TabBuilder(3))

      }
      .vertical(false)
      .barHeight(56)
      .onChange((index: number) => {

        //选中tabBar index
        this.currentIndex = index
      })
      .width("100%")
      .height("100%")
      .backgroundColor('#F1F3F5')
      .margin({ bottom: 0 })
    }.width('100%')
    .height('100%')
  }
}

interface HKTabBarModel {

  icon:string,
  selectedIcon:string,
  text:string
}