#鸿蒙通关秘籍#如何处理鸿蒙应用中状态栏和底部导航栏背景色冲突？

如果状态栏和导航条的颜色不匹配但需要和界面元素颜色统一，可以通过为顶部和底部元素单独设置expandSafeArea属性来解决此问题，允许元素扩展背景到非安全展示区域。

typescript @Entry @Component struct Index { build() { Swiper() { Column() { Image($r('app.media.start')) .height('50%').width('100%') .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

    Column() {
      Text('课标题')
        .fontSize(32).margin(30)
      Text('详细描述')
        .fontSize(20).margin(20)
    }.height('50%').width('100%')
    .backgroundColor(Color.White)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
  }
}
.width('100%')
.height('100%')
.clip(false)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

} }