#鸿蒙通关秘籍# 在HarmonyOS NEXT中,如何为TabBar中的每个Tab设置不同的图标和颜色?

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
忙忙忙困困困


这是我的一个代码demo,希望可以给你提供思路和帮助。

先看效果图:

@Entry
@Componentstruct    Tab {  
@State selectedIndex:number=0  
@Builder  
myBuilder(itemIndex:number,item:string,photo:ResourceStr,photoed:ResourceStr){   
Column(){     
// Image($r(photo))     
Image(itemIndex==this.selectedIndex?photoed:photo)      
.width(30)     
Text(item)       
.fontColor( itemIndex == this.selectedIndex?Color.Red:Color.Black)  
} 
} 
@Builder 
centerBuilder()
{   
Image($r('app.media.xm'))    
.width(50)     
.height(50)    
.borderRadius(50)     
.margin({bottom:5})  }
  build() {   
Tabs({barPosition:BarPosition.End}){      
TabContent(){       Text('首页内容')     }
.tabBar(this.myBuilder(0,'首页',$r('app.media.ic_tabbar_icon_0'),$r('app.media.ic_tabbar_icon_0_selected')))    
TabContent(){        Text('分类内容')      }
.tabBar(this.myBuilder(1,'分类',$r('app.media.ic_tabbar_icon_1'),$r('app.media.ic_tabbar_icon_1_selected')))
TabContent(){        Text('活动内容')      }
.tabBar(this.centerBuilder())
TabContent(){        Text('购物车内容')      }
.tabBar(this.myBuilder(3,'购物车',$r('app.media.ic_tabbar_icon_2'),$r('app.media.ic_tabbar_icon_2_selected')))     
TabContent(){        Text('我的内容')      }
.tabBar(this.myBuilder(4,'我的',$r('app.media.ic_tabbar_icon_3'),$r('app.media.ic_tabbar_icon_3_selected')))    }    
.animationDuration(0)    
.scrollable(false)   
.onChange((index:number)=>{        this.selectedIndex=index    })  }}


分享
微博
QQ
微信
回复
1天前
相关问题
Tab组件Tabbar字体颜色如何修改
1168浏览 • 1回复 待解决