如何让 NativeScript 中的 GridLayout Angular 适合 (potrait/landscape)

Question

我有大约 25 个字段要显示在一页中，所以我想每行显示两个或三个字段。

我做了以下布局，但对设备宽度没有响应 (potrait/landscape)

这是我的代码，也可以玩link here.

<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" 不知何故有效，但我希望它具有响应宽度而不是固定宽度。

我有解决这个问题的示例吗？

Answer 1

这是您可以使用的example。它使用一个 GridLayout 在 8 行中有 17 个项目。我也用过 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>

如何让 NativeScript 中的 GridLayout Angular 适合 (potrait/landscape)

How to make GridLayout in NativeScript Angular suitable for (potrait/landscape)

nativescript

angular2-nativescript

angular