設定項目屬性

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

「Text with #1」位於格線區域中央， 該區域由兩列和兩欄組成。
圖 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()
}

由於這是自動刊登位置，因此資訊卡 #3 會放在資訊卡 <b>#1</b> 旁邊。
圖 4。 系統會自動將資訊卡 #3 放在資訊卡 #1 旁邊。
上一頁
設定容器屬性
下一頁
總覽