Menetapkan perilaku item

Gunakan Modifier.flex untuk mengontrol cara item berubah ukuran, urutan, dan disejajarkan di dalam FlexBox.

Ukuran item

Gunakan properti basis, grow dan shrink untuk mengontrol ukuran item.

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis = FlexBasis.Auto
            grow = 1.0f
            shrink = 0.5f
        }
    )
}FlexBoxSnippets.kt

Menetapkan ukuran awal

Gunakan basis untuk menentukan ukuran awal item sebelum ruang tambahan didistribusikan. Anda dapat menganggapnya sebagai ukuran pilihan item.

Jenis nilai	Perilaku	Cuplikan kode Catatan: Kotak memiliki ukuran intrinsik maksimum `100dp`	Contoh menggunakan lebar penampung `600dp`
`Auto` (default)	Gunakan ukuran intrinsik maksimum item. Misalnya, lebar intrinsik maksimum composable `Text` adalah lebar semua teksnya dalam satu baris - tanpa wrapping.	FlexBox { RedRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) BlueRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) } FlexBoxSnippets.kt
Memperbaiki `dp`	Ukuran tetap dalam Dp.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
Persentase	Persentase ukuran penampung.	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

Jika nilai dasar kurang dari ukuran minimum intrinsik item, ukuran minimum intrinsik akan digunakan sebagai gantinya. Misalnya, jika item Text yang berisi kata memerlukan 50dp untuk ditampilkan, tetapi juga memiliki basis = 10.dp, maka nilai 50dp akan digunakan.

Memperbesar item saat ada ruang

Gunakan grow untuk menentukan seberapa besar item bertambah saat ada ruang tambahan. Ini adalah ruang yang tersisa di penampung FlexBox setelah semua nilai basis item dijumlahkan. Nilai grow menunjukkan seberapa banyak ruang tambahan yang akan diterima turunan tertentu, relatif terhadap turunannya yang lain. Secara default, item tidak akan bertambah besar.

Contoh berikut menunjukkan FlexBox dengan tiga item turunan. Setiap nilai dasar memiliki nilai 100dp. Turunan pertama memiliki nilai grow positif. Karena hanya ada satu turunan dengan nilai grow, nilai sebenarnya tidak relevan - selama positif, turunan akan menerima semua ruang tambahan.

Gambar menunjukkan perilaku FlexBox saat ukuran penampungnya adalah 600dp.

FlexBox {
    RedRoundedBox(
        title = "400dp",
        modifier = Modifier.flex { grow = 1f }
    )
    BlueRoundedBox(title = "100dp")
    GreenRoundedBox(title = "100dp")
}FlexBoxSnippets.kt

Setiap turunan memiliki nilai dasar 100dp. Ada ruang penyimpanan tambahan sebesar 300dp.

Tiga item dengan basis 100dp masing-masing, dalam penampung 600dp, sebelum pertumbuhan.

Turunan 1 diperluas sebesar 300dp untuk mengisi ruang tambahan.

Item pertama bertambah untuk mengisi ruang tambahan 300 dp.

Dalam contoh berikut, ukuran penampung dan ukuran basis sama. Perbedaannya adalah setiap turunan memiliki nilai grow yang berbeda.

FlexBox {
    RedRoundedBox(
        title = "150dp",
        modifier = Modifier.flex { grow = 1f }
    )
    BlueRoundedBox(
        title = "200dp",
        modifier = Modifier.flex { grow = 2f }
    )
    GreenRoundedBox(
        title = "250dp",
        modifier = Modifier.flex { grow = 3f }
    )
}FlexBoxSnippets.kt

Setiap turunan memiliki nilai dasar 100dp. Ada ruang penyimpanan tambahan sebesar 300dp.

Tiga item dengan basis 100 dp masing-masing, dalam penampung 600 dp, sebelum pertumbuhan, dengan nilai pertumbuhan yang berbeda.

Total nilai pertumbuhan adalah 6.

Child 1 tumbuh sebesar (1 / 6) * 300 = 50dp

Child 2 tumbuh sebesar (2 / 6) * 300 = 100dp

Anak 3 tumbuh sebesar (3 / 6) * 300 = 150dp

Item berkembang untuk mengisi ruang tambahan 300 dp berdasarkan nilai perkembangan relatif.

Menciutkan item saat ruang tidak cukup

Gunakan shrink untuk menentukan seberapa banyak item menyusut saat penampung FlexBox tidak memiliki cukup ruang untuk semua item. shrink berfungsi dengan cara yang sama seperti grow, tetapi alih-alih mendistribusikan ruang ekstra ke item, kekurangan ruang didistribusikan ke item. Nilai shrink menentukan seberapa besar defisit ruang yang diterima item, atau lebih tepatnya, seberapa besar item akan menyusut. Secara default, item memiliki nilai shrink sebesar 1f, yang berarti item menyusut secara merata.

Contoh berikut menunjukkan dua composable Text dengan teks yang sama. Turunan pertama memiliki nilai penyusutan 1f, yang berarti turunan tersebut menyusut untuk menyerap semua kekurangan ruang.

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink = 1f }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink = 0f }
    )
}FlexBoxSnippets.kt

Saat ukuran penampung menyusut, Turunan 1 menyusut.

Ukuran penampung	UI FlexBox
`700dp`
`500dp`
`450dp`

Penyesuaian item

Gunakan alignSelf untuk mengontrol cara item disejajarkan dengan sumbu silang. Tindakan ini menggantikan properti alignItems penampung untuk item ini. Memiliki semua kemungkinan nilai yang sama, dengan penambahan Auto yang mewarisi perilaku penampung FlexBox.

Misalnya, FlexBox ini memiliki alignItems yang ditetapkan ke Start dan lima turunan yang menggantikan perataan sumbu silang.

FlexBox(
    config = {
        alignItems = FlexAlignItems.Start
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Center })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.End })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Stretch })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Baseline })
}FlexBoxSnippets.kt

Lima turunan dengan berbagai ukuran menggantikan properti alignItems.

Pesanan item

Secara default, FlexBox menata letak item sesuai urutan yang dideklarasikan dalam kode. Ganti perilaku ini menggunakan order.

Nilai default untuk order adalah nol, dan FlexBox mengurutkan item berdasarkan nilai ini dalam urutan menaik. Semua item yang memiliki nilai order yang sama akan disusun dalam urutan yang sama dengan urutan deklarasinya. Gunakan nilai order negatif dan positif untuk memindahkan item ke awal atau akhir tata letak tanpa mengubah tempat item tersebut dideklarasikan.

Contoh berikut menunjukkan dua item turunan. Yang pertama memiliki order default nol, dan yang kedua memiliki urutan -1. Setelah diurutkan, Anak 1 muncul setelah Anak 2.

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order = -1
        }
    )
}FlexBoxSnippets.kt

Dua kotak bulat, dengan kotak pertama berisi teks Hello dan kotak kedua berisi teks World.

Sebelumnya

Menetapkan perilaku penampung

Berikutnya

Mempelajari perangkat foldable

Menetapkan perilaku item Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.