#鸿蒙学习大百科#如何实现顶部图片延伸至状态栏，图片下方区域的界面延伸至底部导航条？

@Entry
@Component
struct Index {
  build() {
    Column() {
      Swiper() {
        Column() {
          Image($r('app.media.image01'))
            .height('50%').width('100%')
            // 设置图片延伸到状态栏
            .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
          Column() {
            Text('HarmonyOS 第一课')
              .fontSize(32)
              .margin(30)
            Text('Hello HarmonyOS Hello HarmonyOS Hello HarmonyOS Hello HarmonyOS Hello HarmonyOS')
              .fontSize(20).margin(20)
          }.height('50%').width('100%')
          .backgroundColor(Color.White)
          // 设置文本内容区背景延伸到导航栏
          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
        }
      }
      .width('100%')
      .height('100%')
      // 关闭Swiper组件默认的裁切效果以便子节点可以绘制在Swiper外。
      .clip(false)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.End)
  }
}