FlexBox'ı kullanmaya başlama

Bu sayfada, temel FlexBox düzenlerinin nasıl uygulanacağı açıklanmaktadır.

Proje oluşturma

1. androidx.compose.foundation.layout kitaplığını projenizin lib.versions.toml dosyasına ekleyin.

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

2. Kitaplık bağımlılığını uygulamanızın build.gradle.kts dosyasına ekleyin.

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

Temel FlexBox düzenleri oluşturma

1. örnek: FlexBox, ortada hizalanmış iki Text öğesi yerleştiriyor.

FlexBox(
    config = {
        direction(FlexDirection.Column)
        alignItems(FlexAlignItems.Center)
    }
) {
    Text(text = "Hello", fontSize = 48.sp)
    Text(text = "World!", fontSize = 48.sp)
}
FlexBoxSnippets.kt

2. örnek: FlexBox, beş öğeyi iki satıra sarar ve her satırdaki kullanılabilir alanı doldurmak için bunları eşit olmayan şekilde büyütür. Öğeler arasında hem dikey hem de yatay olarak 8.dp boşluk var.

FlexBox(
    config = {
        wrap(FlexWrap.Wrap)
        gap(8.dp)
    }
) {
    // All boxes have an intrinsic width of 100.dp
    // Some grow to fill any remaining space on the row.
    RedRoundedBox()
    BlueRoundedBox()
    GreenRoundedBox(modifier = Modifier.flex { grow(1.0f) })
    OrangeRoundedBox(modifier = Modifier.flex { grow(1.0f) })
    PinkRoundedBox(modifier = Modifier.flex { grow(1.0f) })
}
FlexBoxSnippets.kt

FlexBox davranışı hakkında daha fazla bilgi edinmek için Kapsayıcı davranışını ayarlama ve Öğe davranışını ayarlama başlıklı makaleleri inceleyin.