HarmonyOS 鸿蒙Next中如何配置应用的屏幕适配？

方法一，使用栅格布局实现

方法二，自定义封装屏幕断点工具实现

断点工具的封装

通过 display.getDefaultDisplaySync().width 获取主窗口的宽度并将 px 单位转换为 vp。通过 registerListenerScreen 函数在 onWindowStageCreate 生命周期开启屏幕变化监听，首次判断初始屏幕大小，后续窗口变化时也会重新判断；在 onWindowStageDestroy 生命周期调用 unregisterListenerScreen 卸载监听。定义 BreakPointEnum 枚举表示不同屏幕断点，利用 GlobalVariables 类设置全局变量键，judgeScreen 函数根据窗口宽度判断屏幕断点并将结果存于 AppStorage

依赖导入

import { display, window } from '@kit.ArkUI'

获取窗口宽度

通过 display.getDefaultDisplaySync().width 获取主窗口的宽度，但是通过此方法获取到的宽度单位是 px，需要转成 vp

监听屏幕变化

在 Ability 的 onWindowStageCreate 生命周期中开启监听屏幕变化。

// BreakPointUtils.ets
// 开启监听屏幕变化 需要在 Ability 的 onWindowStageCreate 生命周期中调用
async registerListenerScreen(ctx?: Context) {
  // 只调用一次
  this.judgeScreen(px2vp(display.getDefaultDisplaySync().width))
  let mainWindow = await window.getLastWindow(getContext() || ctx)
  mainWindow?.on('windowSizeChange', (size) => {
    // 会调用多次
    this.judgeScreen(px2vp(size.width))
  })
}

// 卸载监听屏幕变化 需要在 Ability 的 onWindowStageDestroy 生命周期中调用
async unregisterListenerScreen(ctx?: Context) {
  let mainWindow = await window.getLastWindow(getContext() || ctx)
    mainWindow?.off('windowSizeChange')
}

判断屏幕大小

全局变量

// GlobalVariables.ets
export class GlobalVariables {
  static readonly BREAK_POINT_KEY: string = 'break_point_key' // 全局变量的key
}

判断屏幕大小

// ScreenManager.ets
// 判断屏幕大小
judgeScreen(width: number) {
  let breakPoint: string = ''
  if (width < 320) {
    breakPoint = BreakPointEnum.xs
  } else if (width >= 320 && width < 520) { // 华为官方于2024.11.05更新了栅格断点值的取值范围
    breakPoint = BreakPointEnum.sm
  } else if (width >= 520 && width < 840) {
    breakPoint = BreakPointEnum.md
  } else {
    breakPoint = BreakPointEnum.lg
  }
  AppStorage.setOrCreate(GlobalVariables.BREAK_POINT_KEY, breakPoint) // 将得到的断点枚举值存到全局状态
}

断点工具封装

封装断点枚举值

// break_point.ets
export enum BreakPointEnum {
  xs = 'xs',
  sm = 'sm',
  md = 'md',
  lg = 'lg'
}

interface 接口类型约束

// break_point.ets
// 使用 interface 接口对断点工具类进行类型约束
interface BreakPointValue<T> {
  xs?: T
  sm?: T
  md?: T
  lg?: T
}

断点工具类

// break_point.ets
export class BreakPointType<T> {
  options: BreakPointValue<T>

  constructor(opt: BreakPointValue<T>) {
    this.options = opt // 把四个断点对应的值给了这个对象
}

获取提供的断点值

// break_point.ets
// 提供一个获取断点值
getValue(breakPoint: string): T {
  //this.options[breakPoint]
  return (this.options as object)[breakPoint] // 此举与下方注释无异
  // if (breakPoint === "xs") {
  //   return this.options.xs!
  // } else if (breakPoint === "sm") {
  //   return this.options.sm!
  // } else if (breakPoint === "md") {
  //   return this.options.md!
  // } else {
  //   return this.options.lg!
  // }
}