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.11.0-beta01"
   
   [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)
    }
) {
    RedRoundedBox()
    BlueRoundedBox()
    GreenRoundedBox(modifier = Modifier.width(350.dp).flex { grow(1.0f) })
    OrangeRoundedBox(modifier = Modifier.width(200.dp).flex { grow(0.7f) })
    PinkRoundedBox(modifier = Modifier.width(200.dp).flex { grow(0.3f) })
}
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.