アイテムのプロパティを設定する

Grid 構成で全体構造を定義しますが、 gridItem 修飾子を使用して、その構造内のアイテムの位置、スパン、 配置を制御します。

アイテムの位置を設定する

row パラメータと column パラメータを使用して、アイテムを特定のトラックまたはセルに配置します。

row パラメータと column パラメータは、アイテムが配置される行と列のトラック インデックスを指定します。トラック インデックスは 1 ベースで、1 から始まります。 row または column のいずれか（両方ではない）のみを指定すると、アイテムはそのトラックの次の空きスペースに配置されます。両方を指定すると、アイテムはそのセルに配置されます。

正の整数を使用して、先頭からのトラック インデックスを指定します。 たとえば、アイテムを最初の行と列に配置するには、gridItem(row = 1, column = 1) を使用します。

負の整数を使用して、末尾からの相対的なトラックを指定します。 たとえば、アイテムを最後から 2 番目の行と列に配置するには、gridItem(row = -2, column = -2) を使用します。

次の例では、カード #2 は 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

カード #2 は 2 行目 2 列目のグリッドセルに配置され、カード #3 は 3 行目 1 列目に配置されます。
図 1。 カード #2 は 2 行目と 2 列目のグリッドセルに配置され、カード #3 は 3 行目の最初の列に配置されます。

行と列をスパンする

rowSpan パラメータと columnSpan パラメータを使用して、アイテムを複数のセルにまたがって配置します。UI 要素を グリッド領域に配置できます。 グリッド領域は、複数の グリッドセルで構成される領域です。 gridItem 修飾子を使用すると、rowSpan パラメータと columnSpan パラメータでグリッド領域を指定できます。次の例では、カード #1 は 2 行 2 列で構成される領域に配置されています（図 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

カード #4 は 3 列にまたがっています
図 2。 カード #4 は 3 列にまたがっています。

グリッド領域の配置を設定する

グリッド領域の UI 要素の配置を設定するには、 alignment 修飾子の gridItem パラメータで指定します。 次の例では、#1 は 2 列 2 行で構成されるグリッド領域の中央に配置されています。

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

「Text with #1」は、2 行 2 列で構成されるグリッド領域の中央に配置されます。
図 3。 #1 のテキストは、2 行 2 列で構成されるグリッド領域の中央に配置されています。

配置されたアイテムと混在する自動配置

位置が指定されていない 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

カード #3 は自動プレースメントであるため、カード <b>#1</b> の横に配置されます。
[Figure 4]. カード #3 は自動配置であるため、カード #1 の横に配置されます。
前へ
コンテナのプロパティを設定する
次へ
折りたたみ式デバイスについて