ios - Nativescript-Vue IOS 安全区域布局问题

Question

我在 iPhone X 及更高版本上使用 Nativescript-Vue 的 ios 安全区域有问题。我认为这与我们拥有的嵌套框架/页面设置有关。我们使用自定义 header ，然后在我们想要导航时为应用程序的“主体”使用嵌套框架内的页面导航。自定义 header 将毫无问题地进入安全区域，但底部安全区域仍然存在。

嵌套的 Page 组件本身似乎进入了安全区域，但该页面内的任何布局似乎都被限制在安全区域之外。

这是一个展示正在发生的事情的 Playground :https://play.nativescript.org/?template=play-vue&id=pXmqzC&v=3

在 playground 中，您可以通过我在 Page 和 StackLayout 周围绘制的边框看到这一点。

以下是布局代码，以防您无法访问 playground 示例:

<template>
    <Page actionBarHidden="true">
        <GridLayout rows="90, *">
            <StackLayout row="1" height="100%">
                <Frame>
                    <Page actionBarHidden="true" height="100%" borderWidth="5" borderColor="red" >
                        <StackLayout height="100%" width="100%" horizontalAlignment="center" verticalAlignment="center" backgroundColor="green" borderWidth="5">
                            <Label text="Body" horizontalAlignment="center" verticalAlignment="center" />
                        </StackLayout>
                    </Page>
                </Frame>
            </StackLayout>
            <!-- Simulates a header -->
            <StackLayout row="0" height="90" width="100%" horizontalAlignment="center" verticalAlignment="center" backgroundColor="blue">
                <Label text="Header" horizontalAlignment="center" verticalAlignment="center" />
            </StackLayout>
        </GridLayout>
    </Page>
</template>

Answer 1

一个简单的解决方法是移除 Frame 上方的 StackLayout。

<template>
  <Page actionBarHidden="true">
    <GridLayout rows="90, *">
      <!-- <StackLayout row="1" height="100%"> -->
      <Frame row="1" borderWidth="0">
        <Page actionBarHidden="true" height="100%" borderWidth="5" bordercolor="red">
          <StackLayout
            height="100%"
            width="100%"
            horizontalAlignment="center"
            verticalAlignment="center"
            backgroundColor="green"
            borderWidth="5"
          >
            <Label text="Body" horizontalAlignment="center" verticalAlignment="center" />
          </StackLayout>
        </Page>
      </Frame>
      <!-- </StackLayout> -->
      <!-- Simulates a header -->
      <StackLayout
        row="0"
        height="90"
        width="100%"
        horizontalAlignment="center"
        verticalAlignment="center"
        backgroundColor="blue"
      >
        <Label text="Header" horizontalAlignment="center" verticalAlignment="center" />
      </StackLayout>
    </GridLayout>
  </Page>
</template>

要记住的事情，

• 您实际上并不需要 Frame 上方的 StackLayout，它在那里没有任何用途。
• 避免设置 height="100%" 默认情况下页面/框架的内容占据它的整个高度，你不必指定百分比，至少当它是 100 时
• 当您将 verticalAlignment 设置为居中时，您强制布局以其父级居中，但同样为什么要将高度设置为 100%，这没有意义。