【鸿蒙 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属性

名称 类型 可读 可写 说明
id number 显示设备的id号。
name string 显示设备的名称。
alive boolean 显示设备是否启用。
state DisplayState 显示设备的状态。
refreshRate number 显示设备的刷新率。
rotation number 显示设备的屏幕旋转角度。 值为0时,表示显示设备屏幕旋转为0°; 值为1时,表示显示设备屏幕旋转为90°; 值为2时,表示显示设备屏幕旋转为180°; 值为3时,表示显示设备屏幕旋转为270°。
width number 显示设备的屏幕宽度,单位为像素。
height number 显示设备的屏幕高度,单位为像素。
densityDPI number 显示设备的屏幕密度,表示每英寸点数。一般取值160,480等。
densityPixels number 显示设备的逻辑密度,是像素单位无关的缩放系数。一般取值1,3等。
scaledDensity number 显示设备的显示字体的缩放因子。通常与densityPixels相同。
xDPI number x方向中每英寸屏幕的确切物理像素值。
yDPI number y方向中每英寸屏幕的确切物理像素值。

3.2、获取屏幕宽高

具体代码:

javascript 复制代码
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文件具体代码

javascript 复制代码
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文件使用

javascript 复制代码
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 })
  }
}
相关推荐
高心星5 小时前
HarmonyOS 5.0应用开发——MVVM模式的应用
harmonyos·mvvm·鸿蒙5.0·备忘录应用
别说我什么都不会5 小时前
【仓颉三方库】工具类—— compress4cj
harmonyos
别说我什么都不会5 小时前
【仓颉三方库】工具类—— uuid4cj
harmonyos
__Benco12 小时前
OpenHarmony - 小型系统内核(LiteOS-A)(十),魔法键使用方法,用户态异常信息说明
人工智能·harmonyos
NapleC1 天前
HarmonyOS:一多能力介绍:一次开发,多端部署
华为·harmonyos
我爱学习_zwj1 天前
【鸿蒙HarmonyOS】深入理解router与Navigation
华为·harmonyos
NapleC1 天前
HarmonyOS:1.7
harmonyos
鸿蒙布道师1 天前
鸿蒙NEXT开发通知工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
鸿蒙布道师1 天前
鸿蒙NEXT开发网络相关工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei