鸿蒙开发5.0【横竖屏切换开发】实战

最新推荐文章于 2025-03-23 21:21:08 发布

爱桥代码的程序媛

最新推荐文章于 2025-03-23 21:21:08 发布

阅读量1.4k

点赞数 23

分类专栏：鸿蒙文章标签： harmonyos 华为鸿蒙开发鸿蒙 ArkUI 程序员移动开发

本文链接：https://blog.csdn.net/2301_76813281/article/details/141266161

版权

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

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())
}

具体的实现逻辑在windowU