HarmonyOS 安全区域出错

Stack组件Row组件Tabs组件的高度换成百分比的试一下：

参考示例2的demo，把示例2中的PageOne.ets页面换成下面的PageOne.ets

示例2：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navigation-V5#示例2

// PageOne.ets
class TmpClass {
  count: number = 10
}

@Builder
export function PageOneBuilder(name: string, param: Object) {
  PageOne()
}

@Component
export struct PageOne {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  pageInfos: NavPathStack = new NavPathStack()
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]


  @Builder
  tabBuilder(index: number) {
    Column() {
      Image($r('app.media.app_icon'))
        .width(28)
        .height(28)
        .objectFit(ImageFit.Contain)
      Text(`Tab${index + 1}`)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .fontWeight(500)
        .lineHeight(14)
        .margin({ top: 2 })
    }
    .width('100%')
    .height('100%')
    .padding({ top: 8 })
  }

  build() {
    NavDestination() {
      Column() {
        Stack() {
          Text('111111111')
          Text('111111111')
          Text('111111111')
        }
        .width('100%')
        .height('5%')

        Row() {
          Text('2222222222')
          Text('333333333')
          Text('333333333')
        }
        .width('100%')
        .backgroundColor($r('sys.color.white'))
        .justifyContent(FlexAlign.Center)
        .height('15%')
        Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
          TabContent() {
            Column() {
              Column() {
                Text('Tab1')
                  .fontSize(36)
                  .fontColor('#182431')
                  .fontWeight(500)
                  .opacity(0.4)
                  .margin({ top: 30, bottom: 56.5 })
              }
              .layoutWeight(1)
              .width('100%')
              .backgroundColor(Color.Yellow)

              Divider()
                .strokeWidth(0.5)
                .color('#182431')
                .opacity(0.05)
            }
            .width('100%')
          }
          .tabBar(this.tabBuilder(0))

          TabContent() {
            Column() {
              Text('Tab2')
                .fontSize(36)
                .fontColor('#182431')
                .fontWeight(500)
                .opacity(0.4)
                .margin({ top: 30, bottom: 56.5 })
              Divider()
                .strokeWidth(0.5)
                .color('#182431')
                .opacity(0.05)
            }.width('100%')
          }.tabBar(this.tabBuilder(1))
        }
        .barHeight(56)
        .vertical(false)
        .scrollable(true)
        .barMode(BarMode.Fixed)
        .onChange((index: number) => {
          console.info(index.toString())
        })
        .width('100%')
        .height('80%')
        .expandSafeArea([SafeAreaType.SYSTEM], [])
      }
    }
    .title('pageOne')
    .hideTitleBar(true)
    .expandSafeArea([SafeAreaType.SYSTEM], [])
  }
}
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.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.