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

Question

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

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

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

在 playground 中，您可以通过我在页面和 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%" Page / Frame的内容默认占满整个高度，你不必指定百分比，至少在100时是这样
当您将 verticalAlignment 设置为居中时，您强制布局以其父项为中心，但同样为什么将高度设置为 100%，这没有意义。

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

Nativescript-Vue IOS Safe Area Layout Issue

layout

ios

nativescript

nativescript-vue