Petak

Catatan: Grid adalah API eksperimental dan dapat berubah. Laporkan masalah apa pun di issue tracker.

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.

Gambar 1. Tata letak dua dimensi yang fleksibel dan adaptif dengan 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

Catatan: Grid tidak mendukung pemuatan lambat.

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:

Gambar 2. Petak ini terdiri dari empat garis horizontal dan tiga garis vertikal.

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.

Gambar 3. Jalur petak untuk baris pertama.

Sel kisi

Sel petak adalah persimpangan jalur baris dan kolom.

Gambar 4. Sel petak yang merupakan persimpangan baris kedua dan kolom kedua.

Area petak

Area petak terdiri dari beberapa sel petak. Anda dapat menentukan area petak dengan membuat item mencakup beberapa jalur.

Gambar 5. Area petak yang terdiri dari empat sel petak.

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.

Gambar 6. Celah petak antara kolom pertama dan kolom kedua.