鸿蒙next开发 AppStorage与AppStorageV2

1、AppStorage

class WindowUtil {
  static readonly keyStatusBarHeight = 'keyStatusBarHeight'
  static readonly keyBottomControlBarHeight = 'keyBottomControlBarHeight'
  static readonly keyTopSafeHeight = 'keyTopSafeHeight'
  static readonly keyBottomSafeHeight = 'keyBottomSafeHeight'

  public static async setupSharedSize(windowStage: window.WindowStage, context: Context) {
    windowStage.getMainWindow((err: BusinessError, data: window.Window) => {
      if (err.code) {
        Logger.error(TAG, 'Failed to obtain the main window. Cause: ' + JSON.stringify(err));
        return;
      }
      let windowClass: window.Window = data;
      let area: window.AvoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
      let navArea: window.AvoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
      AppStorage.setOrCreate<number>(WindowUtil.keyStatusBarHeight, px2vp(area.topRect.height))
      AppStorage.setOrCreate<number>(WindowUtil.keyBottomControlBarHeight, px2vp(navArea.bottomRect.height))
      AppStorage.setOrCreate<number>(WindowUtil. keyTopSafeHeight, px2vp(area.topRect.height))
      AppStorage.setOrCreate<number>(WindowUtil. keyBottomSafeHeight, px2vp(navArea.bottomRect.height))
     
  }
}

在组件中使用

@Component
export default struct DemoPage {
  @StorageProp(WindowUtil.keyTopSafeHeight) topSafeHeight: number = 0

  build() {
    Row()
      . padding({top: this. topSafeHeight})
  }
}

2、AppStorageV2

@ObservedV2
export class AppStorageV2DeviceInfo {
  @Trace
  statusBarHeight: number = 0
  @Trace
  bottomControlBarHeight: number = 0
  @Trace
  topSafeHeight: number = 0
  @Trace
  bottomSafeHeight: number = 0

  @Monitor("topSafeHeight")
  // 监听变化
  onT1Change(monitor: IMonitor) {
    console.log(`topSafeHeight change from ${monitor.value()?.before} to ${monitor.value()?.now}`);
  }
}

class WindowUtil {
  public static async setupSharedSize(windowStage: window.WindowStage, context: Context) {
    windowStage.getMainWindow((err: BusinessError, data: window.Window) => {
      if (err.code) {
        Logger.error(TAG, 'Failed to obtain the main window. Cause: ' + JSON.stringify(err));
        return;
      }
      let windowClass: window.Window = data;
      let area: window.AvoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
      let navArea: window.AvoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
      const deviceInfo = AppStorageV2.connect(AppStorageV2DeviceInfo, () => new AppStorageV2DeviceInfo())
      if (deviceInfo) {
        deviceInfo.statusBarHeight = px2vp(area.topRect.height)
        deviceInfo.bottomControlBarHeight = px2vp(navArea.bottomRect.height)
        deviceInfo.topSafeHeight = px2vp(area.topRect.height)
        deviceInfo.bottomSafeHeight = px2vp(navArea.bottomRect.height)
      }
  }
}

在组件中使用

@ComponentV2
export default struct DemoPage {
  @Local deviceInfo: AppStorageV2DeviceInfo =
    AppStorageV2.connect(AppStorageV2DeviceInfo, () => new AppStorageV2DeviceInfo())!

  build() {
    Row()
     .padding({ top: this.deviceInfo.topSafeHeight })
  }
}

3、屏幕方向变化，更新全局变量

onWindowStageCreate(windowStage: window.WindowStage): void {
    display.on("change", (res) => {
      console.log("方向变化：" + res.toString())
      this.updateSafeArea()
    })
}

updateSafeArea{
  const orientation = display.getDefaultDisplaySync().orientation + 1;
    // 以直板机为例设置旋转方向
    const statusBarHeight = AppStorage.get<number>(WindowUtil.keyStatusBarHeight)
    const bottomControlBarHeight = AppStorage.get<number>(WindowUtil.keyBottomControlBarHeight)


    switch (orientation) {
      case window.Orientation.PORTRAIT: {
         // 如果使用的是AppStorage
        AppStorage.setOrCreate<number>(WindowUtil.keyTopSafeHeight, statusBarHeight)
        AppStorage.setOrCreate<number>(WindowUtil.keyBottomSafeHeight, bottomControlBarHeight)

        //如果使用AppStorageV2
        const deviceInfo = AppStorageV2.connect(AppStorageV2DeviceInfo, () => new AppStorageV2DeviceInfo())
        if (deviceInfo) {
          deviceInfo.topSafeHeight = statusBarHeight
          deviceInfo.bottomSafeHeight = bottomControlBarHeight
        }
        break
      }
      case window.Orientation.LANDSCAPE: {
        // 如果使用的是AppStorage
        AppStorage.setOrCreate<number>(WindowUtil.keyBottomSafeHeight, 0)
        AppStorage.setOrCreate<number>(WindowUtil.keyTopSafeHeight, 0)

        //如果使用AppStorageV2
        const deviceInfo = AppStorageV2.connect(AppStorageV2DeviceInfo, () => new AppStorageV2DeviceInfo())
        if (deviceInfo) {
          deviceInfo.topSafeHeight = 0
          deviceInfo.bottomSafeHeight = 0
        }
        break
      }
      case window.Orientation.LANDSCAPE_INVERTED: {
        ……
        break
      }
      default: {
        // 默认
        ……
        break
      }
    }
}