5

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

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

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

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

4

2 回答 2

1

您的布局没有问题，默认按钮波纹/阴影效果占用了该空间。您可以通过对按钮应用边框来摆脱它。

XML

<Page navigatingTo="onNavigatingTo" class="page" xmlns="http://schemas.nativescript.org/tns.xsd">
    <GridLayout>
        <StackLayout row="0" verticalAlignment="top" class="header">
            <Image horizontalAlignment="center" class="logo" src="http://www.stickpng.com/assets/images/584c4c0b1fc21103bb375ba9.png" />
        </StackLayout>
        <StackLayout row="1" verticalAlignment="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>
    </GridLayout>
</Page>

CSS

.button {
    width: 100%;
    color: #fff;
    font-size: 22px;
    padding: 50px;
    height: 200px;
    font-weight: 600;
    border-width: 1;
}

.button.is-red {
    border-color: #F8455A;
    background-color: #F8455A ;
}

.button.is-blue {
    border-color: #00ADFC;
    background-color:   #00ADFC;
}

更新游乐场

编辑：对于 iPhone X 或任何带有刘海屏的设备：

这是安全区域的问题，如果您希望您的组件超出安全区域插图，您只需对其进行设置iosOverflowSafeArea="true"。

尝试在注册按钮上进行设置，如果这样做，您可能需要在这些设备上相应地调整高度。将nativescript-platform-css用于设备特定的 CSS 样式。

于 2019-01-27T08:25:46.757 回答
0

您可以使用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 中指定的边距

在此处输入图像描述

你可以在这里阅读更多关于它的信息。

于 2019-01-27T07:58:24.863 回答