javascript - Nativescript 中的 GridLayout 和 StackLayout UI 设计

Question

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

<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 个字段:

所有字段均未显示。帮帮我。谢谢。

Answer 1

这是因为您最初只为 GridLayout 声明了 3 行 (rows="auto, auto, auto")。如果将 0 到 2 之外的任何内容分配给 GridLayout 任何子元素上的 row 属性，则该属性将无效并且永远不会显示。

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

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