HarmonyOS 鸿蒙Next 切换tabs时如何修改其他图片的背景图片

发布于 1周前 作者 zlyuanteng 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 切换tabs时如何修改其他图片的背景图片

当切换tabBar的时候，需要改正整个页面风格的背景图片，但是这样写
深色代码主题
复制
@Builder
tabLabel(title: string, targetIndex: number) {
if(targetIndex==0){
this.appResource = $r(‘app.media.ic_left_arrow’)


}else if(targetIndex==1){


}else if(targetIndex==2){


}

会提示不允许这种语法，所以应该怎么来实现


更多关于HarmonyOS 鸿蒙Next 切换tabs时如何修改其他图片的背景图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

可以参考此demo

[@Entry](/user/Entry)
[@Component](/user/Component)
struct TabsExample {
 [@State](/user/State) fontColor: string = '#182431'
 [@State](/user/State) selectedFontColor: string = '#007DFF'
 [@State](/user/State) currentIndex: number = 0
 private controller: TabsController = new TabsController()
 [@State](/user/State) imageRecourse:Resource = $rawfile('B.jpg')
 [@Builder](/user/Builder) tabBuilder(index: number, name: string) {
   Column() {
     Text(name)
       .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
       .fontSize(16)
       .fontWeight(this.currentIndex === index ? 500 : 400)
       .lineHeight(22)
       .margin({ top: 17, bottom: 7 })
     Divider()
       .strokeWidth(2)
       .color('#007DFF')
       .opacity(this.currentIndex === index ? 1 : 0)
   }.width('100%')
 }

 build() {
   Column() {
     Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
       TabContent() {
         Column().width('100%').height('100%').backgroundColor('#00CB87')
       }.tabBar(this.tabBuilder(0, 'green'))

       TabContent() {
         Column().width('100%').height('100%').backgroundColor('#007DFF')
       }.tabBar(this.tabBuilder(1, 'blue'))

       TabContent() {
         Column().width('100%').height('100%').backgroundColor('#FFBF00')
       }.tabBar(this.tabBuilder(2, 'yellow'))

       TabContent() {
         Column().width('100%').height('100%').backgroundColor('#E67C92')
       }.tabBar(this.tabBuilder(3, 'pink'))
     }
     .vertical(false)
     .barMode(BarMode.Fixed)
     .barWidth(360)
     .barHeight(56)
     .animationDuration(400)
     .onChange((index: number) => {
       this.currentIndex = index
       console.log(this.currentIndex.toString())
       if(this.currentIndex == 1) {
         this.imageRecourse = $rawfile('C.jpg')
       } else if (this.currentIndex == 0) {
         this.imageRecourse = $rawfile('B.jpg')
       }
     })
     .width(360)
     .height(296)
     .margin({ top: 52 })
     .backgroundColor('#F1F3F5')

     Image(this.imageRecourse).width('100px').height('100px')

     Button('更改').onClick(()=>{
       this.imageRecourse = $rawfile('C.jpg')
     })

   }.width('100%')

 }
}

更多关于HarmonyOS 鸿蒙Next 切换tabs时如何修改其他图片的背景图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，当你切换tabs时，若需要修改其他图片的背景图片，可以通过以下步骤实现：

  1. 监听Tab切换事件：首先，需要在Tab控件中监听Tab切换的事件。这通常可以通过设置事件监听器（如OnTabSelectedListener）来完成。

  2. 获取当前Tab索引：在Tab切换的事件处理函数中，获取当前选中的Tab索引。

  3. 修改其他图片背景：根据当前选中的Tab索引，修改其他图片的背景。这可以通过遍历所有的图片控件，然后根据索引判断是否需要修改背景图片。

  4. 设置背景图片：使用setImageResource或相应的方法设置新的背景图片。

示例代码（伪代码）：

// 监听Tab切换事件
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        int currentIndex = tab.getPosition();
        // 遍历所有图片控件
        for (int i = 0; i < imageViewList.size(); i++) {
            if (i != currentIndex) {
                // 修改背景图片
                imageViewList.get(i).setImageResource(R.drawable.new_background);
            }
        }
    }
    // 其他回调方法省略
});

注意：上述代码为伪代码，实际开发中需根据具体情况调整。HarmonyOS中使用的是ArkUI或eTS框架，具体实现方式会有所不同。

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

回到顶部