Как создать эту форму регистрации - NativeScript GridView

Question

Я новичок в NativeScript и сейчас перегружен.

Я пытаюсь получить этот макет (изображенный ниже) просто в виде скелета, чтобы я мог изучить и заполнить детали.

Начиная сверху, кажется, мне нужна сетка из 8 строк и 2 столбцов.

  <GridLayout rows="*, auto" columns="250, *">
    <Label text="First Name" />
    <Label text="Middle Initial" col="1" />

<TextField hint="First Name"         
        secure="false"
        autocorrect="false"
        maxLength="10"
        class="input input-border"/>

    <TextField hint="Middle Initial"         
        secure="false"
        autocorrect="false"
        maxLength="1"
        class="input input-border"/>

<!-- continue... -->

    <Label text="This is Label in row 0, col 0" rowSpan="2" colSpan="2" />
  </GridLayout>
</Page>

Этот метод не работает.Макет не отражает то, что мне нужно на изображении.

Не могли бы вы помочь мне хотя бы сгладить этот макет?У меня чертовски много времени.

Спасибо за внимание.

Answer 1

Ваша форма может выглядеть примерно так:

 <ScrollView>
    <StackLayout class="form">
        <Label class="m-5 h2" text="1. Lets create your account"></Label>
        <GridLayout columns="*,*">
            <StackLayout col="0" class="m-5">
                <Label text="First Name"></Label>
                <TextField class="input input-border"></TextField>
            </StackLayout>
            <StackLayout col="1" class="m-5">
                <Label text="Last Name"></Label>
                <TextField class="input input-border"></TextField>
            </StackLayout>
        </GridLayout>
        <GridLayout columns="*,*">
            <StackLayout col="0" class="m-5">
                <Label text="Email Address"></Label>
                <TextField class="input input-border"></TextField>
            </StackLayout>
            <StackLayout col="1" class="m-5">
                <Label text="Birth month and year"></Label>
                <TextField class="input input-border"></TextField>
            </StackLayout>
        </GridLayout>
    </StackLayout>
</ScrollView>

Подробнее о макетах читайте на https://www.nslayouts.com/

Answer 2

для чего-то подобного я бы обернул внешний элемент

<ScrollView>
  <StackLayout>
  <!-- Main form component wrapper -->
  <!-- Green component wrapper -->
  </StackLayout>
</ScrollView>

Это сделает ваш макет прокручиваемым, и элементы будут размещены друг над другом без указания фиксированного размера.

Для основной области формы я бы использовал макет примерно так

<GridLayout rows="*" columns="*">
  <!-- this stackLayout is the lefthand side of form -->
  <StackLayout row="0" col="0">
    <TextField ... />
    <TextField ... />
  </StackLayout>

  <!-- this stackLayout is the righthand side of form -->
  <StackLayout row="0" col="1">
    <Switch .../>
    <Birthday stuff... />
  </StackLayout>
</GridLayout>

Это разделит верхнюю область на два столбца и сложит поля друг над другом.

Зеленая область, вероятно, самая простая, как одна StackLayout с backgroundColor="someGreenColor", а затем с использованием GridLayout или AbsoluteLayout Я бы кодировал в три поля большое количество css.

Надеюсь, это поможет!