Mulai menggunakan FlexBox

Halaman ini menjelaskan cara menerapkan tata letak FlexBox dasar.

Menyiapkan project

  1. Tambahkan library androidx.compose.foundation.layout ke lib.versions.toml project Anda.

    [versions]
compose = "1.11.0-alpha06"

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

  2. Tambahkan dependensi library ke build.gradle.kts aplikasi Anda.

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

Membuat tata letak FlexBox dasar

Contoh 1: FlexBox menata letak dua elemen Text yang disejajarkan di tengah.

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

Composable teks Hello World ditumpuk di atas satu sama lain dalam implementasi FlexBox dasar.

Contoh 2: FlexBox membungkus lima item ke dalam dua baris dan memperbesarnya secara tidak merata untuk mengisi ruang yang tersedia di setiap baris. Ada celah 8.dp secara vertikal dan horizontal di antara item.

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

Dua baris item berwarna, dengan tiga item berukuran tidak sama yang didistribusikan di baris atas dan dua item berukuran tidak sama di baris bawah.

Untuk mempelajari lebih lanjut perilaku FlexBox, lihat Menetapkan perilaku penampung dan Menetapkan perilaku item.

Sebelumnya
Ringkasan
Berikutnya
Menetapkan perilaku penampung