HarmonyOS（设备场景适配）——折叠屏应用指南(二)

---

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

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

---

折叠屏悬停

折叠屏悬停描述折叠屏中的折痕避让和悬停适配，并介绍了折叠屏悬停的一些典型场景。

1.悬停适配与折痕避让

折叠屏产品具有独特的悬停态，即用户可以将产品半折后立在桌面上，实现免手持的体验。悬停态场景非常适合不需要频繁进行交互的任务，例如视频通话、播放视频、拍照、听歌等。

说明

悬停态时，中间弯折区域难以操作且显示内容会变形，因此建议页面内容进行折痕区避让适配。建议上半屏内容由中线向上下进行避让，避让距离从 getCurrentFoldCreaseRegion API获取。

悬停态若触发应用内的弹出框、半模态等操作型控件，建议交互型控件在下半屏显示；若触发跟随上下文的控件，例如菜单等，建议跟随触发元素的位置显示。控件高度需要根据悬停态的屏幕尺寸进行最大高度的适配。

说明
查看更多悬停态价值场景&适配规范， 点击访问 。

折痕避让

实现方案

系统提供的FolderStack组件已经实现了折痕自动避让，如果需要实现自定义布局，需要获取折痕区域进行布局避让。获取折痕区域可以使用 getCurrentFoldCreaseRegion  API。

import display from '@ohos.display';
try {
  display.getCurrentFoldCreaseRegion();
} catch (exception) {
  console.error('Failed to obtain the current fold crease region. Code: ' + JSON.stringify(exception));
}

参考代码

import display from '@ohos.display';
import { Callback } from '@ohos.base';
@Entry
@Component
export struct Crease {
  @State status: string = "1"

  // 启动就注册监听
  aboutToAppear() {
    let callback: Callback<display.FoldStatus> = (data: display.FoldStatus) => {
      console.info('Listening enabled. Data: ' + JSON.stringify(data));
      // 获取折叠折痕区域，left与top属性为矩形区域的左边界与上边界，width与height属性为矩形区域的宽高。
      this.status = data.toString() + "  " + display.getCurrentFoldCreaseRegion().creaseRects[0].left + "  " + display.getCurrentFoldCreaseRegion().creaseRects[0].top
        + "  " + display.getCurrentFoldCreaseRegion().creaseRects[0].width + "  " + display.getCurrentFoldCreaseRegion().creaseRects[0].height;
    };
    try {
      display.on('foldStatusChange', callback);
    } catch (exception) {
      console.error('Failed to register callback. Code: ' + JSON.stringify(exception));
    }
  }
  build() {
    Column() {
      Text(this.status).height(50).width("100%").textAlign(TextAlign.Center).fontSize(25).backgroundColor(Color.Red)
    }
    .height("100%")
    .width("100%")
    .borderWidth(1)
    .backgroundColor(Color.Pink)
    .justifyContent(FlexAlign.Start)
  }
}

悬停适配

实现方案

悬停适配推荐使用 FolderStack 组件，FolderStack继承于Stack(层叠布局)控件，具有折叠屏悬停能力，通过识别upperItems自动避让折叠屏折痕区后移到上半屏。

FolderStack(value?: { upperItems?: Array<string>})

参考代码

@Entry
@Component
export struct Folder {
  @State len_wid: number = 480
  @State w: string = "40%"
  build() {
    Column() {
      // upperItems将所需要的悬停到上半屏的id放入upperItems传入，其余组件会堆叠在下半屏区域
      FolderStack({ upperItems: ["upperitemsId"] }) {
        // 此Column会自动上移到上半屏
        Column() {
          Text("vedio zone").height("100%").width("100%").textAlign(TextAlign.Center).fontSize(25)
        }.backgroundColor(Color.Pink).width("100%").height("100%").id(&#