#鸿蒙通关秘籍#如何自定义鸿蒙Tabs组件的导航栏样式?

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
BIOS寒烟翠

通过使用tabBar的CustomBuilder参数可以自定义导航栏样式。自定义函数组件里可以传入自定义的图标和标签样式,并利用currentIndex来决定UI显示样式。

javascript @Builder tabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) { Column() { Image(this.currentIndex === targetIndex ? selectedImg : normalImg) .size({ width: 25, height: 25 }) Text(title) .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B') } }

TabContent() { Column(){ Text('我的内容')
} .tabBar(this.tabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal'))) }

分享
微博
QQ
微信
回复
2天前
相关问题
Tabs组件自定义导航UI问题
798浏览 • 1回复 待解决
如何自定义Video组件控制样式
2397浏览 • 1回复 待解决
鸿蒙组件toast自定义样式
8793浏览 • 1回复 待解决