在HarmonyOS NEXT开发中@Builde修饰器内, 如何监听到isNormalMode的数据变化？

Question

在HarmonyOS NEXT开发中@Builde修饰器内, 如何监听到isNormalMode的数据变化？需要实现在isNormalMode发生变化时, 需要变更Image组件的图片;
目前, 如果不写Builder的话, 直接在build内写Image是可以正常修改的, 如果写到@Builder内, 就无法监听到值, 这个如果在@Builder内, 怎么可以监听到数据变化：

@State isNormalMode: boolean = true; 
 
@Builder 
showImage(source: string | Resource, onImageClick: () => void = () => {}) { 
 
  Image(source) 
    .fitOriginalSize(true) 
    .objectFit(ImageFit.Auto) 
    .width(Constants.FULL_PARENT) 
    .onClick(() => { 
      console.log("obclick") 
      onImageClick(); 
    }) 
    .padding({ /// 内部区域显示内容 
      top: $r('app.float.screen_margin_left_right') 
    }) 
} 
 
build() { 
  Stack({ alignContent: Alignment.TopStart }) { 
    Flex({ direction: FlexDirection.Column }) { 
 
      TitleBar({ model: $model }) 
 
      Column() { 
 
        this.showImage(this.isNormalMode ? $r('app.media.normal_mode_selected') : $r('app.media.normal_mode_unselect'), () => { 
          console.log("setImageobclick") 
          this.isNormalMode = true; 
        }); 
 
        this.showImage(this.isNormalMode ? $r('app.media.easy_mode_unselect') : $r('app.media.easy_mode_selected'), () => { 
          console.log("setImageobclick") 
          this.isNormalMode = false; 
        }); 
      } 
      .padding({ /// 内部区域显示内容 
        left: $r('app.float.screen_margin_left_right'), 
        right: $r('app.float.screen_margin_left_right'), 
      }) 
      .width(Constants.FULL_PARENT) 
      .height(Constants.FULL_PARENT) 
    } 
  } 
  .width(Constants.FULL_PARENT) 
  .height(Constants.FULL_PARENT) 
}

Answer 1

调用@Builder装饰的函数，上述写法是按值传递参数。当传递的参数为状态变量时，状态变量的改变不会引起@Builder方法内的UI刷新。所以当使用状态变量的时候，推荐使用按引用传递。参考地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides...
参考以下代码：

class ImageParams { 
  imageUrl: string | Resource = '' 
  onImageClick: () => void = () => { 
  } 
} 
 
@Entry 
@Component 
struct Index { 
  @State isNormalMode: boolean = true; 
  @State imgUrl: string | Resource = $r('app.media.img1') 
 
  @Builder 
  showImageNew(params: ImageParams) { 
 
    Image(params.imageUrl) 
      .fitOriginalSize(true) 
      .objectFit(ImageFit.Auto) 
      .width(200) 
      .onClick(() => { 
        console.log("obclick") 
        params.onImageClick(); 
      }) 
  } 
 
  @Builder 
  showImage(source: string | Resource, onImageClick: () => void = () => { 
  }) { 
    Image(source) 
      .fitOriginalSize(true) 
      .objectFit(ImageFit.Auto) 
      .width(200) 
      .onClick(() => { 
        console.log("obclick") 
        onImageClick(); 
      }) 
  } 
 
  build() { 
    Stack({ alignContent: Alignment.TopStart }) { 
      Flex({ direction: FlexDirection.Column }) { 
 
        Column() { 
 
          Text("状态：" + this.isNormalMode) 
          Text(" imgUrl：" + JSON.stringify(this.imgUrl)) 
 
          this.showImage(this.imgUrl, () => { 
            console.log("setImageobclick") 
            this.isNormalMode = !this.isNormalMode; 
            this.imgUrl = this.isNormalMode ? $r('app.media.img1') : $r('app.media.img2') 
          }) 
 
          Button("changeType(只改状态，图没换)").onClick(() => { 
            this.isNormalMode = !this.isNormalMode 
          }) 
 
          //=================用下面这种的写法========================== 
          this.showImageNew( 
            { 
              imageUrl: this.imgUrl, 
              onImageClick: () => { 
                this.isNormalMode = !this.isNormalMode; 
                this.imgUrl = this.isNormalMode ? $r('app.media.img1') : $r('app.media.img2') 
              } 
            } 
          ) 
          if (this.isNormalMode) { 
            this.showImageNew( 
              { 
                imageUrl: $r("app.media.img1"), 
                onImageClick: () => { 
                  this.isNormalMode = !this.isNormalMode; 
                  this.imgUrl = this.isNormalMode ? $r('app.media.img1') : $r('app.media.img2') 
                } 
              } 
            ) 
          } else { 
            this.showImageNew( 
              { 
                imageUrl: $r("app.media.img2"), 
                onImageClick: () => { 
                  this.isNormalMode = !this.isNormalMode; 
                  this.imgUrl = this.isNormalMode ? $r('app.media.img1') : $r('app.media.img2') 
                } 
              } 
            ) 
          } 
 
        } 
        .width("100%") 
        .height("100%") 
      } 
    } 
    .width("100%") 
    .height("100%") 
  } 
}