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.13.0-beta01"

[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 rata tengah.

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

Composable teks Halo Dunia yang ditumpuk satu sama lain dalam implementasi FlexBox dasar.

Contoh 2: FlexBox menggabungkan lima item menjadi dua baris dan mengembangkannya secara tidak merata untuk mengisi ruang yang tersedia di setiap baris. Ada celah 8.dp, baik secara vertikal maupun horizontal, di antara item.

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

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 perilaku FlexBox lebih lanjut, lihat Menetapkan perilaku penampung dan Menetapkan perilaku item.