8.7 版本发布—WinterCG 兼容性第一部分
了解更多

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

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

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

  • 绝对数字：表示固定大小。
  • auto：使列的宽度与其最宽的子元素一样宽，或使行的高度与其最高的子元素一样高。
  • *：在填充所有 auto 和固定大小的列或行后，占用可用空间。

示例 ​

具有固定大小的 GridLayout ​

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

xml
<GridLayout columns="115, 115" rows="115, 115">
  <Label text="0,0" row="0" col="0" backgroundColor="#43B3F4" />
  <Label text="0,1" row="0" col="1" backgroundColor="#075B88" />
  <Label text="1,0" row="1" col="0" backgroundColor="#1089CA" />
  <Label text="1,1" row="1" col="1" backgroundColor="#43B3F4" />
</GridLayout>

具有星号大小的 GridLayout ​

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

xml
<GridLayout columns="*, 2*" rows="2*, 3*" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43B3F4" />
  <Label text="0,1" row="0" col="1" backgroundColor="#075B88" />
  <Label text="1,0" row="1" col="0" backgroundColor="#1089CA" />
  <Label text="1,1" row="1" col="1" backgroundColor="#43B3F4" />
</GridLayout>

具有固定和自动大小的 GridLayout ​

以下示例创建了一个网格，其中包含一列自动大小的列和一列固定大小的列。行具有固定高度。

xml
<GridLayout columns="80, auto" rows="80, 80" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43B3F4" />
  <Label text="0,1" row="0" col="1" backgroundColor="#075B88" />
  <Label text="1,0" row="1" col="0" backgroundColor="#1089CA" />
  <Label text="1,1" row="1" col="1" backgroundColor="#43B3F4" />
</GridLayout>

具有混合大小和合并单元格的 GridLayout ​

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

xml
<GridLayout columns="40, auto, *" rows="40, auto, *" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43B3F4" />
  <Label text="0,1" row="0" col="1" colSpan="2" backgroundColor="#075B88" />
  <Label text="1,0" row="1" col="0" rowSpan="2" backgroundColor="#1089CA" />
  <Label text="1,1" row="1" col="1" backgroundColor="#43B3F4" />
  <Label text="1,2" row="1" col="2" backgroundColor="#1089CA" />
  <Label text="2,1" row="2" col="1" backgroundColor="#075B88" />
  <Label text="2,2" row="2" col="2" backgroundColor="#43B3F4" />
</GridLayout>

属性 ​

columns ​

ts
columns: string // eg. *, 50, auto

一个字符串值，表示以逗号分隔的列宽。

有效值：绝对数字、auto 或 *

  • 数字表示绝对列宽。
  • auto 使列的宽度与其最宽的子元素一样宽。
  • * 使列占据所有可用的水平空间。空间按比例分配到所有星号大小的列。您可以设置 3* 和 5* 等值来指示 3:5 的大小比例。

rows ​

ts
rows: string // eg. *, 50, auto

一个字符串值，表示以逗号分隔的行高。

有效值：绝对数字、auto 或 *

  • 数字表示绝对行高。
  • auto 使行的宽度与其最高的子元素一样高。
  • * 使行占据所有可用的垂直空间。空间按比例分配到所有星号大小的行。您可以设置 3* 和 5* 等值来指示 3:5 的大小比例。

…继承的 ​

未显示其他继承的属性。请参阅 API 参考。

子元素属性 ​

当一个元素是 <GridLayout> 的直接子元素时，这些属性将被考虑在内。

row ​

ts
row: number

元素所在的行。

行从 0 开始索引，因此第一行由 0 表示。

col ​

ts
col: number

元素所在的列。

列从 0 开始索引，因此第一列由 0 表示。

rowSpan ​

ts
rowSpan: number

元素跨越的行数。

colSpan ​

ts
colSpan: number

元素跨越的列数。

下一页
RootLayout