Nativescript-Vue IOS安全区布局问题答案

【问题标题】：Nativescript-Vue IOS Safe Area Layout IssueNativescript-Vue IOS安全区布局问题
【发布时间】：2020-03-27 01:42:39
【问题描述】：

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

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

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

在操场上，您可以通过我在 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>

【问题讨论】：

您是否尝试过使用iosOverflowSafeArea property？
@TomG 是的，我已经尝试通过标记在上下所有点手动分配它，看看它是否有帮助。它没有。

标签： ios layout nativescript nativescript-vue

【解决方案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 设置为center 时，您会强制布局以适应其父级的中心，但为什么要将height 设置为100%，这是没有意义的。

【讨论】：