HarmonyOS 折叠屏获取屏幕尺寸问题？

Question

export class DisplayUtil {

  ...

  static getDefaultDisplaySync(): display.Display {
    return display.getDefaultDisplaySync()
  }

  static getVpWidth(): number {
    return px2vp(DisplayUtil.getDefaultDisplaySync().width);
  }

  ...
}

复现步骤：

折叠状态运行项目打印宽度：345.6vp，展开后获取宽度为：711.68vp，再折叠屏幕获取到的尺寸为：711.68vp，

反复折叠，获取到的尺寸一直为：711.68vp

期望：

能获取到正在展示的屏幕尺寸，折叠状态：345.6vp， 展开状态：711.68vp

Answer 1

通过窗口的on(‘windowSizeChange’)方法实现对窗口尺寸大小变化的监听，并把宽度值通过AppStorage来传递。

主要代码如下：

1、在onWindowStageCreate中补充如下代码，使用windowClass.on监听尺寸变化获取宽口宽度。

let windowClass: window.Window | undefined = undefined;
try {
  window.getLastWindow(this.context, (err: BusinessError, data) => {
    const errCode: number = err.code;
    if (errCode) {
      console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
      return;
    }
    windowClass = data;
    try {
      windowClass.on('windowSizeChange', (data) => {
        AppStorage.setOrCreate('width', px2vp(data.width));
      });
    } catch (exception) {
      console.error('Failed to enable the listener for window size changes. Cause: ' + JSON.stringify(exception));
    }
    console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));
  });
} catch (exception) {
  console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception));
}

2、在页面aboutToAppear用getDefaultDisplaySync获取宽度，通过@StorageLink('width')获取监听到变化的宽度。

import display from '@ohos.display';

@Entry
@Component
struct Index {
  @StorageLink('width') width1: number = 0;

  aboutToAppear(): void {
    let displayClass: display.Display | null = null;
    displayClass = display.getDefaultDisplaySync();
    this.width1 = px2vp(displayClass.width);
  }

  build() {
    Column() {
      Text('屏幕宽度：'+this.width1.toString())
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
    .height('100%')
    .width('100%')
  }
}