HarmonyOS 鸿蒙Next中横竖屏切换

HarmonyOS 鸿蒙Next中横竖屏切换 横竖屏切换在哪里配置，有没有指导或者示例？

4 回复

横竖屏切换：

cke_243.png

设置窗口旋转策略的方式有以下两种：

  • 通过module.json5文件中“orientation”字段进行设置。
  • 在代码中通过调用窗口window的setPreferredOrientation方法进行设置。

这两种方式触发设置旋转的时机不同，总的来说，module.json5文件中的字段在窗口启动时就会生效，对于启动时就需要设置横屏或者竖屏的应用，需要进行配置。而setPreferredOrientation是在调用该方法时进行窗口方向的设置，用于在应用启动之后，还需要改变显示方向的场景。

这里有一个官方视频教程，讲解的非常详细：

https://developer.huawei.com/consumer/cn/training/course/live/C101741082734547516

更多关于HarmonyOS 鸿蒙Next中横竖屏切换的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


横竖屏切换文档：

https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-landscape-and-portrait-development

HarmonyOS Next中横竖屏切换通过UIAbility的onConfigurationUpdate回调实现。当设备方向改变时，系统自动触发该回调并传入新的设备配置信息。开发者可在回调中获取orientation参数判断当前屏幕方向（横屏或竖屏），并据此调整页面布局。该机制由系统自动管理，无需手动监听传感器数据。

在HarmonyOS Next中，横竖屏切换主要通过配置UIAbility的orientation属性实现。具体步骤如下：

  1. 在module.json5文件中配置
    在对应UIAbility的"orientation"字段设置屏幕方向：

    • "unspecified"（默认，由系统传感器决定）
    • "landscape"（强制横屏）
    • "portrait"（强制竖屏）
    • "followRecent"（跟随上一个界面的方向）

    示例代码：

    {
  "module": {
    "abilities": [
      {
        "name": "EntryAbility",
        "orientation": "portrait"
      }
    ]
  }
}

  2. 动态切换方向（需API 10+）
    在Ability中调用setDisplayOrientation方法：

    import { AbilityConstant, UIAbilityContext } from '[@kit](/user/kit).AbilityKit';

let context = ... // 获取UIAbilityContext
context.setDisplayOrientation(AbilityConstant.Orientation.LANDSCAPE);

  3. 响应方向变化
    在UI组件中通过mediaQuery监听屏幕方向变化并调整布局：

    import { mediaQuery } from '[@kit](/user/kit).ArkUI';

let listener = mediaQuery.matchMedia('(orientation: landscape)');
listener.on('change', (result) => {
  if (result.matches) {
    // 横屏布局处理
  }
});

完整示例可参考官方文档：屏幕方向控制。注意动态设置权限需在config.json中声明ohos.permission.UPDATE_CONFIGURATION。

回到顶部