在鸿蒙NEXT开发中，如何在builder构造器中监听数据变化？

Question

在鸿蒙NEXT开发中，如何在builder构造器中监听数据变化

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

Answer 1

在鸿蒙 NEXT 开发中，如果在 builder 构造器中监听数据变化，可以参考以下示例。如当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;
        });
      };
    };
  };
}

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