HarmonyOS鸿蒙Next中寻找一个让页面旋转90度的组件

HarmonyOS鸿蒙Next中寻找一个让页面旋转90度的组件 使用setpreferredorientation退出旋转页面后app仍然是横屏，使用.rotate组件只旋转了画面，状态栏依旧是竖屏，对于上面问题有无解决方法或者有没有可以旋转页面的组件，求助！！（支持api12）补充：（使用setpreferredorientation退出页面时如果设置为竖屏无法兼容三折叠，无法判断退出sdk后处于折叠的竖屏状态还是展开的横屏状态）

11 回复

【问题定位】

由于setPreferredOrientation方法调用的是窗口的显示方向，是整个应用窗口级别都发生了旋转，窗口将一直保持最后一次设置窗口方向的效果，即使发生页面跳转等行为窗口方向也不会发生变化，参照调用窗口的setPreferredOrientation方法。

【解决方案】

退出页面时，将setPreferredOrientation中参数orientation的值设置为PORTRAIT（竖屏显示）或AUTO_ROTATION_LANDSCAPE（跟随传感器自动横向旋转，可以旋转到横屏、反向横屏，无法旋转到竖屏、反向竖屏），示例代码如下：

Web({ src: $rawfile('index_cn.html'), controller: this.controller })
  .javaScriptAccess(true)
  .domStorageAccess(true)
  .onFullScreenEnter((event) => {
    this.handler = event.handler;
    window.getLastWindow(getContext(this), (err, data) => { // 获取window实例
      let windowClass = data;
      let orientation = window.Orientation.LANDSCAPE; // 设置窗口方向为横屏模式
      // 跟随传感器自动横向旋转
      // let orientation = window.Orientation.AUTO_ROTATION_LANDSCAPE
      windowClass.setPreferredOrientation(orientation, (err) => {});
    });
  })
  .onFullScreenExit(() => {
    if (this.handler) {
      this.handler.exitFullScreen();
      window.getLastWindow(getContext(this), (err, data) => {
      let windowClass = data;
      let orientation = window.Orientation.PORTRAIT; // 设置窗口方向为竖屏模式
      windowClass.setPreferredOrientation(orientation, (err) => {});
    });
  }
})

更多关于HarmonyOS鸿蒙Next中寻找一个让页面旋转90度的组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


但是退出页面时如果设置为竖屏无法兼容三折叠，无法判断退出sdk后处于折叠的竖屏状态还是展开的横屏状态，

开发者您好，为了更快解决您的问题，请您提供一下最小复现问题的demo。

在旋转页面加上：

// 在页面隐藏时
onPageHide() {
    //恢复默认设置
    (getContext(this) as common.UIAbilityContext).windowStage.getMainWindowSync().setPreferredOrientation(window.Orientation.AUTO_ROTATION);
}

注：如果旋转页面已经有onPageHide()方法了，就在方法里加：

//恢复默认设置
(getContext(this) as common.UIAbilityContext).windowStage.getMainWindowSync().setPreferredOrientation(window.Orientation.AUTO_ROTATION);

但是退出页面时如果设置为竖屏无法兼容三折叠，无法判断退出sdk后处于折叠的竖屏状态还是展开的横屏状态，

window.Orientation.AUTO_ROTATION 是跟随传感器自动旋转，可以旋转到竖屏、横屏、反向竖屏、反向横屏四个方向。

参考文档：窗口方向
https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-window-direction

app方向是固定的不能用传感器自动旋转QAQ，

退出横屏页面时重新设置为竖屏或者你需要的旋转策略

setPreferredOrientation(window.Orientation.PORTRAIT)

但是退出页面时如果设置为竖屏无法兼容三折叠，无法判断退出sdk后处于折叠的竖屏状态还是展开的横屏状态，

在HarmonyOS Next中，可使用Rotate组件实现页面旋转90度。该组件属于图形变换能力，通过angle参数设置旋转角度。示例代码：Rotate({ angle: 90 })包裹目标组件即可完成顺时针90度旋转。需在ArkUI框架的声明式语法中应用，支持动态角度调整与动画过渡。注意旋转中心默认为组件中心点，无需额外配置。

在HarmonyOS Next（API 12）中，可以通过window模块的setPreferredOrientation方法设置页面方向，但需要注意以下几点：

  1. 设置全屏旋转：
    使用window.setPreferredOrientation(orientation.Orientation.LANDSCAPE)可实现横屏，但需在onWindowStageCreate生命周期中调用，确保生效。若退出页面时需恢复竖屏，可在onBackPress或页面销毁时调用setPreferredOrientation(orientation.Orientation.PORTRAIT)。

  2. 折叠屏适配问题：
    对于三折叠设备，需通过display.getDefaultDisplay()获取屏幕属性，结合foldStatus判断设备折叠状态。例如：

    import display from '[@ohos](/user/ohos).display';
const info = display.getDefaultDisplaySync();
if (info.foldStatus === display.FoldStatus.FOLD_STATUS_EXPAND) {
  // 展开状态按横屏处理
} else {
  // 折叠状态按竖屏处理
}

  3. 状态栏方向同步：
    若仅使用CSS旋转（如.rotate）会导致状态栏方向不匹配。建议通过window设置全局方向，系统会自动调整状态栏。

  4. 兼容性处理：
    在退出页面时，可通过监听折叠状态动态设置方向，避免强制竖屏导致折叠屏显示异常。使用display.on('foldStatusChange')监听折叠状态变化，实时调整方向。

总结：优先通过window模块管理方向，结合折叠状态检测实现动态适配，避免单独使用CSS旋转导致UI错位。

回到顶部