設定項目屬性

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 參數，將項目跨越多個儲存格。您可以將 UI 元素放入格線區域，也就是由多個格線儲存格組成的區域。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 參數中指定 UI 元素在格線區域的對齊方式。 在下列範例中，#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。 「Text with #1」會放置在格線區域的中央， 該區域由兩列和兩欄組成。

自動安插的項目與手動安插的項目混合

Grid 中沒有位置規格的 UI 元素會自動放置。這個範例說明如何混合使用自動放置的元素和指定格線儲存格的 UI 元素。卡片 #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 旁邊，因為這是自動放置的資訊卡。