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-alpha06"
   
   [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

Örnek 1: 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.