在做一個(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的索引境析，沒當(dāng)這個(gè)值變化，UI就會(huì)自動(dòng)的刷新派诬，在build中我們?cè)谡{(diào)用自定義Tab生成方法的時(shí)候看到了app.media.icon_home_p這樣的字樣劳淆，實(shí)際上就是放在如下圖所示的文件夾中即可：
app.media
最后就得到了下圖的效果：
最終效果
