Menetapkan perilaku penampung

Untuk mengonfigurasi perilaku penampung FlexBox, buat blok FlexBoxConfig dan berikan menggunakan parameter config.

FlexBox(
    config = {
        direction(FlexDirection.Column)
        wrap(FlexWrap.Wrap)
        alignItems(FlexAlignItems.Center)
        alignContent(FlexAlignContent.SpaceAround)
        justifyContent(FlexJustifyContent.Center)
        gap(16.dp)
    }
) { // child items
}

Gunakan FlexBoxConfig untuk menentukan arah tata letak, perilaku penggabungan, perataan, dan celah antar-item.

Arah tata letak

Fungsi direction menetapkan sumbu utama, yang menentukan arah tata letak item. Properti ini menerima nilai berikut:

  • Row (default): Menetapkan sumbu utama menjadi horizontal. Di lokalitas kiri ke kanan, arahnya akan dari kiri ke kanan, dan sebaliknya di lokalitas kanan ke kiri.
  • RowReverse: Membalikkan arah Row.
  • Column: Menetapkan sumbu utama menjadi vertikal, dari atas ke bawah.
  • ColumnReverse: Membalikkan arah Column.

Menyejajarkan item dan mendistribusikan ruang ekstra

Bagian berikut menjelaskan cara meratakan item dan mendistribusikan ruang ekstra di sepanjang sumbu utama dan silang.

Sepanjang sumbu utama

Gunakan justifyContent untuk mendistribusikan item di sepanjang sumbu utama. Tabel berikut menunjukkan perilaku saat arahnya adalah Row.

Ilustrasi sumbu utama horizontal.

Start

 Item yang disejajarkan dengan awal sumbu utama.

Center

 Item disejajarkan ke tengah sumbu utama.

End

 Item yang disejajarkan dengan ujung sumbu utama.

SpaceBetween

 Item didistribusikan di sepanjang sumbu utama dengan ruang di antaranya.

SpaceAround

 Item didistribusikan di sepanjang sumbu utama dengan ruang di sekelilingnya.

SpaceEvenly

 Item didistribusikan di sepanjang sumbu utama dengan ruang yang merata di sekelilingnya.

Sepanjang sumbu silang

Gunakan alignItems untuk meratakan item di sepanjang sumbu silang dalam satu baris. Perilaku ini dapat diganti oleh setiap item menggunakan pengubah alignSelf.

Gambar berikut menunjukkan perilaku saat arahnya adalah Row:

Ilustrasi sumbu silang vertikal. Item disejajarkan dengan awal sumbu silang. Item yang disejajarkan dengan akhir sumbu silang. Item disejajarkan ke tengah sumbu silang. Item direntangkan untuk mengisi sumbu silang. Item disejajarkan dengan garis dasarnya di sepanjang sumbu silang.

Start

End

Center

Stretch

Baseline

Gunakan alignContent untuk meratakan baris ke sumbu silang dan untuk mendistribusikan ruang tambahan di antara baris. Properti ini hanya berlaku jika ada beberapa baris (penggabungan diaktifkan). Gambar berikut menunjukkan perilaku saat arahnya adalah Row:

Ilustrasi sumbu silang vertikal. Beberapa baris item yang sejajar dengan awal sumbu silang. Beberapa baris item yang sejajar dengan akhir sumbu silang. Beberapa baris item yang disejajarkan dengan bagian tengah sumbu silang. Beberapa baris item direntangkan untuk mengisi sumbu silang. Beberapa baris item yang didistribusikan di sepanjang sumbu silang dengan spasi di antaranya. Beberapa baris item yang didistribusikan di sepanjang sumbu silang dengan ruang di sekitarnya.

Start

End

Center

Stretch

SpaceBetween

SpaceAround

Gabungkan item

Penggabungan memungkinkan penampung FlexBox menjadi multi-baris, memindahkan item yang tidak muat ke baris atau kolom baru di sepanjang sumbu silang. Konfigurasikan perilaku penggabungan menggunakan wrap.

FlexWrap nilai

Contoh penggunaan arah Row

NoWrap (default): Mencegah item digabungkan. Item akan meluap jika ukuran utama tidak mencukupi.

 Item dalam satu baris meluap dari penampung karena penggabungan dinonaktifkan.

Wrap: Jika tidak ada cukup ruang untuk item (ditambah celah), baris baru akan dibuat ke arah sumbu silang. Misalnya, jika arahnya adalah Row, baris baru akan ditambahkan di bawah.

 Item yang digabungkan ke baris baru di bawah karena penggabungan diaktifkan.

WrapReverse: Sama seperti Wrap, kecuali baris baru ditambahkan ke arah yang berlawanan dengan sumbu silang. Misalnya, jika arahnya adalah Row, baris baru akan ditambahkan di atas.

 Item digabungkan ke baris baru di atas karena penggabungan terbalik diaktifkan.

Contoh berikut menunjukkan cara kerja algoritma penggabungan FlexBox. Penampung FlexBox memiliki ukuran utama 100dp, dengan wrap ditetapkan ke FlexWrap.Wrap dan celah 8dp. Elemen ini berisi tiga item dengan basis 20dp, 40dp, dan 50dp.

Ada 100dp ruang yang tersedia di baris. Anak 1 adalah 20dp. Ada ruang, sehingga Elemen Turunan 1 ditempatkan ke dalam baris.

Item pertama yang ditempatkan di penampung FlexBox.
Gambar 1. Item pertama yang ditempatkan dalam penampung FlexBox.

Ada 80dp ruang yang tersedia di baris. Kesenjangannya adalah 8dp. Anak 2 berusia 40dp. Ruang penyimpanan yang diperlukan adalah 48dp. Ada ruang, sehingga celah dan Elemen Turunan 2 ditempatkan ke dalam baris.

Item kedua ditempatkan di penampung FlexBox setelah item pertama.
Gambar 2. Item kedua ditempatkan di penampung FlexBox setelah item pertama.

Ada 32dp ruang yang tersedia di baris. Kesenjangannya adalah 8dp. Anak 3 berusia 50dp. Ruang penyimpanan yang diperlukan adalah 58dp. Tidak ada cukup ruang di baris saat ini, sehingga Elemen turunan 3 ditempatkan di baris baru.

Item ketiga ditempatkan di baris baru karena tidak muat di baris pertama.
Gambar 3. Item ketiga ditempatkan di baris baru karena tidak muat di baris pertama.

Menambahkan celah di antara item

Tambahkan celah di antara baris dan kolom menggunakan rowGap dan columnGap. Hal ini berguna untuk menghindari penambahan pengubah spasi ke turunan.

Jarak baris menambahkan ruang vertikal di antara item. Celah kolom menambahkan ruang horizontal di antara item. Gap menambahkan ruang horizontal dan vertikal di antara item.

rowGap

menambahkan ruang vertikal di antara item dan baris.

columnGap

menambahkan ruang horizontal di antara item dan baris.

gap adalah fungsi praktis yang menambahkan columnGap dan rowGap.
Sebelumnya
Mulai
Berikutnya
Menetapkan perilaku item