HarmonyOS 鸿蒙Next Tab有多个TabContent,ForEach循环场景下通过构建函数自定义TabBar的icon图片不显示，当在函数里单独用$tr使用却没有问题

HarmonyOS 鸿蒙Next Tab有多个TabContent,ForEach循环场景下通过构建函数自定义TabBar的icon图片不显示，当在函数里单独用$tr使用却没有问题

构建函数自定义tabbar里面的图片不显示

  • tab里使用ForEach遍历渲染代码如下：
Tabs({
    index: this.activeIndex,
    barPosition: BarPosition.End,
}) {
  ForEach(mainViewModel.tabTitle, (item: TabItem,index:number) => {
    TabContent(){
      Column() {
        Text(item.title).fontSize(50)
      }
    }
    .tabBar(this.TabBuilder(item,index))
  })
}
  • 自定义tabbar构建函数如下
@Builder TabBuilder(item: TabItem, index: number) {
  Column() {
    Image(this.activeIndex === item.index ? $r('app.media.icon_home_active') : $r('app.media.icon_home')) => 这行是能正常显示图片
    // Image(this.activeIndex == item.index ? item.imageActivated : item.imageOriginal) => 这样写却不显示图片
      .width(size.middlIconSize)
      .height(size.middlIconSize)
      .margin({top:size.smallPadding,bottom:size.smallPadding})
    Text(item.title)
      .fontColor(this.activeIndex === index ? colors.tabSelectedColor : colors.tabNormalColor)
      .fontSize(size.normalFontSize)
      .fontWeight(500)
      .textAlign(TextAlign.Center)
      .padding({bottom:size.pagePadding})
  }
  .width('100%')
  .justifyContent(FlexAlign.Center)
}
  • 附上声明的tab数组数据如下：
export class MainViewModel {
  /**
   * 首页底部Tab显示数据
   */
  tabTitle = [
    {
      index: 0,
      title: "首页",
      imageActivated: $r('app.media.icon_home_active'),
      imageOriginal: $r('app.media.icon_home')
    },
    {
      index: 1,
      title: "电影",
      imageActivated: $r('app.media.icon_movie_active'),
      imageOriginal: $r('app.media.icon_movie')
    },
    {
      index: 2,
      title: "电视剧",
      imageActivated: $r('app.media.icon_tv_active'),
      imageOriginal: $r('app.media.icon_tv')
    },
    {
      index: 3,
      title: "我的",
      imageActivated: $r('app.media.icon_user_active'),
      imageOriginal: $r('app.media.icon_user')
    }
  ]
}

let mainViewModel = new MainViewModel();

export default mainViewModel as MainViewModel;

更多关于HarmonyOS 鸿蒙Next Tab有多个TabContent,ForEach循环场景下通过构建函数自定义TabBar的icon图片不显示，当在函数里单独用$tr使用却没有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

可以出来的

export class MainViewModel {
  /**
   * 首页底部Tab显示数据
   */
  tabTitle = [
    {
      index: 0,
      title: "首页",
      imageActivated: $r('app.media.icon'),
      imageOriginal: $r('app.media.icon')
    },
    {
      index: 1,
      title: "电影",
      imageActivated: $r('app.media.icon'),
      imageOriginal: $r('app.media.icon')
    },
    {
      index: 2,
      title: "电视剧",
      imageActivated: $r('app.media.icon'),
      imageOriginal: $r('app.media.icon')
    },
    {
      index: 3,
      title: "我的",
      imageActivated: $r('app.media.icon'),
      imageOriginal: $r('app.media.icon')
    }
  ]
}

let mainViewModel = new MainViewModel();

export default mainViewModel as MainViewModel;

@Entry
@Component
struct Page3 {

  @State activeIndex: number = 0;

  @Builder TabBuilder(item, index: number) {
    Column() {
    Image(this.activeIndex == index ? item.imageActivated : item.imageOriginal)
      .width(20)
    Text(item.title)
      .fontWeight(500)
      .textAlign(TextAlign.Center)
  }
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Tabs({
      index: this.activeIndex,
      barPosition: BarPosition.End,
    }) {
      ForEach(mainViewModel.tabTitle, (item,index:number) => {
        TabContent(){
          Column() {
            Text(item.title).fontSize(50)
          }
        }
        .tabBar(this.TabBuilder(item,index))
      })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next Tab有多个TabContent,ForEach循环场景下通过构建函数自定义TabBar的icon图片不显示，当在函数里单独用$tr使用却没有问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用ForEach循环场景下通过构建函数自定义TabBar的icon图片不显示，但在函数里单独使用$tr却没有问题，可能是由于ForEach的渲染机制与TabBar的icon绑定方式不兼容导致的。ForEach在渲染时可能会重新创建组件实例，导致某些状态或资源未能正确绑定。

你可以尝试以下解决方法：

  1. 确保icon资源的路径和命名正确，并且在ForEach中正确引用。
  2. 使用@State或@Link装饰器来管理TabBar的状态，确保在ForEach循环中icon能够正确绑定。
  3. 如果icon资源是通过动态加载的，确保在ForEach的itemBuilder中正确加载并绑定资源。

如果问题仍然存在，可能需要进一步调试ForEach的渲染逻辑或检查TabBar的icon绑定机制。

回到顶部