Javascript Nativescript中的GridLayout和StackLayout UI设计

我正在尝试设计一个登录页面，其中有一些表单字段需要显示在登录或注册方面。以下是我的代码：

<FlexboxLayout class="page">
    <StackLayout class="form">
        <Image class="logo" src="~/assets/images/logo.png"></Image>
        <Label class="header" v-show="isLoggingIn" textWrap="true" text="Welcome"></Label>
        <Label class="header" v-show="!isLoggingIn" textWrap="true" text="Register"></Label>
        <label class="subtitle" v-show="isLoggingIn" textWrap="true" text="Already have account? Login with your credentials"></label>
        <label class="subtitle" v-show="!isLoggingIn" textWrap="true" text="Fill the details to register!"></label>

        <GridLayout rows="auto, auto, auto">
            <StackLayout row="0" class="input-field">
                <TextField class="input" hint="Your email registered with us" :isEnabled="!processing"
                       keyboardType="email" autocorrect="false"
                       autocapitalizationType="none" v-model="user.email"
                       returnKeyType="next" @returnPress="focusPassword"></TextField>
                <StackLayout class="hr-light"></StackLayout>
            </StackLayout>

            <StackLayout row="1" class="input-field">
               <TextField class="input" ref="password" :isEnabled="!processing"
                       hint="Your password" secure="true" v-model="user.password"
                       :returnKeyType="isLoggingIn ? 'done' : 'next'"
                       @returnPress="focusConfirmPassword"></TextField>
               <StackLayout class="hr-light"></StackLayout>
            </StackLayout>

            <StackLayout row="2" v-show="!isLoggingIn" class="input-field">
                 <TextField class="input" ref="confirmPassword" :isEnabled="!processing"
                        hint="Confirm password" secure="true" v-model="user.password_confirmation"
                        returnKeyType="next" @returnPress="focusFirstName"></TextField>
                  <StackLayout class="hr-light"></StackLayout>
             </StackLayout>

             <StackLayout row="3" v-show="!isLoggingIn" class="input-field">
                  <TextField class="input" ref="firstName" :isEnabled="!processing"
                         hint="First Name" v-model="user.first_name" autocorrect="false"
                         autocapitalizationType="none" returnKeyType="next" @returnPress="focusLastName"></TextField>
                   <StackLayout class="hr-light"></StackLayout>
              </StackLayout>

              <StackLayout row="4" v-show="!isLoggingIn" class="input-field">
                   <TextField class="input" ref="lastName" :isEnabled="!processing"
                          hint="Last Name" v-model="user.last_name" autocorrect="false"
                          autocapitalizationType="none" returnKeyType="next" @returnPress="focusMobile"></TextField>
                    <StackLayout class="hr-light"></StackLayout>
               </StackLayout>

               <StackLayout row="5" v-show="!isLoggingIn" class="input-field">
                    <TextField class="input" ref="mobile" :isEnabled="!processing"
                           hint="Mobile Number" v-model="user.mobile" autocorrect="false"
                           autocapitalizationType="none" returnKeyType="done"></TextField>
                     <StackLayout class="hr-light"></StackLayout>
                </StackLayout>

                <ActivityIndicator rowSpan="6" :busy="processing"></ActivityIndicator>
        </GridLayout>

        <Button :text="isLoggingIn ? 'Log In' : 'Sign Up'" :isEnabled="!processing" @tap="submit" class="btn btn-primary m-t-20"></Button>
        <Label *v-show="isLoggingIn" text="Forgot your password?" class="login-label" @tap="forgotPassword()"></Label>

    </StackLayout>

    <Label class="login-label sign-up-label" @tap="toggleForm">
        <FormattedString>
            <Span :text="isLoggingIn ? 'Don’t have an account? ' : 'Back to Login'"></Span>
            <Span :text="isLoggingIn ? 'Sign up' : ''" class="bold"></Span>
        </FormattedString>
    </Label>
</FlexLayout>

但每当我尝试注册字段时，我只会得到3个字段：


不会显示所有字段。帮帮我。谢谢。
这是因为您最初只为GridLayout声明了3行（
rows=“auto，auto，auto”
）。如果为GridLayout的任何子元素上的
行
属性指定了除
0到2
之外的任何内容，则该属性将无效且永远不会显示

另外，不建议使用GridLayout如果您只想垂直堆叠项目，请使用StackLayout。大概

<GridLayout>
    <StackLayout>
        ...
        <StackLayout v-show="!isLoggingIn" class="input-field">
        ...
        </StackLayout>
        ...
    </StackLayout>
    <ActivityIndicator :busy="processing"></ActivityIndicator>
</GridLayout>


...
...
...
这是因为您最初只为GridLayout声明了3行（
rows=“auto，auto，auto”
）。如果为GridLayout的任何子元素上的
行
属性指定了除
0到2
之外的任何内容，则该属性将无效且永远不会显示

另外，不建议使用GridLayout如果您只想垂直堆叠项目，请使用StackLayout。大概

<GridLayout>
    <StackLayout>
        ...
        <StackLayout v-show="!isLoggingIn" class="input-field">
        ...
        </StackLayout>
        ...
    </StackLayout>
    <ActivityIndicator :busy="processing"></ActivityIndicator>
</GridLayout>


...
...
...
GridLayout实际上是大多数事情的推荐方式。在这种情况下，他希望活动指示器在视图中居中，这似乎是（
rowSpan=6
）无法通过单个堆栈布局完成的。当我从
StackLayout
图像中移除
rows=“auto，auto，auto”
和
rows
标记时，我得到了这一点：我认为它不是那样工作的！我做了
rows=“auto，auto，auto，auto，auto”
所有字段都可见，但按钮现在不可见@Bass是的，GridLayout是最推荐的，但不是所有字段都可见。如果您想一个接一个地堆叠像这里这样的项目，应该选择StackLayout。@NitishKumar您需要一个ScrollView以便可以向下滚动到按钮GridLayout实际上是大多数事情的推荐方式。在这种情况下，他希望活动指示器在视图中居中，这似乎是（
rowSpan=6
）无法通过单个堆栈布局完成的。当我从
StackLayout
图像中移除
rows=“auto，auto，auto”
和
rows
标记时，我得到了这一点：我认为它不是那样工作的！我做了
rows=“auto，auto，auto，auto，auto”
所有字段都可见，但按钮现在不可见@Bass是的，GridLayout是最推荐的，但不是所有字段都可见。如果您希望像这里这样一个接一个地堆叠项目，则应选择StackLayout。@NitishKumar您需要一个滚动视图，以便可以向下滚动到按钮