<GridLayout> 是一个布局容器，允许您以类似表格的方式排列其子元素。

网格由行、列和单元格组成。一个单元格可以跨越一行或多行，一列或多列。它可以包含多个子元素，这些子元素可以跨越多行和多列，甚至相互重叠。

默认情况下，<GridLayout> 有一列和一行。您可以通过配置 columns 和 rows 属性添加列和行。在这些属性中，您需要设置列和行的数量及其宽度和高度。您可以通过列出它们的宽度，用逗号分隔来设置列数。您可以通过列出它们的高度，用逗号分隔来设置行数。

您可以设置列宽和行高的固定大小，也可以以响应方式创建它们。

• 绝对数字： 表示固定大小。
• auto： 使列的宽度与其最宽子元素的宽度相同，或使行的高度与其最高子元素的高度相同。
• *： 在填充所有自动和固定大小的列或行后，占用尽可能多的可用空间。空间按比例分配给所有星号大小的列或行。您可以设置 3* 和 5* 等值，以指示 3:5 的大小比例。

有关更多信息，请参阅 Props。

示例

具有固定大小的网格布局

以下示例创建一个简单的 2x2 网格，具有固定的列宽和行高。

<GridLayout columns="115, 115" rows="115, 115">
  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
  <Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
  <Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
</GridLayout>

具有星号大小的网格布局

以下示例创建一个具有响应式设计的网格，其中空间按比例分配给子元素。

<GridLayout columns="*, 2*" rows="2*, 3*" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
  <Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
  <Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
</GridLayout>

具有固定和自动大小的网格布局

以下示例创建一个网格，其中一列为自动大小，另一列为固定大小。行具有固定高度。

<GridLayout columns="80, auto" rows="80, 80" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
  <Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
  <Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
</GridLayout>

具有混合大小和合并单元格的网格布局

以下示例创建一个具有响应式设计、混合宽度和高度设置以及一些合并单元格的复杂网格。

<GridLayout columns="40, auto, *" rows="40, auto, *" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
  <Label text="0,1" row="0" col="1" colSpan="2" backgroundColor="#1c6b48"/>
  <Label text="1,0" row="1" col="0" rowSpan="2" backgroundColor="#289062"/>
  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
  <Label text="1,2" row="1" col="2" backgroundColor="#289062"/>
  <Label text="2,1" row="2" col="1" backgroundColor="#1c6b48"/>
  <Label text="2,2" row="2" col="2" backgroundColor="#43b883"/>
</GridLayout>

Props

子元素附加属性

当一个元素是 <GridLayout> 的直接子元素时，您可以使用以下附加属性。