当前位置：首页 > news >正文

鸿蒙-expandSafeArea使用

news 2025/7/9 1:36:11

应用未使用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.BOTTOM]) // 图片组件的绘制区域扩展至状态栏和导航条。}.height('100%').width('100%')}
}

滚动类场景

要求需要List滚动类组件滚动过程中元素可以和导航条重合，滚动至底部时，元素在导航条上面需要避让。
由于expandSafeArea不改变子节点布局，因此，List等滚动类组件可以调用expandSafeArea，延伸List组件视图窗口大小而不改变ListItem内在布局。实现ListItem在滑动过程中显示在导航条下，但滚动至最后一个时显示在导航条上。

demo

未使用全屏模式

struct Index {@State message: string = 'Hello World';build() {Column(){Image($r('app.media.test')).width('100%').height('60%').objectFit(ImageFit.Cover)Text(this.message)}.justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Center).height('100%').width('100%')}
}

运行效果.png

使用之后代码：

struct Index {@State message: string = 'Hello World';build() {Column(){Image($r('app.media.test')).width('100%').height('60%').objectFit(ImageFit.Cover).expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP])Text(this.message)}.justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Center).height('100%').width('100%')}
}

运行效果2.png