xml - NativeScript:GridLayout 对齐问题

Question

我是 NativeScript 的新手。我正在关注它自己的文件。我正在尝试 UI 对齐。我无法做到这一点。我正在使用 Xcode IDE 并在 iOS Simulator 中运行。

杂货标志应该在顶部

文本框应该在中间

注册按钮应该在底部

尝试 1

<Page loaded="loaded">

<GridLayout height=auto horizontalAlignment="center" verticalAlignment="center" columns="*" rows="auto,auto,*"  backgroundColor="brown">
    <Image src="res://logo" stretch="aspectFit" horizontalAlignment="center" verticalAlignment="top" col="0" row="0"></Image>
    <GridLayout columns="*" rows="auto,auto,auto" verticalAlignment="center" backgroundColor="lightgray" col="0" row="1">

        <TextField class="userTxtFld" id="email" text="{{ email }}" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none"  col="0" row="0"/>
        <TextField secure="true" text="{{ password }}" hint="Password" col="0" row="1"/>
        <Button text="Sign in" tap="signIn"  col="0" row="2"/>

    </GridLayout>
    <Button text="Sign up for Groceries" class="link" tap="register" verticalAlignment="bottom" col="0" row="2"/>
</GridLayout>
</Page>

尝试 2

<Page loaded="loaded">

<GridLayout height="auto" horizontalAlignment="center" verticalAlignment="center" columns="*" rows="auto,auto,*"  backgroundColor="brown">
    <Image src="res://logo" stretch="aspectFit" horizontalAlignment="center" verticalAlignment="top" col="0" row="0"></Image>
    <GridLayout columns="*" rows="auto,auto,auto" verticalAlignment="center" backgroundColor="lightgray" col="0" row="1">

        <TextField class="userTxtFld" id="email" text="{{ email }}" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none"  col="0" row="0"/>
        <TextField secure="true" text="{{ password }}" hint="Password" col="0" row="1"/>
        <Button text="Sign in" tap="signIn"  col="0" row="2"/>

    </GridLayout>
    <Button text="Sign up for Groceries" class="link" tap="register" verticalAlignment="bottom" col="0" row="2"/>
</GridLayout>
</Page>

问题

在尝试 1 中，height=auto 和在尝试 2 中，height="auto"

我需要尝试 1 的输出。

我不知道，为什么 backgroundcolor 在 height=auto 中不显示

我不知道，为什么 UI Alignment 在 height="auto" 中没有修复

如果 height="auto" 是正确的方式，如何在尝试 1 中获得输出？

请帮助我。

输出

Answer 1

如果您希望第一行在顶部，第二行在中间，最后一行在底部，那么您应该使用 rows="auto,*,auto" 来实现。

试试这个

<Page loaded="loaded">

<GridLayout height="100%" horizontalAlignment="center" verticalAlignment="center" columns="*" rows="auto,*,auto"  backgroundColor="brown">
    <Image src="res://logo" stretch="aspectFit" horizontalAlignment="center" verticalAlignment="top" col="0" row="0"></Image>
    <GridLayout columns="*" rows="auto,auto,auto" verticalAlignment="center" backgroundColor="lightgray" col="0" row="1">

        <TextField class="userTxtFld" id="email" text="{{ email }}" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none"  col="0" row="0"/>
        <TextField secure="true" text="{{ password }}" hint="Password" col="0" row="1"/>
        <Button text="Sign in" tap="signIn"  col="0" row="2"/>

    </GridLayout>
    <Button text="Sign up for Groceries" class="link" tap="register" verticalAlignment="bottom" col="0" row="2"/>
</GridLayout>
</Page>

同样的输出也可以通过为所有 3 行分配相同的行号并使用 rows="*" 来实现。

像这样。

<Page loaded="loaded">

<GridLayout height="100%" horizontalAlignment="center" verticalAlignment="center" columns="*" rows="*"  backgroundColor="brown">
    <Image src="res://logo" stretch="aspectFit" horizontalAlignment="center" verticalAlignment="top" col="0" row="0"></Image>
    <GridLayout columns="*" rows="auto,auto,auto" verticalAlignment="center" backgroundColor="lightgray" col="0" row="0">

        <TextField class="userTxtFld" id="email" text="{{ email }}" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none"  col="0" row="0"/>
        <TextField secure="true" text="{{ password }}" hint="Password" col="0" row="1"/>
        <Button text="Sign in" tap="signIn"  col="0" row="2"/>

    </GridLayout>
    <Button text="Sign up for Groceries" class="link" tap="register" verticalAlignment="bottom" col="0" row="0"/>
</GridLayout>
</Page>

通过分配相同的行号 row="0"，由于 rows="*"，它们将相互重叠占据全高。现在我们将设置相应行的 verticalAllignment 以将其位置设置在顶部、底部或中心。