HarmonyOS 鸿蒙Next中怎么在应用内旋转屏幕

HarmonyOS 鸿蒙Next中怎么在应用内旋转屏幕 怎么在应用现内旋转屏幕,像抖音那样,点击全屏就能全屏旋转,不是整个都用系统的

5 回复

尊敬的开发者,您好,

【背景知识】

  • Window(窗口)的setPreferredOrientation方法用于设置主窗口的显示方向属性,应用可通过调用此方法实现横竖屏切换。同时,应用还可通过setWindowLayoutFullScreen方法设置主窗口或子窗口的布局是否为沉浸式布局。

【解决方案】

利用Video组件的默认控制栏实现全屏播放功能。当用户点击默认控制栏中的全屏按钮时,视频会进入全屏模式,并切换窗口方向为横屏。退出全屏时,窗口方向恢复为竖屏。

示例代码如下:

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

@Entry
@Component
struct VideoDemo1 {
  private controller: VideoController = new VideoController();
  private context = this.getUIContext().getHostContext() as common.UIAbilityContext;
  private windowClass = (this.context as common.UIAbilityContext).windowStage.getMainWindowSync();

  // 窗口方向切换(横竖屏切换)
  private setOrientation(orientation: Orientation) {
    this.windowClass.setPreferredOrientation(orientation).then(() => {
      console.info('setWindowOrientation: ' + orientation + ' Succeeded.');
    }).catch((err: BusinessError<void>) => {
      console.info('setWindowOrientation: ' + orientation + ' Failed. Cause: ' + err.message);
    });
  }

  build() {
    Column() {
      Video({
        src: $rawfile('video.mp4'), // 替换为您的本地视频文件路径
        controller: this.controller
      })
        .width('100%')
        .height(300)
        .controls(true) // 使用默认控制栏
        .objectFit(ImageFit.Contain)
        // 全屏状态变化时自动切换横竖屏
        // 当视频切换到全屏播放时,若没有将窗口切换到横屏,将会是一个竖屏全屏播放效果
        .onFullscreenChange((event) => {
          if (event.fullscreen) {
            this.setOrientation(window.Orientation.LANDSCAPE); // 横屏
          } else {
            this.setOrientation(window.Orientation.PORTRAIT); // 竖屏
          }
        });
    }
    .width('100%')
    .height('100%');
  }
}

更多关于HarmonyOS 鸿蒙Next中怎么在应用内旋转屏幕的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这种效果一般不是去控制物理屏幕方向,而是控制当前应用窗口/当前页面的窗口方向。类似视频全屏场景:普通页面保持竖屏,点击全屏时把当前窗口策略切到横屏;退出全屏或页面销毁时再恢复原来的策略。

如果是 Navigation 页面,API 19 以后可以优先看 NavDestination 的 preferredOrientation;兼容性更通用的做法是在页面进入/退出时调用 window.setPreferredOrientation()。例如点击全屏:

import { window } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';
let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
let mainWindow = context.windowStage.getMainWindowSync();
// 进入全屏播放,限制为横屏并受控制中心旋转开关控制
mainWindow.setPreferredOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE_RESTRICTED);
// 退出全屏时恢复,比如恢复竖屏或恢复详情页的自动旋转策略
mainWindow.setPreferredOrientation(window.Orientation.PORTRAIT);
// 或 mainWindow.setPreferredOrientation(window.Orientation.AUTO_ROTATION_UNSPECIFIED);

几个注意点:

  1. setPreferredOrientation 作用的是窗口策略,不是只旋转某个组件。如果只想视觉上旋转一个播放器区域,可以用组件 rotate/transform,但状态栏、手势区、输入法、安全区和尺寸适配都要自己处理,视频全屏通常不推荐这么做。
  2. 进入横屏前建议记录上一个 orientation,退出时恢复,避免影响后续页面。
  3. 视频/全屏页常用 AUTO_ROTATION_LANDSCAPE_RESTRICTED;如果需要点击按钮后临时切到横屏、之后继续跟随传感器,也可以结合 USER_ROTATION_LANDSCAPE 这类策略看实际体验。
  4. 旋转后窗口尺寸会变化,要监听窗口尺寸或用断点适配全屏布局。

官方文档可以看“窗口方向”和 setPreferredOrientation:

https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-window-direction

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#setpreferredorientation9

在鸿蒙Next(API 12+)中,应用内旋转屏幕通过 windowStage.getMainWindow().setWindowRotationAngle(int rotation)window.setPreferredOrientation(WindowOrientation) 实现。需在配置文件中声明 orientation: "auto""sensor",并在 onWindowStageCreated 中调用相应API。注意区分固定方向与动态旋转。

在HarmonyOS NEXT中,要实现应用内点击按钮手动旋转屏幕(像抖音全屏那样),而非跟随系统传感器自动旋转,可以通过窗口API window.setPreferredOrientation() 主动设置窗口方向。
核心步骤是:

  1. module.json5 中锁定初始方向,避免系统自动旋转(如设置 "orientation": "locked")。
  2. 在 Ability 或页面内获取当前窗口实例,调用 setPreferredOrientation() 传入期望的方向常量。
    示例代码:
import window from '@ohos.window';

// 获取当前窗口实例(通常在onWindowStageCreate等生命周期中)
let windowClass = await window.getLastWindow(this.context);
// 切换为横屏全屏
await windowClass.setPreferredOrientation(window.Orientation.LANDSCAPE);
// 切换回竖屏
await windowClass.setPreferredOrientation(window.Orientation.PORTRAIT);

切换后需自行处理页面布局适配,监听窗口尺寸变化及时调整UI。该方法直接控制应用窗口的显示方向,不依赖系统自动旋转。

回到顶部