HarmonyOS开发实战指南：横竖屏开发实践

概述

横竖屏切换是一种常见的功能，用户在一些场景下，需要在横屏状态浏览应用，例如在进行视频播放的场景，一些16:9的视频在横向播放时，全屏的体验更加。所以应用需要支持切换到横屏全屏的能力。在开发时，部分应用需要提供全屏按钮，让用户选择开启横竖屏播放，另外我们也需要考虑系统是否开启了方向锁定，在方向锁定的情况下，用户只能通过手动横屏来实现全屏，而在方向没有锁定下，用户将设备横向的情况下，应用需要自动切换到横屏进行播放。

本文中将介绍如何进行横竖屏功能的开发，以及横竖屏开发中常见的问题及其优化方案。

横竖屏开发流程

为了实现应用的横竖屏功能，我们需要从以下技术方面进行考虑：

1、设置界面的旋转策略

2、监听屏幕的窗口变化

3、根据方向进行布局适配

设置界面的旋转策略

1、配置应用默认选择方式

初次进入应用时的旋转策略可以通过module.json5文件中对应Ability的"orientation"字段进行配置，此字段控制的是应用打开后的旋转方式，

{
  "module": {
    ...
    ,
    "abilities": [
      {
        "name": "EntryAbility",
        ...,
        "orientation":"auto_rotation"  // 需要配置为相应的旋转策略
      }
    ]
  }
}

其支持的参数可以参考module.json5配置项其中orientation字段相关配置：

根据应用默认的旋转行为进行相应的配置：

• 如果应用是竖屏应用，建议配置portrait为默认旋转策略。
• 如果应用是横屏应用，建议配置landscape为默认旋转策略。
• 如果应用为可旋转应用，建议应用配置auto_rotation_restricted为默认旋转策略。
• 如果一个应用，在直板机和折叠机折叠态是竖屏应用，在平板和折叠机展开态默认是可旋转应用，推荐配置follow_desktop为默认旋转策略。

以如下备忘录为例，在系统关闭了旋转锁定后，应用的页面都会随着手机旋转而发生展示上的切换，此时就需要配置为auto_rotation_restricted。

图1 应用随系统旋转切换横竖屏

​

2、支持手动设置旋转

部分应用的旋转策略可能在不同页面是不同的，例如视频播放页面支持横屏，但是首页的内容是支持仅竖屏的，那么就需要针对单独的页面，采用window窗口提供的设置窗口方向的能力，可以将窗口显示的方向修改为横屏、竖屏、反向横屏、反向竖屏的状态。在HarmonyOS系统中，窗口的状态对应真机实际状态如下：

图2 窗口形态示意图

​

在使用时，需根据应用自身的旋转策略选择相应的参数，可以封装如下方法，进行旋转策略的设置，方法中通过window.getLastWindow拿到窗口实例，然后调用window实例的setPreferredOrientation设置旋转策略。

  setOrientation(orientation: number) {
    window.getLastWindow(getContext(this)).then((win) => {
      win.setPreferredOrientation(orientation).then((data) => {
        console.log('setWindowOrientation: ' + orientation + ' Succeeded. Data: ' + JSON.stringify(data));
      }).catch((err: string) => {
        console.log('setWindowOrientation: Failed. Cause: ' + JSON.stringify(err));
      });
    }).catch((err: string) => {
      console.log('setWindowOrientation： Failed to obtain the top window. Cause: ' + JSON.stringify(err));
    });