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相应的行以将其位置设置在顶部，底部或中心。