设置商品属性

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

图 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

图 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

图 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

图 4。 卡片 #3 放置在卡片 #1 旁边，因为它是自动放置的。