鸿蒙（HarmonyOS）开发中 屏幕信息获取方式

本文同步发表于我的微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

一、核心概念与基础API

1. 屏幕基础信息获取

(1) 屏幕尺寸与分辨率

import display from '@ohos.display';

// 获取默认屏幕对象
let displayClass: display.Display = display.getDefaultDisplaySync();

// 获取屏幕宽高（物理像素）
let widthPx: number = displayClass.width;
let heightPx: number = displayClass.height;

// 获取屏幕密度（DPI）
let densityDPI: number = displayClass.densityDPI;

// 转换为逻辑像素（vp）
import window from '@ohos.window';
let windowClass: window.Window = window.getLastWindow(this.context);
let widthVp: number = windowClass.getWindowProperties().windowRect.width; // VP单位

关键API：

• display.getDefaultDisplaySync()：获取主屏幕实例。
• window.getLastWindow()：获取当前窗口信息。

(2) 屏幕方向监听

import screenOrientation from '@ohos.screenOrientation';

// 获取当前方向
let currentOrientation: screenOrientation.Orientation = screenOrientation.getOrientation();

// 监听方向变化
screenOrientation.on('change', (orientation: screenOrientation.Orientation) => {
  console.log(`当前方向: ${orientation === screenOrientation.Orientation.VERTICAL ? '竖屏' : '横屏'}`);
});

2. 屏幕安全区域

获取避开刘海/圆角的可用区域：

import window from '@ohos.window';

windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).then((avoidArea: window.AvoidArea) => {
  console.log(`安全区域: [${avoidArea.left}, ${avoidArea.top}, ${avoidArea.right}, ${avoidArea.bottom}]`);
});

AvoidAreaType类型：

• TYPE_SYSTEM：系统保留区域（状态栏/导航栏）
• TYPE_CUTOUT：刘海屏切割区域

二、高级功能与实战

1. 多屏幕管理（API 12+）

import display from '@ohos.display';

// 获取所有屏幕
let displays: display.Display[] = display.getAllDisplays();

// 监听屏幕热插拔
display.on('connect', (newDisplay: display.Display) => {
  console.log(`新屏幕连接: ID=${newDisplay.id}`);
});

// 设置扩展屏内容
if (displays.length > 1) {
  let secondDisplay = displays[1];
  router.pushUrl({
    url: 'pages/SecondScreenPage',
    displayId: secondDisplay.id // 指定目标屏幕
  });
}

2. 动态屏幕参数调整

(1) 修改屏幕亮度

import brightness from '@ohos.brightness';

// 获取当前亮度（0~1）
let currentBrightness: number = brightness.getValue();

// 设置亮度（需权限ohos.permission.DISPLAY_MANAGER）
brightness.setValue(0.8).then(() => {
  console.log('亮度已调整');
});

(2) 保持屏幕常亮

import window from '@ohos.window';

windowClass.setWindowKeepScreenOn(true).then(() => {
  console.log('屏幕常亮已开启');
});

3. 屏幕截图（需权限）

import image from '@ohos.multimedia.image';
import display from '@ohos.display';

// 创建屏幕截图源
let displayClass: display.Display = display.getDefaultDisplaySync();
let imageSource: image.ImageSource = image.createImageSource(displayClass.id);

// 生成PixelMap
imageSource.createPixelMap().then((pixelMap: image.PixelMap) => {
  console.log(`截图尺寸: ${pixelMap.getPixelBytesNumber()}`);
  // 可保存为文件或显示在Image组件
  this.pixelMap = pixelMap; // 绑定到@State变量
});

// Image组件显示截图
Image(this.pixelMap)
  .width('100%')
  .height('100%')

三、完整案例：自适应布局

1. 横竖屏不同布局

@Entry
@Component
struct AdaptivePage {
  @State isLandscape: boolean = false;

  aboutToAppear() {
    // 初始方向判断
    this.isLandscape = screenOrientation.getOrientation() === screenOrientation.Orientation.HORIZONTAL;
    
    // 监听方向变化
    screenOrientation.on('change', (orientation) => {
      this.isLandscape = orientation === screenOrientation.Orientation.HORIZONTAL;
    });
  }

  build() {
    Flex({ direction: this.isLandscape ? FlexDirection.Row : FlexDirection.Column }) {
      Text('左侧内容')
        .flexGrow(1)
        .backgroundColor('#F2F2F2')

      Text('右侧内容')
        .flexGrow(1)
        .backgroundColor('#E5E5E5')
    }
    .width('100%')
    .height('100%')
  }
}

2. 安全区域适配

@Entry
@Component
struct SafeAreaPage {
  @State avoidArea: window.AvoidArea = { left: 0, top: 0, right: 0, bottom: 0 };

  aboutToAppear() {
    window.getLastWindow(this.context)
      .getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
      .then((area) => this.avoidArea = area);
  }

  build() {
    Stack() {
      // 主要内容区
      Column() {
        Text('安全区域内容')
      }
      .margin({
        top: this.avoidArea.top,
        bottom: this.avoidArea.bottom
      })

      // 底部操作栏（避开导航栏）
      Column() {
        Button('确认')
      }
      .position({
        bottom: this.avoidArea.bottom
      })
    }
  }
}

四、调试与优化

1. 多设备预览工具

// 在config.json中配置多设备尺寸
"abilities": [{
  "name": "MainAbility",
  "displayModes": ["phone", "tablet", "foldable"]
}]

2. 性能优化建议

五、总结对比