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], [])
  }
}