设置商品属性

虽然 Grid 配置定义了总体结构，但您可以使用 gridItem 修饰符来控制该结构内项的位置、跨度和对齐方式。

设置商品位置

使用 row 和 column 参数将商品放置到特定轨道或单元格中。

row 和 column 参数用于指定放置项的行和列轨道索引。轨道索引从 1 开始。仅指定 row 或 column（不能同时指定这两者）会将相应项放置在该轨道中的下一个可用空间中。同时指定两者会将相应商品放入该单元格中。

使用正整数指定从开头开始的轨道索引。 例如，如需将某个项放置在第一行第一列，请使用 gridItem(row = 1, column = 1)。

使用负整数指定相对于末尾的轨道。 例如，如需将某个项放置在倒数第二行和倒数第二列中，请使用 gridItem(row = -2, column = -2)。

在以下示例中，卡片 #2 位于第二行第二列。 卡片 #3 分配给最后一行（索引为 -1），其中它会自动占据该轨道中的第一个可用列（图 1）。

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3(modifier = Modifier.gridItem(row = -1, column = -2))
}
GridItem.kt

卡片 2 放置在网格单元格中的第二行第二列，卡片 3 放置在第三行的第一列。
图 1。 卡片 #2 放置在网格单元格中的第二行第二列，卡片 #3 放置在第三行的第一列。

跨行和列

使用 rowSpan 和 columnSpan 参数可使项目跨越多个单元格。您可以将界面元素放置在网格区域中，该区域由多个网格单元组成。借助 gridItem 修饰符，您可以使用 rowSpan 和 columnSpan 参数指定网格区域。在以下示例中，卡片 #1 放置在由两行两列组成的区域中（图 2）。

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    }
) {
    Card1(modifier = Modifier.gridItem(rowSpan = 2, columnSpan = 2))
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

卡片 4 跨越三列
图 2。 卡片 #4 跨越三列。

设置网格区域中的对齐方式

您可以在 gridItem 修饰符的 alignment 参数中指定网格区域中界面元素的对齐方式。在以下示例中，#1 放置在由两列两行组成的网格区域的中心。

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    },
) {
    Text(
        text = "#1",
        modifier = Modifier
            .gridItem(
                rowSpan = 2,
                columnSpan = 2,
                alignment = Alignment.Center
            ),
    )
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

带有“1”的文本放置在由两行两列组成的网格区域的中心。
图 3。 带有 #1 的文本放置在由两行两列组成的网格区域的中心。

自动放置与放置的商品混合使用

Grid 中没有位置规范的界面元素会进行自动放置。 此示例展示了如何将自动放置的元素与指定了网格单元格的界面元素混合使用。卡片 #2 和卡片 #4 是指定的网格单元格，其他项是自动放置的。

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3()
    Card4(modifier = Modifier.gridItem(row = 3, column = 1))
    Card5()
    Card6()
}
GridItem.kt

由于卡片 3 是自动放置的，因此它会放置在卡片 <b>1</b> 的旁边。
图 4。 卡片 #3 放置在卡片 #1 旁边，因为它是自动放置的。
上一页
设置容器属性
下一页
了解可折叠设备