在做一个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
最后就得到了下图的效果：
最终效果
