鸿蒙-expandSafeArea使用

原创

已于 2025-01-08 15:25:03 修改 · 1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙 #Harmony next #兼容API12

于 2024-12-24 17:00:25 首次发布

应用未使用setWindowLayoutFullScreen()接口设置窗口全屏布局时，默认使能组件安全区布局。可以使用expandSafeArea属性扩展安全区域属性进行调整

扩展安全区域属性原理

布局阶段按照安全区范围大小进行UI元素布局。
布局完成后查看设置了expandSafeArea的组件边界（不包括margin）是否和安全区边界相交。
如果设置了expandSafeArea的组件和安全区边界相交，根据expandSafeArea传递的属性则进一步扩大组件绘制区域大小覆盖状态栏、导航条这些非安全区域。
上述过程仅改变组件自身绘制大小，不进行二次布局，不影响子节点和兄弟节点的大小和位置。
子节点可以单独设置该属性，只需要自身边界和安全区域重合就可以延伸自身大小至非安全区域内，需要确保父组件未设置clip等裁切属性。
配置expandSafeArea属性组件进行绘制扩展时，需要关注组件不能配置固定宽高尺寸，百分比除外。

背景图和视频场景

设置背景图、视频控件大小为安全区域大小并配置expandSafeArea属性。

@Entry
@Component
struct SafeAreaExample1 {
  build() {
    Stack() {
      Image($r('app.media.bg'))
        .height('100%').width('100%')
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTT