如何使NativeScript中的GridLayout Angular适合（potrait/横向）

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

我制作了以下布局，但对设备宽度（potrait/横向）没有响应

这是我的代码，还有播放链接

我使用

width=“60”

进行trid，但我希望它能够响应宽度而不是固定宽度

我是否有一个解决方法示例？

这是您可以使用的方法。它使用一个

GridLayout

，8行中有17个itme。我也使用了

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>

auto

将只占用所需的空间。您只定义了3列，但在第一个网格布局中有4个元素。你是否至少有一个屏幕截图或你正在寻找的东西？我没有屏幕截图，但我希望它像引导响应。你所要做的就是适当地分割空间。尝试使用

columns=“*，*”

，在标签/文本字段之间/周围的任何空格处使用边距/填充。希望代码能稍微平静一些。。。

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