鸿蒙 使用 expandSafeArea 实现顶部沉浸式导航

1， 先看效果； 

1. // 设置顶部绘制延伸到状态栏
2. .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

2， 直接cv 粘贴代码

 

// xxx.ets
@Entry
@Component
struct Example {
  build() {
    Column() {
      Row() {
        Text('')
          .fontSize(40)
          .textAlign(TextAlign.Center)
          .width('100%')
      }
      .height(50)
      .backgroundColor(Color.White)
      // 设置顶部绘制延伸到状态栏
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

      Row() {
        Text('鲁班').fontSize(40)
      }.backgroundColor(Color.Green).padding(20)

      Row() {
        Text('张飞').fontSize(40)
      }.backgroundColor(Color.Orange).padding(20)

      Row() {
        Text('后裔').fontSize(40)
      }.backgroundColor(Color.Orange).padding(20)

      Row() {
        Text('亚瑟').fontSize(40)
      }.backgroundColor(Color.Orange).padding(20)

      Row() {
        Text('底部').fontSize(40).textAlign(TextAlign.Center).width('100%')
      }
      .backgroundColor(Color.Orange)

      // 设置底部绘制延伸到导航条
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .backgroundColor(Color.Pink)
    .justifyContent(FlexAlign.SpaceBetween)
  }
}