Penampung tata letak

Jetpack Compose menyediakan beberapa penampung tata letak untuk membantu Anda menyusun dan mengatur komponen UI. Meskipun composable tata letak dasar seperti Row dan Column menangani pengaturan yang sederhana, banyak aplikasi memerlukan solusi penampung yang lebih responsif dan adaptif seiring perubahan ukuran layar dan pertumbuhan data pengguna.

Penampung tata letak mencakup hal berikut:

  • Daftar lazy dan petak lazy: Komponen seperti LazyColumn, LazyRow, dan LazyVerticalGrid yang secara efisien menampilkan set data besar atau berukuran dinamis dengan hanya menyusun dan menata letak item yang saat ini terlihat di area pandang.
  • Pager: Penampung seperti HorizontalPager dan VerticalPager yang memungkinkan pengguna menggeser atau men-scroll antar-halaman konten.
  • Tata letak alur: Penampung satu dimensi yang responsif (FlowRow dan FlowColumn) yang otomatis menggabungkan item yang meluap ke baris atau kolom berikutnya saat ruang habis.
  • Petak: Struktur dua dimensi yang fleksibel yang menampilkan item dalam tata letak multi-kolom atau multi-baris yang beradaptasi dengan ukuran penampung.
  • FlexBox: Penampung adaptif yang terinspirasi dari CSS Flexbox, yang memberikan kontrol terperinci atas cara item digabungkan, diperbesar, diperkecil, dan disejajarkan di sepanjang sumbu utama dan silang untuk mengisi ruang yang tersedia.

Memilih penampung tata letak yang benar

Saat membuat tata letak di Compose, memilih antara penampung tata letak dasar dan yang lebih lanjut bergantung pada desain Anda, apakah item harus digabungkan saat ruang dibatasi, dan cara item diubah ukurannya secara dinamis.

Tabel berikut merangkum kemampuan untuk setiap penampung tata letak 1D Compose:

Container

Membungkus item ke baris baru

Perluasan per item

Penyusutan per item

Ukuran awal per item

Item bertambah untuk mengisi ruang yang tersedia di beberapa baris

Mengurutkan ulang item

Pemuatan lambat

Paling cocok untuk:

Baris / Kolom

❌

✅ (via weight) hanya satu baris

❌

❌

❌

❌

❌
  • Baris yang seragam dengan sejumlah kecil item tetap. Item sesuai dengan batas yang tersedia dan tidak perlu digabungkan di beberapa baris.

FlowRow / FlowColumn

✅

Terbatas

❌

❌

Sebagian

❌

❌
  • Digantikan oleh FlexBox.

LazyRow / LazyColumn

❌

❌

❌

❌

❌

❌

✅
  • Daftar item yang panjang atau tak terbatas, yang hanya perlu merender item yang terlihat untuk pengoptimalan performa.
  • Set data dinamis atau besar yang di-scroll dalam satu arah.

FlexBox

✅

✅

✅

✅

✅

✅

❌
  • Tata letak yang memerlukan kemampuan adaptif, seperti menentukan ukuran awal, pertumbuhan/penyusutan item dinamis (grow/shrink), pengurutan ulang visual (order), atau perataan lintas sumbu tingkat item (alignSelf).
  • Mengatur item dengan berbagai ukuran.

Tabel berikut merangkum kemampuan untuk Grid dan composable serupa lainnya:

Container

Perataan 2D ketat

Rentang item (kolom)

Item spanning (rows)

Pemuatan lambat

Paling cocok untuk:

Petak

✅

✅ (melalui GridArea)

✅

❌
  • Tata letak dua dimensi struktural tempat semua item berada di layar, dan memerlukan perataan horizontal dan vertikal yang eksplisit.
  • Merestrukturisasi tata letak secara adaptif di berbagai ukuran layar.

LazyVerticalGrid

✅

✅ (melalui span)

❌

✅
  • Feed scroll vertikal dan katalog besar yang memerlukan kolom.

LazyStaggeredGrid

❌ (Khusus 1D)

Sebagian (hanya rentang penuh)

❌

✅
  • Feed scroll dengan item yang memiliki tinggi berbeda-beda.

LazyHorizontalGrid

✅

❌

✅

✅
  • Carousel scroll horizontal atau data yang diberi nomor halaman dalam beberapa baris.

Menggabungkan baris dan kolom

❌

❌

❌

❌
  • Perakitan komponen sederhana, seperti menempatkan label teks di samping ikon.