設定項目屬性

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))
}

卡片 #2 放在第二列和第二欄的格線儲存格中，卡片 #3 則放在第三列的第一欄。
圖 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))
}

資訊卡 #4 橫跨三欄
圖 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))
}

含有 #1 的文字會置於格線區域的中央，該區域由兩列和兩欄組成。
圖 3. 含有 #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()
}

卡片 3 是自動刊登位置，因此會放在卡片 <b>1</b> 旁邊。
圖 4. 資訊卡 #3 位於資訊卡 #1 旁邊，因為它是自動刊登位置。