HarmonyOS 折叠屏展开和折叠屏幕修改显示的图片宽高时，Image图片显示没有根据变更的宽高刷新？

Question

折叠屏展开和折叠屏幕修改显示的图片宽高时，Image图片显示没有根据变更的宽高刷新

代码片段：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  photoSaveViewModel: PhotoSaveViewModel = new PhotoSaveViewModel()

  build() {
    RelativeContainer() {
      Image($r('app.media.test_photo'))
        .width(this.photoSaveViewModel.imageViewWidth)
        .height(this.photoSaveViewModel.imageViewHeight)
        .interpolation(ImageInterpolation.High)
        .margin({
          top: this.photoSaveViewModel.imageViewTopMargin,
          bottom: this.photoSaveViewModel.imageViewBottomMargin,
          left: this.photoSaveViewModel.imageViewLeftMargin,
          right: this.photoSaveViewModel.imageVIewRightMargin
        })
        .draggable(false)
        .alignRules({
          middle:{anchor:"__container__",align:HorizontalAlign.Center},
          top: { anchor: "__container__", align: VerticalAlign.Top }
        })
    }
    .height('100%')
    .width('100%')
  }
}

Answer 1

参考如下写法

Index.ets 改成下面这样

import PhotoSaveViewModel from './PhotoSaveViewModel';
import { display } from '@kit.ArkUI';
import { DisplayUtils } from '../util/DisplayUtils';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State photoSaveViewModel: PhotoSaveViewModel = new PhotoSaveViewModel()
  public onDisplayChange = () => {
    let width = px2vp(display.getDefaultDisplaySync().width)
    let height = px2vp(display.getDefaultDisplaySync().height)
    this.photoSaveViewModel.imageViewWidth = width / 2
    this.photoSaveViewModel.imageViewHeight = height / 2
    console.error("zwc-test width = ", this.photoSaveViewModel.imageViewWidth, " height = ", this.photoSaveViewModel.imageViewHeight)
  }

  aboutToDisappear(): void {
    DisplayUtils.instance.unregisterListener(this.onDisplayChange)
  }

  aboutToAppear(): void {
    DisplayUtils.instance.registerListener(this.onDisplayChange)
  }


  build() {
    RelativeContainer() {
      Image($r('app.media.test_photo'))
        .width(this.photoSaveViewModel.imageViewWidth)
        .height(this.photoSaveViewModel.imageViewHeight)
        .interpolation(ImageInterpolation.High)
        .margin({
          top: this.photoSaveViewModel.imageViewTopMargin,
          bottom: this.photoSaveViewModel.imageViewBottomMargin,
          left: this.photoSaveViewModel.imageViewLeftMargin,
          right: this.photoSaveViewModel.imageVIewRightMargin
        })
        .draggable(false)
        .alignRules({
          middle:{anchor:"__container__",align:HorizontalAlign.Center},
          top: { anchor: "__container__", align: VerticalAlign.Top }
        })
    }
    .height('100%')
    .width('100%')
  }
}