NativeScript：GridLayout 对齐问题

Question

我对 NativeScript 很陌生。我正在关注它自己的文件。我正在尝试 UI 对齐。我无法做到这一点。我在 iOS Simulator.

中使用 Xcode IDE 和运行

杂货店徽标应位于顶部

文本域应该在中间

注册按钮应该在底部

尝试 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 以将其位置设置在顶部、底部或中心。

NativeScript：GridLayout 对齐问题

NativeScript: GridLayout alignment issue

xml

grid-layout

nativescript

nativescript-telerik-ui