#鸿蒙通关秘籍#如何为鸿蒙应用中的底部栏设定延伸效果？

通过将组件放置在安全区内，在需要时，使用expandSafeArea属性进行绘制边界的扩展。此方法特别适用于要求底部UI元素在布局时同时可以被导航条遮盖．

typescript @Entry @Component struct VideoCreateComponent { 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(Color.Green)

} }