设置商品属性

虽然 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 旁边，因为它是自动放置的。