HarmonyOS鸿蒙Next中TabBarOptions点击切换怎么修改图片资源

TabBarOptions点击切换怎么修改图片资源

@Builder
navigationContent() {
  AtomicServiceTabs({
    tabContents: [
      () => {
        this.tabContent1()
      },
      () => {
        this.tabContent2()
      }
    ],
    tabBarOptionsArray: [
      // 点击切换怎么修改图片资源
      new TabBarOptions($r('sys.media.ohos_ic_public_phone'), '功能1'),
      new TabBarOptions($r('sys.media.ohos_ic_public_location'), '功能2', Color.Green, Color.Red)
    ],
    tabBarPosition: TabBarPosition.BOTTOM,
    barBackgroundColor: $r('sys.color.ohos_id_color_bottom_tab_bg'),
    onTabBarClick: (index: Number) => {
      if (index == 0) {
        this.message = '功能1';
      } else if (index == 1) {
        this.message = '功能2';
      }
    }
  })
}

更多关于HarmonyOS鸿蒙Next中TabBarOptions点击切换怎么修改图片资源的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 1楼•8 天前

您好！

TabBarOptions的属性中不支持设置多个图标，您可以使用三元表达式来实现；

其属性定义为：

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	必填	说明
icon	ResourceStr	是	页签内的图片内容
text	ResourceStr	是	页签内的文字内容。
unselectedColor	ResourceColor	是	未选择时的页签颜色。
selectedColor	ResourceColor	是	被选择时的页签颜色。

以下是我根据官网demo，改动了下您看是否能达到您想要的效果：

// Index.ets
import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State message: string = '首页';
  @State onClickNumber: number = 0;
  @State currentIndex: number = 0;
  @State comingIndex: number = 0;
  onContentWillChangeCallBack: OnContentWillChangeCallback = (currentIndex: number, comingIndex: number): boolean => {
    this.currentIndex = currentIndex;
    this.comingIndex = comingIndex;
    console.log('OnContentWillChangeCallback')
    return true;
  }
  onTabClick: Callback<number> = (index: number) => {
    this.onClickNumber++;
    console.log('onTabClick: ' + index);
  }

  @Builder
  tabContent1() {
    Column().width('100%').height('100%').alignItems(HorizontalAlign.Center).backgroundColor('#00CB87')
  }

  @Builder
  tabContent2() {
    Column().width('100%').height('100%').backgroundColor('#007DFF')
  }

  @Builder
  tabContent3() {
    Column().width('100%').height('100%').backgroundColor('#FFBF00')
  }

  build() {
    Stack() {
      AtomicServiceTabs({
        tabContents: [
          () => {
            this.tabContent1()
          },
          () => {
            this.tabContent2()
          },
          () => {
            this.tabContent3()
          }
        ],
        tabBarOptionsArray: [
          new TabBarOptions(this.comingIndex ? $r('sys.media.ohos_ic_public_phone') : $r('app.media.startIcon'), '绿色', Color.Black, Color.Blue),
          new TabBarOptions($r('sys.media.ohos_ic_public_location'), '蓝色', Color.Black, Color.Blue),
          new TabBarOptions($r('sys.media.ohos_ic_public_more'), '黄色', Color.Black, Color.Blue)
        ],
        tabBarPosition: TabBarPosition.BOTTOM,
        barBackgroundColor: $r('sys.color.ohos_id_color_bottom_tab_bg'),
        onTabBarClick: this.onTabClick,
        onContentWillChange: this.onContentWillChangeCallBack,
      })
      Column() {
        Text("onchange回调次数:" + this.onClickNumber)
        Text("comingIndex = " + this.comingIndex + ", currentIndex = " + this.currentIndex)
      }.margin({ top: 500 })
    }.height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中TabBarOptions点击切换怎么修改图片资源的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

songsunli 2楼•8 天前

在HarmonyOS鸿蒙Next中，修改TabBarOptions点击切换的图片资源可以通过以下步骤实现：

准备图片资源：首先，确保你已经在resources目录下准备好了所需的图片资源，包括默认状态和选中状态的图片。
配置TabBarOptions：在ability_main.xml或对应的布局文件中，找到TabBarOptions的配置部分。
设置图片资源：在TabBarOptions中，通过icon属性设置默认状态的图片资源，通过selectedIcon属性设置选中状态的图片资源。例如：
```
<TabBarOptions
    icon="$media:tab_home_normal"
    selectedIcon="$media:tab_home_selected" />
```
其中，tab_home_normal和tab_home_selected是你在resources目录中定义的图片资源名称。
绑定点击事件：在代码中，确保你已经为TabBarOptions绑定了点击切换的事件处理逻辑，通常是通过setOnTabSelectedListener方法来实现。
验证效果：运行应用，点击TabBarOptions，观察图片是否在默认状态和选中状态之间正确切换。

通过以上步骤，你可以在HarmonyOS鸿蒙Next中成功修改TabBarOptions点击切换的图片资源。

gougou168 3楼•8 天前

在HarmonyOS鸿蒙Next中，修改TabBarOptions点击切换的图片资源可以通过setTabBarItem方法实现。首先，准备两张图片资源（未选中和选中状态），然后使用setTabBarItem方法为每个Tab项设置对应的图片资源。示例代码如下：

tabBar.setTabBarItem({
  index: 0, // Tab项的索引
  icon: $r('app.media.tab_icon_normal'), // 未选中状态的图片
  selectedIcon: $r('app.media.tab_icon_selected') // 选中状态的图片
});

通过这种方法，可以在Tab切换时动态修改图片资源。