#鸿蒙通关秘籍#鸿蒙应用中的底部页签如何设置为背景延伸至导航条？

鸿蒙中的 Navigation 组件和 Tabs 组件默认实现了页签的延伸处理，开发者只需确保组件底部边界与导航条重合。对于自定义实现，可以通过设置底部元素的 expandSafeArea 属性，扩展背景色到导航条区域。

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

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

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

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

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

  Row() {
    Text('Bottom Row').fontSize(40).textAlign(TextAlign.Center).width('100%')
  }
  .backgroundColor(Color.Orange)
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
}
.width('100%').height('100%').alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)
.backgroundColor(Color.Green)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

} }