在鸿蒙开发中，backgroundImage置空背景无法消失？

Question

鸿蒙开发中，backgroundImage置空背景无法消失？当backgroundImage的值是个变量时，从"“赋值为具体url时是可以正常展示，但是从具体url赋值为”"，背景图片无法消失：

@Entry 
@Component 
struct Index { 
  @State message: string = ''; 
  @State bkImage:string = '' 
  build() { 
    Column() { 
      Column() { 
        Text(this.message) 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
      } 
      .width(50) 
      .height(50) 
      .backgroundImage($r(`${this.bkImage}`)) 
      Button('出现') 
        .onClick(()=>{ 
          this.bkImage = 'app.media.icon' 
          let a = 0 
        }) 
      Button('消失') 
        .onClick(()=>{ 
          this.bkImage = '' 
        }) 
    } 
  } 
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

backgroundImage被设置后再改成空值确实依旧显示图片，这是系统考虑已经有背景的占位了，防止这个显示空白比较难看。如果必须要实现此种方式可以使用分支渲染的方式实现（这里顺便修改了下showBkImage参数类型，就不需要拼接字符串了）：

@Entry 
@Component 
struct Index { 
  @State message: string = ''; 
  @State bkImageSrc: ResourceStr = ''; 
  @State showBkImage: boolean = false; 
 
  build() { 
    Column() { 
      if (this.showBkImage) { 
        Column() { 
          Text(this.message) 
            .fontSize(50) 
            .fontWeight(FontWeight.Bold) 
        } 
        .width(50) 
        .height(50) 
        .backgroundImage(this.bkImageSrc) 
      } else { 
        Column() { 
          Text(this.message) 
            .fontSize(50) 
            .fontWeight(FontWeight.Bold) 
            .width(50) 
            .height(50) 
        } 
      } 
 
      Button('出现') 
        .onClick(()=>{ 
          this.showBkImage = true; 
          this.bkImageSrc = $r('app.media.icon') 
        }) 
 
      Button('消失2') 
        .onClick(()=>{ 
          this.showBkImage = false; 
          this.bkImageSrc = '' 
        }) 
    } 
  } 
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。