在做一個(gè)App的時(shí)候，一般底部Tab這種框架是非常普遍的方式，這篇文章就實(shí)現(xiàn)一下如何在鴻蒙中實(shí)現(xiàn)一個(gè)自定義的TabbarController架子，直接上代碼：

import {Musical} from './musical/musical'
import {Mine} from './mine/mine'

@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private tabController = new TabsController()
  @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({ width: 30, height: 30 })
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
        .fontSize(13)
        .margin(3)
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(()=>{
      this.currentIndex = targetIndex
      this.tabController.changeIndex(targetIndex)
    })
  }

  build() {
    Tabs({ barPosition: BarPosition.End,controller: this.tabController,index:0 }) {
      TabContent() {
        Musical()
      }
      .tabBar(this.TabBuilder('彈唱', 0, $r('app.media.icon_home_p'), $r('app.media.icon_home')))
      TabContent() {
        Mine()
      }
      .tabBar(this.TabBuilder('我的', 1, $r('app.media.icon_mine_p'), $r('app.media.icon_mine')))
    }
    .scrollable(false)
  }
}

在代碼中最前面是導(dǎo)入了2個(gè)組件，其實(shí)就是2個(gè)Tabbar對(duì)應(yīng)的內(nèi)容，在struct中聲明了一個(gè)State修飾的currentIndex屬性，是用來(lái)記錄當(dāng)前點(diǎn)擊的tab的索引，沒(méi)當(dāng)這個(gè)值變化，UI就會(huì)自動(dòng)的刷新，在build中我們?cè)谡{(diào)用自定義Tab生成方法的時(shí)候看到了app.media.icon_home_p這樣的字樣，實(shí)際上就是放在如下圖所示的文件夾中即可：

app.media

最終效果