#鸿蒙通关秘籍#如何使用组件安全区方案实现沉浸式效果？

在默认组件安全区方案下，开发者可以通过expandSafeArea属性选择性地将UI组件绘制扩展到状态栏和导航条区域，而不改变其布局。即便不显式设置窗口为全屏，通过此方案仍能实现沉浸式效果。

typescript @Entry @Component struct Example { build() { Column() { Row() { Text('顶部行').fontSize(40).textAlign(TextAlign.Center).width('100%') } .backgroundColor('#F08080') .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

  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%').backgroundColor('#008000')
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

} }