鸿蒙 ArkTs 状态栏透明，即沉浸式UI

概要

鸿蒙 ArkTs 状态栏透明，即沉浸式UI

示例

@Entry
@Component
struct HomePage {
  build() {
    RelativeContainer(){
    }
    .height('100%')
    .width('100%')
    .backgroundImage($r('app.media.homebg'))
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])//控制组件扩展其安全区域。实现沉浸式
    .backgroundImageSize({
      width: '100%',
      height: '100%'
    })

主要的就是这个方法

.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

方法解释

expandSafeArea(types?: Array, edges?: Array)

参数

types ： 配置扩展安全区域的类型。未添加Metadata配置项时，页面不避让挖孔, CUTOUT类型不生效。
默认值：[SafeAreaType.SYSTEM, SafeAreaType.CUTOUT, SafeAreaType.KEYBOARD]
edges ： 配置扩展安全区域的方向。
默认值：[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM, SafeAreaEdge.START, SafeAreaEdge.END]

扩展至所有非安全区域。

原开发文档链接

鸿蒙文档链接