【鸿蒙 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 })
  }
}
相关推荐
写雨.06 小时前
鸿蒙定位开发服务
华为·harmonyos·鸿蒙
goto_w11 小时前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
别说我什么都不会1 天前
ohos.net.http请求HttpResponse header中set-ccokie值被转成array类型
网络协议·harmonyos
码是生活1 天前
鸿蒙开发排坑:解决 resourceManager.getRawFileContent() 获取文件内容为空问题
前端·harmonyos
鸿蒙场景化示例代码技术工程师1 天前
基于Canvas实现选座功能鸿蒙示例代码
华为·harmonyos
小脑斧爱吃鱼鱼1 天前
鸿蒙项目笔记(1)
笔记·学习·harmonyos
Debroon1 天前
应华为 AI 医疗军团之战,各方动态和反应
人工智能·华为
鸿蒙布道师1 天前
鸿蒙NEXT开发对象工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
zhang1062091 天前
HarmonyOS 基础组件和基础布局的介绍
harmonyos·基础组件·基础布局
桃子酱紫君1 天前
华为配置篇-BGP实验
开发语言·华为·php