鸿蒙(HarmonyOS)实战开发篇——横竖屏切换开发实践

往期知识点整理

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
• 被裁员后，踏上了鸿蒙开发求职之路
• 记录一场鸿蒙开发岗位面试经历~
• 持续更新中……

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

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