HarmonyOS鸿蒙Next中Ability如何监听屏幕旋转或折叠屏展开事件?

HarmonyOS鸿蒙Next中Ability如何监听屏幕旋转或折叠屏展开事件? 视频播放器需要在横屏时全屏,但在折叠屏展开时也要适配。有没有统一的 API 监听所有“显示形态变化”?

10 回复

监听屏幕旋转的能力可以通过display.on(‘change’)监听屏幕状态改变实现,并通过display.getDefaultDisplaySync()获取屏幕实例对象,其中rotation属性用于显示设备的屏幕顺时针旋转角度。实现示例如下:

import window from '@ohos.window';
import display from '@ohos.display';
import { common } from '@kit.AbilityKit';

const ORIENTATION: Array<string> = ['垂直', '水平', '反向垂直', '反向水平'];

@Entry
@Component
struct Scene1 {
  @State rotation: number = 0;
  @State message: string = ORIENTATION[this.rotation];
  // 是否横屏状态
  @State @Watch('setWindowLayOut') isLandscape: boolean = false;

  aboutToAppear() {
    // 监听屏幕状态改变
    display.on('change', async () => {
      let disP = display.getDefaultDisplaySync()
      // 获取当前旋转角度
      console.log('rotation',disP.rotation)
      // 获取折叠状态
      console.log('display.FoldStatus',display.getFoldStatus())
    });
  }

  setWindowLayOut() {
    // 调用该接口手动改变设备横竖屏状态(设置全屏模式,先强制横屏,再加上传感器模式)
    let context = this.getUIContext()?.getHostContext() as common.UIAbilityContext;
    window.getLastWindow(context).then((windowClass) => {
      if (this.isLandscape) {
        // 设置屏幕横屏
        windowClass.setPreferredOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE);
      } else {
        // 设置屏幕竖屏
        windowClass.setPreferredOrientation(window.Orientation.AUTO_ROTATION_PORTRAIT);
      }
    });
  }

  build() {
    Row() {
      Column() {
        Text(`${this.rotation}`)
          .fontSize(25);
        Text(`${this.message}`)
          .fontSize(25);
        Button(this.isLandscape ? '竖屏' : '横屏')
          .width(140)
          .onClick(() => {
            // 设置横屏
            this.isLandscape = !this.isLandscape;
          });
      }
      .width('100%');
    }
    .height('100%');
  }
}

更多关于HarmonyOS鸿蒙Next中Ability如何监听屏幕旋转或折叠屏展开事件?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


目前没有官方提供统一的 API 监听所有“显示形态变化”。可以自行使用类封装到一起。

监听参考指南文档

可以通过监听 display.on(‘change’) 实现统一的形态变化监听:

import { Callback } from '@kit.BasicServicesKit';

let callback: Callback<number> = (data: number) => {
  console.info(`Listening enabled. Data: ${data}`);
};

display.on("change", callback);

如果要单独监听折叠态变化,也可以单独注册 display.on(‘foldStatusChange’)

import { Callback } from '@kit.BasicServicesKit';

/**
 * 注册监听的callback参数要采用对象传递.
 * 若使用匿名函数注册,每次调用会创建一个新的底层对象,引起内存泄漏问题。
*/
let callback: Callback<display.FoldStatus> = (data: display.FoldStatus) => {
  console.info(`Listening enabled. Data: ${data}`);
};
display.on('foldStatusChange', callback);

监听屏幕旋转的能力可以通过display.on(‘change’)监听屏幕状态改变实现,并通过display.getDefaultDisplaySync()获取屏幕实例对象,其中rotation属性用于显示设备的屏幕顺时针旋转角度。

import window from '@ohos.window';
import display from '@ohos.display';
import { common } from '@kit.AbilityKit';
const ORIENTATION: Array<string> = ['垂直', '水平', '反向垂直', '反向水平'];
@Entry
@Component
struct Scene1 {
  @State rotation: number = 0;
  @State message: string = ORIENTATION[this.rotation];
  // 是否横屏状态
  @State @Watch('setWindowLayOut') isLandscape: boolean = false;
  aboutToAppear() {
    // 监听屏幕状态改变
    display.on('change', async () => {
      // 获取当前旋转角度
      this.rotation = display.getDefaultDisplaySync().rotation;
      this.message = ORIENTATION[this.rotation];
    });
  }
  setWindowLayOut() {
    // 调用该接口手动改变设备横竖屏状态(设置全屏模式,先强制横屏,再加上传感器模式)
    let context = this.getUIContext()?.getHostContext() as common.UIAbilityContext;
    window.getLastWindow(context).then((windowClass) => {
      if (this.isLandscape) {
        // 设置屏幕横屏
        windowClass.setPreferredOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE);
      } else {
        // 设置屏幕竖屏
        windowClass.setPreferredOrientation(window.Orientation.AUTO_ROTATION_PORTRAIT);
      }
    });
  }
  build() {
    Row() {
      Column() {
        Text(`${this.rotation}`)
          .fontSize(25)
        Text(`${this.message}`)
          .fontSize(25)
        Button(this.isLandscape ? '竖屏' : '横屏')
          .width(140)
          .onClick(() => {
            // 设置横屏
            this.isLandscape = !this.isLandscape;
          });
      }
      .width('100%')
    }
    .height('100%')
  }
}

使用 displayManager 监听显示配置变更:

import displayManager from '@ohos:displayManager';
displayManager.getDefaultDisplaySync().on('change', (display) => {
  console.log('方向:', display.orientation);
  console.log('折叠状态:', display.foldStatus);
});

同时结合 window.on('sizeChange') 获取精确窗口尺寸,实现响应式布局。

希望HarmonyOS能继续推出更多实用的功能,满足用户的不同需求。

在HarmonyOS Next中,监听屏幕旋转或折叠屏展开事件可通过Display模块实现。使用display.on('change')全局监听屏幕属性变化,包括旋转状态。对于折叠屏,通过display.getFoldStatus()获取折叠状态,并监听'foldStatusChange'事件。具体操作涉及注册事件回调,在回调中处理DisplayRotationFoldStatus参数变化。

在HarmonyOS Next中,可以使用DisplayManager来监听屏幕旋转、折叠屏展开等显示形态变化事件。具体步骤如下:

  1. 获取DisplayManager实例

    import display from '[@ohos](/user/ohos).display';
    let displayManager = display.getDefaultDisplaySync();
    
  2. 注册显示变化监听器

    displayManager.on('displayChange', (displayInfo) => {
      // 处理显示变化逻辑
      if (displayInfo.isScreenRotated) {
        // 屏幕旋转处理
      }
      if (displayInfo.isFoldable && displayInfo.isFolded) {
        // 折叠屏状态变化处理
      }
    });
    
  3. 获取当前显示状态

    let currentDisplay = displayManager.getDisplayInfoSync();
    let isLandscape = currentDisplay.width > currentDisplay.height;
    
  4. Ability生命周期中管理监听: 在onWindowStageCreate中注册监听,在onWindowStageDestroy中移除监听。

这种方式可以统一处理屏幕旋转、折叠屏展开等显示形态变化,无需为不同事件单独编写监听逻辑。

回到顶部