GridLayout и StackLayout UI Design в Nativescript - PullRequest
Новая
       1

GridLayout и StackLayout UI Design в Nativescript

0 голосов
/ 31 марта 2019

Я пытаюсь создать страницу входа в систему, где у меня есть поля формы, которые должны отображаться относительно входа или регистрации. следующий мой код: 

<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>

Я могу иметь идеальный экран входа в систему

enter image description here

но всякий раз, когда я пытаюсь получить регистрационные поля, я получаю только 3 поля:

enter image description here

Все поля не отображаются. Помоги мне. Благодаря.

1 Ответ

1 голос
/ 31 марта 2019

Это потому, что вы изначально объявили только 3 строки (rows="auto, auto, auto") для GridLayout.Если вы назначите что-либо кроме 0 to 2 атрибуту row в любом дочернем элементе GridLayout, оно будет недействительным и никогда не будет отображаться.

Также не рекомендуется использовать GridLayout, если вы просто хотите, чтобы элементыукладываться вертикально, используйте StackLayout.Что-то вроде 

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