HarmonyOS：UI布局屏幕适配不同机型

一、屏幕适配

vp具体计算公式为：vp= px/（DPI/160）

px就是屏幕真实物理像素值，densityPixels是屏幕密度，是和标准DPI的比例，常见取值有0.75，1.0，1.5，2.0，3.0等，在HarmonyOS中，标准DPI为160，以华为mate 40 pro为例，查询得到的densityPixels=3.5，densityDPI=560。densityDPI就是我们通常所说的系统屏幕密度，densityPixels就是屏幕密度和标准dpi(160)的比率。想要查看真机的dpi，可以调用屏幕属性中的display接口查询。

二、测试结果

结果图

TestDisplay.ets文件代码

import { display } from '@kit.ArkUI'

@Entry
@Component
struct TestDisplay {
  @State message: string = 'UI布局自适应不同机器';
  @State deviceDPI: string | null = ""
  @State cutoutInfo: string | null = ""

  /**
   * vp具体计算公式为：vp= px/（DPI/160）
   *
   * px就是屏幕真实物理像素值，densityPixels是屏幕密度，是和标准DPI的比例
   *
   * 查看设备的dpi
   */
  getDPI() {
    let displayClass: display.Display | null = null;
    try {
      displayClass = display.getDefaultDisplaySync();
      this.deviceDPI = displayClass.densityDPI.toString();
      console.log(`屏幕密度 dpi =  ${this.deviceDPI}`);
      this.pxTovp(100, displayClass.densityDPI);
    } catch (exception) {
      console.error('获取屏幕属性 Failed to obtain the default display object. Code: ' + JSON.stringify(exception));
    }
  }

  pxTovp(num: number, densityDPI: number) {
    let vpValue = num / (densityDPI / 160)
    console.log(`使用 pxTovp 将${num} px 转换为 vp单位 结果：${vpValue} vp`)

    let vpValue2 = this.getUIContext().px2vp(num)
    console.log(`使用 HarmonyOS 封装的 px2vp 方法 将${num} px 转换为 vp单位 结果：${vpValue2} vp`)
  }

  build() {
    Column({ space: 10 }) {
      Text(this.message)
        .id('TestDisplayHelloWorld')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Button('获取屏幕密度')
        .fontColor(Color.Black)
        .fontSize(20)
        .fontWeight(FontWeight.Medium)
        .onClick(() => {
          this.getDPI()
        })
      Text(`屏幕密度： ${this.deviceDPI}`)
        .fontSize(20)
        .fontColor(Color.Black)
        .fontWeight(FontWeight.Medium)
    }
    .height('100%')
    .width('100%')
  }
}

如果原型图没有提供vp单位的布局，开发者可以根据densityPixel把px转为vp，HarmonyOS也封装了现成的接口px2vp()和vp2px()供开发者直接调用。

三、参考链接

HarmonyOS：像素单位