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

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

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

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

row パラメータと column パラメータは、アイテムが配置される行と列のトラック インデックスを指定します。トラックのインデックスは 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))
}

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

行と列を結合する

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

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

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

グリッド領域内の UI 要素の配置を設定するには、gridItem 修飾子の alignment パラメータで指定します。次の例では、#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))
}

「Text with #1」は、2 行 2 列で構成されるグリッド領域の中央に配置されます。
図 3。「Text with #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()
}

カード #3 は自動プレースメントであるため、カード <b>#1</b> の横に配置されます。
図 4。カード #3 は、自動配置であるため、カード #1 の横に配置されます。
前へ
コンテナのプロパティを設定する
次へ
概要