Rozpocznij

Na tej stronie dowiesz się, jak wdrażać podstawowe układy Grid.

Konfigurowanie projektu

  1. Dodaj bibliotekę androidx.compose.foundation.layout do lib.versions.toml projektu.

    [versions]
    compose = "1.11.0-beta02"
    
    [libraries]
    androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout", version.ref = "compose" }
    
  2. Dodaj zależność biblioteki do pliku build.gradle.kts aplikacji.

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

Tworzenie podstawowej siatki

Poniższy przykład tworzy podstawową siatkę 2x3, w której kolumny i wiersze mają stały rozmiar 100.dp.

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

Podstawowa siatka składa się z wierszy i kolumn o stałym rozmiarze.
Rysunek 1. Podstawowa siatka składa się z wierszy i kolumn o stałym rozmiarze.

Aby dowiedzieć się, jak wdrożyć bardziej zaawansowane siatki, przeczytaj artykuły Ustawianie właściwości konteneraUstawianie właściwości elementu.