HarmonyOS鸿蒙Next中可折叠设备（折叠屏、PC等），如何在折叠状态让组件自动避让折叠屏折痕区后移到上半屏

HarmonyOS鸿蒙Next中可折叠设备（折叠屏、PC等），如何在折叠状态让组件自动避让折叠屏折痕区后移到上半屏 组件在折叠机 PC上全展开的时候默认显示在屏幕中间，当折叠状态，如何实现组件自动避让折叠屏折痕区后移到上半屏？

3 回复

可以使用FolderStack来实现，FolderStack继承于Stack(层叠布局)控件，新增了折叠屏悬停能力，通过识别upperItems自动避让折叠屏折痕区后移到上半屏。

FolderStack-系统预置UI组件库-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

参考：

折叠屏悬停态-特殊界面布局场景-多设备界面开发-一次开发，多端部署 - 华为HarmonyOS开发者

更多关于HarmonyOS鸿蒙Next中可折叠设备（折叠屏、PC等），如何在折叠状态让组件自动避让折叠屏折痕区后移到上半屏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，针对可折叠设备的组件避让折痕区，使用avoidArea属性配合displayArea API实现。通过displayArea.get()获取当前屏幕区域信息，判断设备折叠状态后，在布局代码中设置avoidArea为折痕区坐标范围。系统会自动将组件重新布局到上半屏安全区域。关键代码示例：

let displayArea = displayArea.get()
if(displayArea.isFolded) {
  component.avoidArea = { 
    left: 0, 
    top: foldAreaY, 
    right: screenWidth, 
    bottom: foldAreaY + foldHeight 
  }
}

该机制会在设备状态变化时触发自动布局调整。

在HarmonyOS Next中，可以通过以下方式实现组件自动避让折叠屏折痕区：

  1. 使用响应式布局API：
  • 通过display.getFoldableDisplayFeatures()获取设备折叠区域信息
  • 使用window.getAvoidAreaRect()获取需要避让的区域
  1. 关键代码示例：
import display from '@ohos.display';
import window from '@ohos.window';

// 获取折叠屏信息
let features = display.getFoldableDisplayFeatures();
let foldFeature = features.find(f => f.type === display.FoldType.FOLD);

// 获取避让区域
let avoidRect = window.getAvoidAreaRect(window.AvoidAreaType.TYPE_FOLD);

// 根据折叠状态调整布局
if (foldFeature && foldFeature.isFolded) {
  // 折叠状态下将组件移动到上半屏
  component.position = { 
    x: 0, 
    y: 0,
    width: '100%',
    height: avoidRect.top // 使用避让区域顶部作为高度限制
  };
}
  1. 布局建议：
  • 使用弹性布局(Flex)或网格布局(Grid)配合媒体查询
  • 设置displayFoldable属性处理不同折叠状态
  • 利用foldablePosture监听折叠状态变化
  1. 注意事项：
  • 测试不同折叠角度下的布局表现
  • 考虑横竖屏切换时的布局适配
  • 确保避让区域有足够的边距

这种实现方式可以确保组件在不同折叠状态下都能正确避让折痕区域，同时保持流畅的用户体验。

回到顶部