鸿蒙-搭建一个TabController

在做一个App的时候，一般底部Tab这种框架是非常普遍的方式，这篇文章就实现一下如何在鸿蒙中实现一个自定义的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)
  }
}

在代码中最前面是导入了2个组件，其实就是2个Tabbar对应的内容，在struct中声明了一个State修饰的currentIndex属性，是用来记录当前点击的tab的索引，没当这个值变化，UI就会自动的刷新，在build中我们在调用自定义Tab生成方法的时候看到了app.media.icon_home_p这样的字样，实际上就是放在如下图所示的文件夹中即可：

app.media
最后就得到了下图的效果：
最终效果