【鸿蒙 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 })
  }
}
相关推荐
幽蓝计划2 小时前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
华为·harmonyos
万少8 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划9 小时前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
HMS Core11 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos
生如夏花℡11 小时前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
伍哥的传说11 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
funnycoffee12312 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为
制造数字化方案研究院12 小时前
59页|PPT|华为集成服务交付ISD业务变革总体方案:业务规则、流程、IT、组织及度量“四位一体”的管理体系
运维·华为
博睿谷IT99_12 小时前
华为物联网认证:开启万物互联的钥匙
物联网·华为·华为认证·职业规划
遇到困难睡大觉哈哈1 天前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos