鸿蒙项目开发——Window和Display获取屏幕信息

【高心星出品】

Window和Display获取屏幕信息

概念

在鸿蒙中有window和Display两个模块管理屏幕的相关信息，包括屏幕宽高、屏幕分辨率、屏幕刷新率、通知栏信息，导航栏信息等。

但是两者又有所不同：

维度	Window	Display
职责范围	管理应用程序窗口（大小、位置、状态）	管理物理显示设备（屏幕属性、方向）
数据来源	窗口布局完成后的实际尺寸	显示设备的物理参数（如分辨率）
变化监听	`windowSizeChange`/`windowStatusChange`	`change`/`foldDisplayModeChange`
典型应用场景	窗口模式切换、分屏适配	屏幕旋转、折叠屏状态感知

下面我们用案例来展示他们的使用。

案例

案例一、获取屏幕基本信息

里面包含获取屏幕宽高信息、屏幕分辨率、屏幕刷新率

typescript 复制代码

import { display } from '@kit.ArkUI';

@Entry
@Component
struct Displaypage {
  @State msg: string = ''

  build() {
    Column({ space: 20 }) {
      Button('获取信息')
        .width('60%')
        .onClick(async () => {
          // 获取当前屏幕
          let disp = display.getDefaultDisplaySync()
          // 获取屏幕宽度和高度 单位px
          let width = disp.width
          let height = disp.height
          // 获取屏幕角度
          let rotation = disp.rotation == 0 ? '正向竖直' :
            (disp.rotation == 1 ? '水平90' : (disp.rotation == 2 ? '反向竖直' : '水平-90'))
          // 获取屏幕形状
          let pinshape = disp.screenShape == display.ScreenShape.RECTANGLE ? '矩形屏幕' : '圆形屏幕'
          // 获取屏幕刷新率
          let rate = disp.refreshRate
          this.msg =
            `display获取信息：\n屏幕宽度：${width}, 屏幕高度：${height}\n屏幕角度：${rotation}\n屏幕形状：${pinshape}\n屏幕刷新率：${rate}`
        })
      Text(this.msg).fontSize(20)

    }
    .height('100%')
    .width('100%')
  }
}

案例二、获取屏幕可布局区域信息

下面案例获取屏幕可布局区域的宽度和高度。

EntyAbility中通过windowstage获取窗口信息

typescript 复制代码

import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

const DOMAIN = 0x0000;

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    //  获取当前主窗口
    let wind = windowStage.getMainWindowSync()
    // 获取通知栏区域
    let toparea = wind.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
    //  获取底部导航区域
    let bottomarea = wind.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
    //可布局宽度
    let uiwidth = wind.getWindowProperties().windowRect.width
    // 可布局高度，总高度减去通知栏高度和导航栏高度
    let uiheight = wind.getWindowProperties().windowRect.height - toparea.topRect.height - bottomarea.bottomRect.height
    // 将可布局的信息保存在appstorage中。
    AppStorage.setOrCreate('uiwidth',uiwidth)
    AppStorage.setOrCreate('uiheight',uiheight)
    windowStage.loadContent('pages/Displaypage1', (err) => {
      if (err.code) {
        hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
        return;
      }
      hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

页面中获取信息

typescript 复制代码

import { display } from '@kit.ArkUI';

@Entry
@Component
struct Displaypage1 {
  // 获取ability传过来的可布局宽度和高度
  @State uiwidth:number=AppStorage.get('uiwidth')!
  @State uiheight:number=AppStorage.get('uiheight')!
  build() {
    Column({ space: 20 }) {

      Text(`可布局宽度（px）:${this.uiwidth}\n可布局高度（px）:${this.uiheight}`).fontSize(20)

    }
    .height('100%')
    .width('100%')
  }
}