【鸿蒙 HarmonyOS NEXT】使用屏幕属性display：获取屏幕宽高

✨本人自己开发的开源项目：土拨鼠充电系统

✨踩坑不易，还希望各位大佬支持一下，在GitHub给我点个 Start ⭐⭐👍👍

✍GitHub开源项目地址👉：https://github.com/cheinlu/groundhog-charging-system

一、背景

屏幕属性提供管理显示设备的一些基础能力，包括获取默认显示设备的信息，获取所有显示设备的信息以及监听显示设备的插拔行为。

不同屏幕大小的宽/高是不一样的，本文主要通过@ohos.display来获取屏幕的宽高属性

二、屏幕属性的几种方法

1、getDefaultDisplaySync(): Display👉👉获取当前默认的display对象

2、getAllDisplays(callback: AsyncCallback<Array<Display>>): void👉👉获取当前所有的display对象，使用callback异步回调。

3、getAllDisplays(): Promise<Array<Display>>👉👉获取当前所有的display对象，使用Promise异步回调。

三、获取屏幕宽高

使用getDefaultDisplaySync(): Display方法，来得到不同屏幕大小的宽高属性

3.1、Display属性

3.2、获取屏幕宽高

 具体代码：

import display from '@ohos.display';

@Entry
@Component
struct DisplayPage {
  @State screenWidth: number = -1;
  @State screenHeight: number = -1

  aboutToAppear(): void {
    let data = display.getDefaultDisplaySync();
    //屏幕宽
    this.screenWidth = px2vp(data.width)
    //屏幕高
    this.screenHeight = px2vp(data.height)
  }

  build() {
    Column() {
      Text(`屏幕宽:${this.screenWidth}`)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Text(`屏幕高:${this.screenHeight}`)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .margin({ top: 100 })
  }
}

实际效果： 

3.3、封装成工具类使用

说明：在实际项目中，页面中画UI时都会涉及获取屏幕宽度，便考虑封装成工具类，页面中使用时再引入

3.3.1、创建ScreenUtils文件

在项目中新建utils目录，目录内新建ScreenUtils文件，用于工具类书写

ScreenUtils文件具体代码

import display from '@ohos.display'

export class ScreenUtils {
  //屏幕数据
  private defaultDisplay: display.Display | null = null

  private static instance: ScreenUtils;

  private constructor(){
    this.defaultDisplay = display.getDefaultDisplaySync()
  }

  public static getInstance(): ScreenUtils {
    if (!ScreenUtils.instance) {
      ScreenUtils.instance = new ScreenUtils();
    }
    return ScreenUtils.instance;
  }

  //屏幕宽度--px单位
  getScreenWidthPx(): number {
    return this.defaultDisplay?.width ?? -1
  }

  //屏幕宽度--px单位转换成vp单位，鸿蒙适配vp单位
  getScreenWidthVp(): number {
    return px2vp(this.getScreenWidthPx())
  }

  //屏幕高度--px单位
  getScreenHeightPx(): number {
    return this.defaultDisplay?.height ?? -1
  }

  //屏幕高度--vp单位
  getScreenHeightVp(): number {
    return px2vp(this.getScreenHeightPx())
  }
}

3.3.2、组件中引入ScreenUtils文件使用

import { ScreenUtils } from '../utils/ScreenUtils'

@Entry
@Component
struct DisplayPage {
  private screenWidth = ScreenUtils.getInstance().getScreenWidthVp()
  private screenHeight = ScreenUtils.getInstance().getScreenHeightVp()

  build() {
    Column() {
      Text(`屏幕宽:${this.screenWidth}`)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Text(`屏幕高:${this.screenHeight}`)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .margin({ top: 100 })
  }
}