Как сделать GridLayout в NativeScript Angular подходящим для (портрет / пейзаж) - PullRequest
Новая
       23

Как сделать GridLayout в NativeScript Angular подходящим для (портрет / пейзаж)

0 голосов
/ 06 июня 2019

У меня есть около 25 полей для отображения на одной странице, поэтому я хотел бы отобразить два или три поля в строке.

Я сделал макет ниже, но не реагирует на ширину устройства (портрет / пейзаж)

Вот мой код, также доступна ссылка для воспроизведения здесь . 

<StackLayout>
    <GridLayout columns="auto, *, auto" rows="auto, 25">
        <Label col="0" [colSpan]="1" text="Check 1" class=" h3 m-x-10 m-y-auto"></Label>
        <Switch col="1" [colSpan]="1"> </Switch>
        <Label col="2" [colSpan]="1" text="Check 2" class=" h3 m-x-10 m-y-auto"></Label>
        <Switch col="3" [colSpan]="1"> </Switch>
    </GridLayout>
    <GridLayout columns="auto, *, auto" rows="auto, 25">
        <TextField col="0" hint="Branch Code" class=" h3 m-x-10 m-y-auto"></TextField>
        <Label col="1" text="test date" class=" h3 m-x-10 m-y-auto"></Label>
    </GridLayout>
    <GridLayout columns="auto, *, auto" rows="auto, 25">
        <TextField col="0" hint="Name" class=" h3 m-x-10 m-y-auto"></TextField>
        <TextField col="1" hint="Address" class=" h3 m-x-10 m-y-auto"></TextField>
        <TextField col="2" hint="Mobile" class=" h3 m-x-10 m-y-auto"></TextField>
    </GridLayout>
</StackLayout>

У меня трид с width="60" как-то работает, но я хочу, чтобы он реагировал на ширину вместофиксированная ширина.

Есть ли образец для этого?

1 Ответ

0 голосов
/ 07 июня 2019

Вот пример , который вы можете использовать.Он использует GridLayout, который имеет 17 элементов в 8 строках.Я также использовал rowspan и colspan, и он полностью отзывчив. 

<GridLayout columns="*, *,*" rows="*,*,*,*,*,*,*,*" width="100%" height="900" backgroundColor="lightgray">

  <Label text="Label 1" row="0" col="0" backgroundColor="red"></Label>
  <Switch text="Label 2" row="0" col="1" colSpan="2" backgroundColor="green">
  </Switch>
  <Label text="Label 3" row="1" col="0" rowSpan="2" backgroundColor="blue"></Label>
  <Label text="Label 4" row="1" col="1" backgroundColor="yellow"></Label>
  <Label text="Label 5" row="1" col="2" backgroundColor="orange"></Label>
  <Label text="Label 6" row="2" col="1" backgroundColor="pink"></Label>
  <Label text="Label 7" row="2" col="2" backgroundColor="purple"></Label>

  <TextField text="TextField" row="3" col="1">
  </TextField>
  <Label text="Label 10" row="3" col="2" backgroundColor="purple"></Label>

  <Label text="Label 11" row="4" col="1" backgroundColor="pink"></Label>
  <Label text="Label 12" row="4" col="2" backgroundColor="purple"></Label>

  <TextField text="Label 13" row="5" col="1" backgroundColor="pink">
  </TextField>
  <Label text="Label 14" row="5" col="2" backgroundColor="purple"></Label>

  <Label text="Label 1" row="6" col="0" backgroundColor="red"></Label>
  <Label text="Label 2" row="6" col="1" colSpan="2" backgroundColor="green"></Label>

  <Switch text="Label 1" row="7" col="0" backgroundColor="red">
  </Switch>
  <Label text="Label 2" row="7" col="1" colSpan="2" backgroundColor="green"></Label>
</GridLayout>
...