NativeScript：GridLayout 对齐问题

Posted 2023-04-13

【中文标题】NativeScript：GridLayout 对齐问题

【英文标题】：NativeScript: GridLayout alignment issue

【发布时间】：2018-10-28 14:49:15

【问题描述】：

我对@9​​87654323@ 很陌生。我正在关注它自己的文件。我正在尝试 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  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 中，

我需要作为尝试 1 的输出。

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

我不知道，为什么 UI Alignment 没有在

中修复

如果 是正确的方法，如何将输出作为尝试 1？

请帮帮我。

输出

【参考方案1】：

如果您希望第一行位于顶部，第二行位于中间，最后一行位于底部，那么您应该使用rows="auto,*,auto"，这正是这样做的。

试试这个

<Page loaded="loaded">

<GridLayout  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  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 吗？？

指导你做什么？

我可以得到你的邮件ID吗？我会问一些疑问，所以这对我有帮助。我对 html、CSS、XML、SCRIPTS 非常陌生。所以，我在学习中遇到了很多问题。所以，如果有任何疑问，我可以直接问你。

在linkedin上联系我：www.linkedin.com/in/bhavin-jalodara

***.com/questions/50577389/… 请帮帮我。