Question

我在一页中显示大约25个字段，因此我希望每行显示两个或三个字段。

我的布局如下，但是对设备的宽度（纵向/横向）没有反应

这是我的代码，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 Angular中的GridLayout适用于（potrait / landscape）

1 个答案: