backgroud()方法使用@State修饰的状态变量值更新后未能触发不同的怎么办？

Question

backgroud()方法使用@State修饰的状态变量值更新后未能触发不同的

Answer 1

解决措施

可尝试通过watch监听或者使用backgroungdImage()。

示例代码

@Entry 
@Component 
struct Page2 { 
  @State @Watch('showImg') isShowImg: boolean = true; 
 
  aboutToAppear() { 
    this.showTimer() 
  } 
 
  @Builder 
  showImg() { 
    Image($r('app.media.app_icon')).width(20).height(30) 
  } 
 
  @Builder 
  showDefaultImg() { 
    Image($r('app.media.image1')).width(200).height(30) 
  } 
 
  showTimer() { 
    setTimeout(() => { 
      this.isShowImg = false; 
    }, 5000) 
  } 
 
  build() { 
    Column() { 
      Text('Hello world') 
        .width(200) 
        .height(30) 
        .background(this.isShowImg ? this.showImg() : this.showDefaultImg()) // 状态变量更新可触发UI渲染 
      // .background(this.showImg()) // 状态变量更新不能触发UI渲染 
      // .backgroundImage(this.isShowImg? $r('app.media.icon') : r('app.media.image1')) // 状态变量更新可以触发UI渲染 .onClick(() => { console.info(`click isShowImg:{this.isShowImg}`) // 开始时点击isShowImg为true,5s后点击为false 
    } 
  } 
}