使ってみる

このページでは、基本的な Grid レイアウトを実装する方法について説明します。

プロジェクトのセットアップ

1. プロジェクトの lib.versions.toml に androidx.compose.foundation.layout ライブラリを追加します。

   [versions]
   compose = "1.11.0-beta02"
   
   [libraries]
   androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout", version.ref = "compose" }
   

2. アプリの build.gradle.kts にライブラリの依存関係を追加します。

   dependencies {
       implementation(libs.androidx.compose.foundation.layout)
   }
   

基本的なグリッドを作成する

次の例では、列と行のサイズが 100.dp に固定された基本的な 2x3 グリッドを作成します。

Grid(
    config = {
        repeat(2) {
            column(100.dp)
        }
        repeat(3) {
            row(100.dp)
        }
    }
) {
    Card1(containerColor = PastelRed)
    Card2(containerColor = PastelGreen)
    Card3(containerColor = PastelBlue)
    Card4(containerColor = PastelPink)
    Card5(containerColor = PastelOrange)
    Card6(containerColor = PastelYellow)
}
DefineGrid.kt

図 1。 基本的なグリッドは、固定サイズの行と列で構成されます。

より高度なグリッドを実装する方法については、 コンテナのプロパティを設定するとアイテムのプロパティを設定するをご覧ください。