设置商品属性

虽然 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 的 Text 放置在由两行两列组成的网格区域的中心。

自动放置与手动放置的商品混合

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 旁边，因为它是自动展示位置。