HarmonyOS 鸿蒙Next中使用全屏是不是就没有安全区了

HarmonyOS 鸿蒙Next中使用全屏是不是就没有安全区了 我的app是全屏沉浸式使用的，但是一旦变成全屏状态他就会识别不到安全区了

安全区域: EdgeInsets.zero
用了SafeArea也是没有用。
折叠屏也是识别不了安全区

cke_2217.png


更多关于HarmonyOS 鸿蒙Next中使用全屏是不是就没有安全区了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

【背景知识】

  • 安全区域是指页面的显示区域，默认情况下开发者开发的界面都布局在安全区域内，不与系统设置的避让区比如状态栏、导航栏区域重叠。提供属性方法允许开发者设置组件绘制内容突破安全区域的限制，通过expandSafeArea属性支持组件不改变布局情况下扩展其绘制区域至安全区外。
  • HarmonyOS中FlutterPage是由XComponent绘制。
  • XComponent设置expandSafeArea，需通过setxcomponentsurfacerect实现。
  • HarmonyOS化flutter目前已支持FlutterPage设置expandSafeArea属性：相关PR。

【解决方案】

  • 已支持HarmonyOS中的设置单页面沉浸式效果的方案：参考链接。
  • 已支持向FlutterPage中的XComponent组件设置expandSafeArea属性，使用方式：
FlutterPage({
  viewId: this.viewId,
  safeAreaTypes: [SafeAreaType.SYSTEM],
  safeAreaEdges: [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]
})

【总结】

全屏状态安全区不避让，需要在ArkTS中getWindowAvoidArea获取安全区高度后使用Flutter与ArkTS通信，组件设置内边距主动避让安全区，或者在需要全屏的页面使用expandSafeArea扩展安全区实现全屏。

更多关于HarmonyOS 鸿蒙Next中使用全屏是不是就没有安全区了的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我是用flutter鸿蒙化的，我的代码都在flutter那边，而且应用是横屏的。一下载页面就会横屏和沉浸式，所以不会得到区域属性，

ArkTS使用Flutter页面的时候使用

FlutterPage({
  viewId: this.viewId,
  safeAreaTypes: [SafeAreaType.SYSTEM],
  safeAreaEdges: [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]
})

不可以，

是的，全屏状态是没有安全区的。 如果你既想要安全区又想要全屏，可以试试expandSafeArea 方法。

只给某个页面使用全屏，简单方便：

https://blog.csdn.net/thelittleboy/article/details/142492706

不过我是做flutter鸿蒙化的代码都在flutter那边，请问这种情况该怎么办，

在HarmonyOS Next中，使用全屏模式时仍然存在安全区概念。系统会通过默认的边距设置自动处理安全区域，确保内容不会与设备的刘海、圆角或系统手势区域重叠。开发者可以通过safeArea属性或windowAvoidArea接口获取安全区域信息，并手动调整布局。全屏模式下需要显式处理安全区，否则可能导致内容被遮挡。安全区数据可通过getWindowAvoidArea方法实时获取，包括顶部、底部、左侧和右侧的避免区域。

在HarmonyOS Next中，全屏沉浸式模式下确实会影响安全区的识别。这是因为全屏模式下系统默认会忽略状态栏、导航栏等系统UI区域。针对您的问题，以下是解决方案：

  1. 对于折叠屏设备，建议使用WindowManager的getWindowAvoidArea API来获取安全区域，这个方法能正确识别折叠屏的异形区域。

  2. 在全屏模式下，可以尝试以下代码来强制保留安全区：

window.on('windowAvoidAreaChange', (area) => {
  // 处理安全区域变化
});
  1. 如果使用SafeArea组件无效，可以尝试手动获取安全区域：
import window from '@ohos.window';
const avoidArea = window.getTopWindow().getWindowAvoidArea();
  1. 确保在config.json中正确配置了全屏和沉浸式模式：
"abilities": {
  "config": {
    "fullScreen": true,
    "windowSoftInputMode": "adjustResize"
  }
}

这些方法应该能帮助您在全屏模式下正确处理安全区域问题。

回到顶部