Grid adalah API Jetpack Compose
yang memungkinkan Anda menerapkan tata letak dua dimensi secara fleksibel.
Dengan API ini, Anda dapat menampilkan item dalam tata letak multi-kolom
atau multi-baris yang beradaptasi dengan ukuran penampung yang tersedia.
Grid.
Apa perbedaan Grid dengan composable serupa?
Compose sudah menawarkan komponen serupa, seperti LazyVerticalGrid.
Komponen ini terutama ditujukan untuk visualisasi set data besar dan homogen—
misalnya, menampilkan katalog konten di aplikasi streaming video.
Komponen ini TIDAK dirancang
untuk tata letak struktural layar atau komponen yang kompleks.
Anda juga dapat menerapkan tata letak dua dimensi
dengan menggabungkan beberapa composable Row dan Column.
Namun, pendekatan ini memiliki beberapa kekurangan,
seperti hierarki yang dalam dan kesulitan dalam adaptasi.
Tabel berikut memberikan ringkasan tentang tata letak yang sesuai untuk setiap API:
| Komponen | Tujuan |
|---|---|
LazyVerticalGrid, LazyStaggeredGrid, LazyHorizontalGrid |
Visualisasi set data besar dan homogen yang memerlukan pemuatan lambat. |
Row, Column, FlexBox |
Tata letak satu dimensi |
Grid |
Tata letak dua dimensi |
Terminologi
Pahami terminologi berikut
untuk memahami cara kerja Grid.
Garis petak
Petak terdiri dari garis yang berjalan secara horizontal dan vertikal. Jika memiliki tiga baris, petak Anda memiliki empat garis horizontal, termasuk yang setelah baris terakhir. Dalam gambar berikut, setiap garis putus-putus mewakili garis petak:
Jalur petak
Jalur petak adalah ruang di antara dua garis petak. Jalur baris berada di antara dua garis horizontal, dan jalur kolom berada di antara dua garis vertikal. Untuk menentukan ukuran jalur ini, tetapkan ukuran saat Anda membuat petak.
Sel kisi
Sel petak adalah persimpangan jalur baris dan kolom.
Area petak
Area petak terdiri dari beberapa sel petak. Anda dapat menentukan area petak dengan membuat item mencakup beberapa jalur.
Jarak petak
Jarak petak adalah ruang di antara jalur petak. Anda tidak dapat menempatkan elemen UI ke dalam celah, tetapi Anda dapat merentangkan elemen UI di atasnya.
