前言

屏幕信息是UI适配的基础数据，包括屏幕宽度、高度、密度等。@pura/harmony-utils 的 DisplayUtil 封装了屏幕信息获取方法，帮助开发者快速获取屏幕参数，实现多设备适配。本文将从API说明、代码实战、进阶用法、常见问题等多个维度进行全面讲解，帮助开发者快速掌握并应用到实际项目中。

一、DisplayUtil基础核心API

DisplayUtil 提供了以下屏幕信息获取方法：

方法	说明	返回类型	使用场景
getWidth()	获取屏幕宽度（vp）	number	响应式布局
getHeight()	获取屏幕高度（vp）	number	页面布局
getDensity()	获取屏幕密度	number	尺寸换算
getDensityPixels()	获取密度DPI	number	资源选择
getScaledDensity()	获取缩放密度	number	字体适配

1.1 核心特性

• 简洁易用：封装复杂API为一行调用，降低使用门槛
• 类型安全：完整的TypeScript类型定义，编译期即可发现错误
• 异常处理：内置异常捕获机制，避免运行时崩溃
• 多设备适配：为不同屏幕尺寸的适配提供数据支撑

1.2 屏幕密度与DPI对照

密度等级	DPI范围	density值	典型设备
mdpi	120-160	1.0	低密度设备
hdpi	160-240	1.5	中密度设备
xhdpi	240-320	2.0	高密度设备
xxhdpi	320-480	3.0	超高密度设备

二、完整使用步骤

2.1 安装依赖

ohpm install @pura/harmony-utils

2.2 获取屏幕尺寸

import { DisplayUtil } from '@pura/harmony-utils';

Button('获取屏幕尺寸')
  .width('100%')
  .onClick(() => {
    try {
      let width = DisplayUtil.getWidth();
      let height = DisplayUtil.getHeight();
      this.result = `屏幕宽度: ${width}vp\n屏幕高度: ${height}vp`;
    } catch (e) {
      this.result = '异常: ' + e;
    }
  })

2.3 获取屏幕密度

Button('获取屏幕密度')
  .width('100%')
  .onClick(() => {
    try {
      let density = DisplayUtil.getDensity();
      let dpi = DisplayUtil.getDensityPixels();
      this.result = `密度: ${density}\nDPI: ${dpi}`;
    } catch (e) {
      this.result = '异常: ' + e;
    }
  })

三、完整页面示例

import { DisplayUtil } from '@pura/harmony-utils';

@Entry
@Component
struct DisplayDemo {
  @State result: string = '';

  build() {
    Column({ space: 12 }) {
      Button('获取全部屏幕信息').width('100%').onClick(() => {
        try {
          let width = DisplayUtil.getWidth();
          let height = DisplayUtil.getHeight();
          let density = DisplayUtil.getDensity();
          this.result = `宽度: ${width}vp\n高度: ${height}vp\n密度: ${density}`;
        } catch (e) { this.result = '异常: ' + e; }
      });
      Text(this.result).fontSize(14).fontColor('#333333')
    }
    .padding(16)
  }
}

四、进阶用法

4.1 响应式布局判断

import { DisplayUtil } from '@pura/harmony-utils';

function getLayoutType(): string {
  let width = DisplayUtil.getWidth();
  if (width >= 840) return '三列布局';
  if (width >= 600) return '双列布局';
  return '单列布局';
}

4.2 vp与px互转

function vp2px(vp: number): number {
  return vp * DisplayUtil.getDensity();
}

function px2vp(px: number): number {
  return px / DisplayUtil.getDensity();
}

五、注意事项

1. 响应式布局：根据屏幕宽度选择单列/双列布局
2. 尺寸适配：根据密度换算px和vp
3. 多设备适配：根据屏幕参数调整UI布局
4. 初始化依赖：使用前需确保 AppUtil.init() 已调用
5. 动态变化：折叠屏设备屏幕尺寸可能变化

六、常见问题

Q1: getWidth()返回的是物理像素还是vp？

返回的是vp（虚拟像素），已经过密度换算，可直接用于布局。

Q2: 折叠屏设备屏幕尺寸会变化吗？

会变化，建议使用 DisplayUtil.onDisplayChange() 监听屏幕变化。

Q3: getDensity()和getDensityPixels()有什么区别？

getDensity() 返回密度比例（如2.0、3.0），getDensityPixels() 返回DPI值（如320、480）。

Q4: 如何判断当前是手机还是平板？

根据屏幕最短边判断，通常最短边>=600vp为平板级别设备。

总结

DisplayUtil 的屏幕信息获取方法为多设备适配提供了基础数据。本文详细介绍了核心API、使用步骤、完整示例、进阶用法以及常见问题的解决方案。开发者可以根据屏幕尺寸和密度动态调整布局，确保应用在不同设备上都有良好的显示效果。

本文基于 @pura/harmony-utils 工具库，更多功能请参考官方文档与后续系列文章。