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

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

グリッドを定義する: 行と列の基本構造を設定します。
アイテムをグリッドに配置する: アイテムがグリッドセルに配置される仕組みと、フローの方向を変更する方法について説明します。
トラックのサイズを管理する: 固定サイズ、分数サイズ、フレキシブルサイズ、固有サイズを使用して、トラックのサイズを設定します。
間隔を設定: 行と列の間の「ガター」を管理します。

グリッドを定義する

グリッドは列と行で構成されます。コンポーザブル Grid には、GridConfigurationScope 内の列と行を定義するラムダを受け取る config パラメータがあります。次の例では、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

フロー関数は、アイテムを配置する方向を変更します。 — **図 2**。 `GridFlow.Row`（左）と `GridFlow.Column`（右）。

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

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

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

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

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

**図 3**。`Grid` の 4 つのプライマリトラックサイズ設定オプションを使用して定義された行の高さ。

グリッドトラックサイズを本質的に決定する

レイアウトを固定コンテナに強制的に配置するのではなく、コンテンツに合わせて調整する場合は、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

使ってみる

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

コンテナのプロパティを設定する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。