【鸿蒙性能优化】横竖屏切换开发实践

实现视频播窗页面的横竖屏转换，用户可以切换到全屏播放场景。

Figure1横竖屏切换示意

整体开发基本流程

以进入全屏为例，开发过程需要有以下关注点：

1、如果有模态框，需要关闭模态框

2、页面实现窗口旋转和全屏逻辑

3、隐藏播控相关按钮内容

图1进入横屏基本流程

在触发旋转的按钮上，触发对应事件，并可以采用EventHub.emit发送对应事件触发相应事件。这里主要介绍进入全屏的逻辑。

@Builder
RotationButton() {
  Column() {
    Image($r('app.media.ic_rotate'))
      .width(22).height(22)
  }
  ...
  .onClick(() => {
    this.context.eventHub.emit(DATA_EVENT_LIST.CLOSE_BIND_SHEET);
    this.context.eventHub.emit(PLAY_EVENT_LIST.ENTRY_FULL);
    this.closeMenu();
  })
}

进入全屏逻辑

1、实现窗口旋转

主要逻辑包括：（1）获取当前的方向属性值 （2）调用窗口管理的接口设置想要的旋转方向 （3）隐藏状态栏

执行进入全屏时首先需要通过display获取当前的显示方向，并根据当前显示方向，执行对应的屏幕旋转逻辑。

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

// 通过display的接口获取方向属性值，display中的方向与window中的方向相同名称，值相差1
const orientation = display.getDefaultDisplaySync().orientation + 1;
// 以直板机为例设置旋转方向
if (orientation === window.Orientation.PORTRAIT) {
  // 竖屏模式切全屏需要转屏，横屏模式切换全屏不需要转屏
  this.setOrientation(window.Orientation.LANDSCAPE_INVERTED)
} else if (orientation === window.Orientation.PORTRAIT_INVERTED) {
  this.setOrientation(window.Orientation.LANDSCAPE)
}
// 设置屏幕旋转方向
setOrientation(orientation: number) {
  Log.info(TAG, `[setOrientation]orientation: ${orientation}`);
  WindowAbility.setWindowOrientation(WindowAbility.getWindowStage(), this.context, orientation)
}
// 隐藏状态栏等业务处理……
hideSystemBar() {
  WindowUtil.hideSystemBar(WindowUtil.getWindowStage())
}

具体的实现逻辑在windowUtil中，在调用屏幕旋转方向时，可以通过windowStage拿到对应的window实例，并设置旋转setPreferredOrientation。

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

export class WindowUtil {
  private static windowStage: window.WindowStage;

  static getWindowStage() {
    return WindowUtil.windowStage
  }

  static setWindowStage(windowStage: window.WindowStage): void {
    WindowUtil.windowStage = windowStage;
  }

  /*
    * 设置横竖屏
    * @Params orientation: 旋转方向
    */
  static setWindowOrientation(windowStage: window.WindowStage, orientation: number): void {
    windowStage.getMainWindow((error, win: window.Window) => {
      win.setPreferredOrientation(orientation).then(