HarmonyOS TabContent如何设置选定图标和未选定图标?

HarmonyOS TabContent如何设置选定图标和未选定图标?

HarmonyOS
2024-08-09 15:51:53
1022浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
Heiang

代码参考:

//选定目标 
@State currentIndex: number = CommonConstants.HOME_TAB_INDEX; 
private tabsController: TabsController = new TabsController(); 
@Builder TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) { 
  Column() { 
    Image(this.currentIndex === index ? selectedImg : normalImg) 
    Text(title) 
      .fontColor(this.currentIndex === index ? $r('app.color.mainPage_selected') : $r('app.color.mainPage_normal')) 
  } 
  .onClick(() => { 
    this.currentIndex = index; 
    this.tabsController.changeIndex(this.currentIndex); 
  }) 
} 
//对选定图标设置选定图片,对未选定图标设置正常图片 
TabContent.tabBar(this.TabBuilder(CommonConstants.HOME_TITLE, CommonConstants.HOME_TAB_INDEX, 
  $r('app.media.home_selected'), $r('app.media.home_normal')))
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

设置图标大小的代码:

@Builder TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) { 
  Column() { 
    Image(this.currentIndex === index ? selectedImg : normalImg) 
      .width($r('app.float.mainPage_baseTab_size')) 
      .height($r('app.float.mainPage_baseTab_size')) //设置图片高度 
    Text(title) 
      .margin({ top: $r('app.float.mainPage_baseTab_top') }) 
      .fontSize($r('app.float.main_tab_fontSize')) // 设置字体大小 
  } 
  .height($r('app.float.mainPage_barHeight')) // 设置tabBar高度 
  .onClick(() => { 
    this.currentIndex = index; 
    this.tabsController.changeIndex(this.currentIndex); 
  }) 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
分享
微博
QQ
微信
回复
2024-08-09 19:26:55


相关问题
HarmonyOS 设置的应用图标名称无效
693浏览 • 1回复 待解决
元服务上架时启动图标应用图标
316浏览 • 1回复 待解决
HarmonyOS APP在设置里的图标如何设置
516浏览 • 1回复 待解决
HarmonyOS 状态栏图标颜色设置
960浏览 • 1回复 待解决
如何配置桌面图标的快速启动图标
2425浏览 • 1回复 待解决
HarmonyOS 怎么进行图标图片适配
555浏览 • 1回复 待解决
HarmonyOS 如何配置分层图标
674浏览 • 1回复 待解决
radioButton可以单独设置图标大小吗
8924浏览 • 1回复 待解决
XML CheckBox 图标间隔能设置吗?
5005浏览 • 1回复 待解决
HarmonyOS如何动态改变图标
1047浏览 • 1回复 待解决
HarmonyOS图标定位怎么使用
1319浏览 • 1回复 待解决
HarmonyOS svg图标
838浏览 • 1回复 待解决