我垂直分配底部的 StackLayout 在下面有一个间隙？

Question

今天我尝试重写 Snapchat 的 UI 作为一个挑战。我从登陆页面开始，但我在底部的按钮上遇到了一个问题，它们下面有一个间隙。

我很惊讶它不会自然地 100% 下降到底部，但是有没有办法做到这一点？我可以margin-top在底部堆栈布局上做，但有更好的方法吗？

更新：放在margin-top底部StackLayout只是将高度向上推，它不会让它下降，似乎定位被锁定在屏幕的 96% 左右。

这是我的游乐场代码 - https://play.nativescript.org/?template=play-tsc&id=zRSpSr

Answer 1

您可以使用它DockLayout来解决您的问题，它可以帮助您将子项目停靠到屏幕的任何一侧。<StackLayout>包含底部和顶部按钮的对接<Image>将为您解决问题。

<Page navigatingTo="onNavigatingTo" class="page" xmlns="http://schemas.nativescript.org/tns.xsd">
<DockLayout>
    <StackLayout dock="bottom" horizontalAlignment="center"
        class="footer">
        <Button class="button is-red" text="LOG IN!" tap="onSigninButtonTap"></Button>
        <Button class="button is-blue" text="SIGN UP" tap="onSigninButtonTap"></Button>
    </StackLayout>
    <Image dock="top" horizontalAlignment="center" class="logo" src="http://www.stickpng.com/assets/images/584c4c0b1fc21103bb375ba9.png" />
</DockLayout>
</Page>

CSS：

DockLayout {
    background-color: #FFFC31;
}

编辑：iOS SAFE AREA SUPPORT 可能会导致您出现问题，请查看 NativeScript 5.0 中指定的边距

你可以在这里读更多关于它的内容。