StackLayout 的垂直对齐方式

Question

我试图在 StackLayout 的底部放置一个按钮，但它不起作用。我不知道我做错了什么！

这是我的模板：

<Page actionBarHidden="true">
    <GridLayout rows="*, *, *, *" columns="*">
        <StackLayout horizontalAlignment="center"
                     verticalAlignment="center">
            <Label text="My Account" id="login-label"/>
        </StackLayout>
        <CardView row="1" class="cardStyle" margin="10"
                  elevation="40"
                  radius="4"
                  verticalAlignment="center"
                  horizontalAlignment="center"
                  rowSpan="2"
                  id="login-box">
            <StackLayout id="form-container">
                <TextField hint="Login"/>
                <TextField hint="Password"/>
                <Label text="Forgot password?" horizontalAlignment="right"/>
                <Button text="Button" @tap="loginButton()" verticalAlignment="bottom"/>
            </StackLayout>
        </CardView>
    </GridLayout>
</Page>

谢谢！

Answer 1

StackLayout 的设计不支持它。它用于在给定的方向上一个接一个地堆叠子元素，你不能有混合输出 - 顶部的几个子元素和底部或中心的几个子元素。

使用网格/停靠布局以便将元素停靠在底部。

StackLayout 的垂直对齐方式

StackLayout's vertical alignment

nativescript

nativescript-vue