コンテナのプロパティを設定する

グリッド コンテナの構成を定義して、さまざまな画面サイズやコンテンツ タイプに対応できる柔軟なレイアウトを作成できます。このページでは、次の方法について説明します。

• グリッドを定義する: 行と列の基本構造を設定します。
• グリッドにアイテムを配置する: アイテムをグリッド セルに配置する方法と、フローの方向を変更する方法について説明します。
• トラックのサイズを管理する: 固定サイズ、パーセント サイズ、柔軟なサイズ、固有のサイズを使用してトラックのサイズを設定します。
• ギャップを設定する: 行と列の間の「ガター」を管理します。

グリッドを定義する

グリッドは列と行で構成されます。 Grid コンポーズ可能関数には、config パラメータ があり、GridConfigurationScope 内の列と行を定義するラムダを受け取ります。 次の例では、3 行 2 列のグリッドを定義しています。 各行と列のサイズは Dpで指定された固定サイズです。

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

グリッドにアイテムを配置する

Grid は、content ラムダの UI 要素を受け取り、グリッド セルに配置します。 行と列を明示的に定義しているかどうかに関係なく、グリッドはアイテムを配置します。 デフォルトでは、Grid は行の空いているグリッド セルに UI 要素を配置しようとします。配置できない場合は、次の行の空いているグリッド セルに配置します。 空のセルがない場合、Grid は新しい行を作成します。

次の例では、グリッドに 6 つのグリッド セルがあり、それぞれにカードが配置されています（図 1）。 各グリッド セルのサイズは 160dp x 90dp で、グリッド全体のサイズは 320dp x 270dp です。

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

このデフォルトの動作を列単位の入力に変更するには、 flow プロパティを GridFlow.Column に設定します。

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

トラックのサイズを管理する

行と列はまとめてグリッド トラックと呼ばれます。 グリッド トラックのサイズは、次のいずれかの方法で指定できます。

• 固定 （Dp）: 特定のサイズを割り当てます（例: column(180.dp)）。
• パーセント （Float）: 使用可能な合計スペースの割合を 0.0f から 1.0f の範囲で割り当てます（例: row(0.5f) は 50%）。
• 柔軟 (Fr)：固定トラックとパーセント トラックの計算後に、残りのスペースを比例配分します。たとえば、2 つの行が 1.fr と 3.fr に設定されている場合、後者は残りの高さの 75% を受け取ります。
• 固有: トラック内のコンテンツに基づいてトラックのサイズを設定します。詳細については、グリッド トラックのサイズを固有に決定するをご覧ください。

次の例では、さまざまなトラック サイズ設定オプションを使用して行の高さを定義しています。

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
GridTrackSize.kt

グリッド トラックのサイズを固有に決定する

Grid に 固有のサイズ設定を使用すると、 レイアウトを固定コンテナに強制的に配置するのではなく、 コンテンツに合わせて調整できます。 グリッド トラックのサイズは、次の値で決まります。

• GridTrackSize.MaxContent: コンテンツの固有の最大サイズを使用します（例: 幅は、折り返しなしのテキスト ブロック内のテキストの全長によって決まります）。
• GridTrackSize.MinContent: コンテンツの固有の最小サイズを使用します（例: 幅は、テキスト ブロック内の最長の単語によって決まります）。
• GridTrackSize.Auto: 使用可能なスペースに基づいて調整されるトラックに柔軟なサイズを使用します。デフォルトでは MaxContent と同様に動作しますが、親コンテナ内に収まるようにコンテンツを縮小して折り返します。

次の例では、2 つのテキストを並べて配置しています。 最初のテキストの列サイズは、テキストを表示するために必要な最小幅によって決まります。2 番目の列の幅は、テキストに必要な最大幅によって決まります。

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
}
GridTrackSize.kt

行と列の間にギャップを設定する

グリッド トラックのサイズを設定したら、 グリッドのギャップを変更して、トラック間の間隔を調整できます。 列のギャップは columnGap 関数で、 行のギャップは rowGap で指定できます。次の例では、各行の間に 16dp のギャップがあり、各列の間に 8dp のギャップがあります（図 5）。

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

便利な関数 gap を使用して、同じ列と行のサイズのギャップを定義したり、 1 つの関数を使用して列とギャップのサイズを個別に定義したりすることもできます。 次のコードでは、グリッドに 8dp のギャップを追加しています。

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt