鸿蒙（设备场景适配）——折叠屏应用指南(一)

📚鸿蒙开发往期学习笔录✒️：

✒️ 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
✒️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
✒️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
✒️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
✒️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
✒️ 记录一场鸿蒙开发岗位面试经历~
✒️ 持续更新中……

随着终端设备形态日益多样化，应用设计需要考虑界面能否适配不同的屏幕尺寸、屏幕方向和设备类型。同时还需要保持多设备体验的连续性，改善多端独立的设计、尽可能降低开发者的工作量和维护成本。基于此 Harmony OS 为设计师提供了面向多设备的设计指导，让设计师在进行多端设计时有一套科学的方法，最大程度减少设计的工作量，保障多端设计在一定程度的一致性。同时 Harmony OS 也提供了对应的技术能力，帮助开发者快速地进行多端应用设计。

本指导结合用户在多端设备上的历史交互习惯、各场景下的使用诉求等，进行了一些设计方法的总结，主要包括如下几个部分：

基础要求：在多设备应用设计中需要遵守的基础体验要求，如果不满足基础要求，则会极大损害用户的使用体验。
响应式布局：在宽屏设备上，针对部分常见的界面元素提出了响应式布局设计范式，以避免简单拉伸、放大等导致的一些体验问题。
增值体验：在多设备应用设计中可以考虑更多体验上的变化，在合适的场景下提供增值的体验。
场景化设计参考：针对具体垂类场景应用给出了场景内典型页面的设计建议，方便设计师进行更有针对性的参考和选用。

基本要求

折叠屏应用开发具有导航、横竖屏、挖孔、多窗、弹出框等基础要求。

导航适配

1.底部导航&侧边导航

通常手机和折叠屏使用底部页签导航；平板及其他宽屏设备使用侧边页签或侧边栏导航。调用鸿蒙系统提供的控件可自动适配该导航规则。

2.底部导航条适配

移动端设备应用内的底部页签、底部工具栏、底部文本，或底部悬浮按钮需要自动抬高避让底部导航条。应用内的可滚动内容，可直接显示在导航条下方，仅当滚动到内容的最底部时需要向上抬高避免被底部导航条遮挡。调用鸿蒙控件，可自动实现以上导航条的避让规格。

说明
沉浸式页面，例如全屏播放视频、游戏、阅读等场景下，超过 2 秒自动隐藏底部导航条，从底部上滑或从顶部下滑可触发恢复显示底部导航条。

横竖屏与挖孔适配

手机和折叠屏折叠态的应用通常需要适配竖屏布局。仅部分特殊场景例如横屏游戏、长视频需要适配横屏布局。

折叠屏展开态、平板上，应用需要同时适配横屏和竖屏布局。

当设备尺寸比例接近 1:1 时，建议横竖屏使用相同或相近的布局。

当设备尺寸比例差异大时，横竖屏可以使用不同的布局，从而提供更好的使用体验，例如横屏后自动分栏或横屏后自动露出右侧的辅助信息等。

横竖屏适配过程中，需要考虑核心内容或重要交互不要被挖孔区遮挡，如果被遮挡则进行局部内容等避让；可滚动内容或非核心信息无需专门避让挖孔区；要避免因为避让挖孔导致左右侧留白不一致。

1.横竖屏适配

实现方案

在折叠屏展开时需要支持横竖屏旋转。使用display.on(‘foldDisplayModeChange’ API开启折叠设备屏幕显示模式变化的监听，使用 setPreferredOrientation API设置窗口的显示方向属性。

参考代码

工具类，用于设置窗口的显示方向属性

// utils/WindowsUtil.ets
import { window } from '@kit.ArkUI';

@Observed
export class WindowUtil {
  private windowStage?: window.WindowStage;
  private mainWindowClass?: window.Window;

  // 获取实例
  static getInstance(): WindowUtil | undefined {
    if (!AppStorage.get<WindowUtil>('windowUtil')) {
      AppStorage.setOrCreate('windowUtil', new WindowUtil());
    }
    return AppStorage.get<WindowUtil>('windowUtil');
  }

  setMainWindowPortrait(): void {
    if (this.windowStage === undefined) {
      return;
    }
    this.windowStage.getMainWindow((err, windowClass: window.Window) => {
      this.mainWindowClass = windowClass;
    });
  }

  setPhoneAutoRotation(): void {
    if (this.mainWindowClass === undefined) {
      return;
    }
    // 设置传感器自动旋转模式
    this.mainWindowClass.setPreferredOrientation(window.Orientation.AUTO_ROTATION);
  }

  setPhoneLandscape(): void {
    if (this.mainWindowClass === undefined) {
      return;
    }
    // 设置横屏显示模式
    this.mainWindowClass.setPreferredOrientation(window.Orientation.LANDSCAPE);
  }

  setWindowStage(windowStage: window.WindowStage): void {
    this.windowStage = windowStage;
  }

  getMainWindow(): window.Window | undefined {
    return this.mainWindowClass;
  }
}

注册并获取全局windowStage对象。

// EntryAbility.ets
import { WindowUtil } from '../utils/WindowUtil';

export default class EntryAbility extends UIAbility {
  // ...
  onWindowStageCreate(windowStage: window.WindowStage): void {
    let windowUtil = WindowUtil.getInstance();
    if (windowUtil !== undefined) {
      windowUtil.setWindowStage(windowStage);
      windowUtil.setMainWindowPortrait();
    }
    // ...
  }
  // ...
}

实现组件，当屏幕展开时，设置屏幕自动旋转，当屏幕半折时，设置屏幕为横屏显示模式。

// FoldableScreen.ets
import { display } from '@kit.ArkUI'
import { WindowUtil } from '../utils/WindowUtil';

@Entry
@Component
export struct FoldableScreen {
  @State isFoldable: Boolean = false
  @State foldStatus: display.FoldStatus = 1
  private windowUtil?: WindowUtil;

  aboutToAppear() {
    this.windowUtil = WindowUtil.getInstance();
    this.windowUtil?.setPhoneAutoRotation();

    // 实时监听设备折叠状态
    display.on('