HarmonyOS 鸿蒙Next TabContent如何设置选定图标和未选定图标？

HarmonyOS 鸿蒙Next TabContent如何设置选定图标和未选定图标？ 目前已掌握设置选定图标 但是不知道如何设置未选定图标 请问TabContent如何设置选定图标和未选定图标？

2 回复

参考下面思路，验证一下

//选定目标

@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’)))

更多关于HarmonyOS 鸿蒙Next TabContent如何设置选定图标和未选定图标？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中，为Next TabContent设置选定图标和未选定图标，可以通过以下方式实现：

  1. XML布局方式：
    • 在XML布局文件中，为TabContent的每个TabItem设置selectedIcon和unselectedIcon属性。
    • selectedIcon指定选定状态下的图标资源。
    • unselectedIcon指定未选定状态下的图标资源。

例如：

<TabContent>
    <TabItem
        selectedIcon="$media:selected_icon"
        unselectedIcon="$media:unselected_icon"
        text="Tab 1"/>
    <TabItem
        selectedIcon="$media:selected_icon2"
        unselectedIcon="$media:unselected_icon2"
        text="Tab 2"/>
</TabContent>

注意：$media:前缀表示图标资源位于media目录下。

  1. ArkUI（JavaScript）方式：
    • 使用ArkUI框架时，可以通过编程方式设置每个TabItem的选定和未选定图标。
    • 创建TabContent实例后，遍历TabItems并设置相应的图标属性。

请确保图标资源已正确添加到项目中，并且路径正确无误。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部