Membuat petak yang dapat di-scroll

Anda dapat mengelola set data besar dan konten dinamis dengan petak lambat, sehingga meningkatkan performa aplikasi. Dengan composable petak lambat, Anda dapat menampilkan item dalam penampung yang dapat di-scroll, yang membentang di beberapa kolom atau baris.

Kompatibilitas versi

Implementasi ini mengharuskan minSDK project Anda ditetapkan ke API level 21 atau yang lebih tinggi.

Dependensi

Menentukan orientasi petak

Composable LazyHorizontalGrid dan LazyVerticalGrid memberikan dukungan untuk menampilkan item dalam petak. Petak vertikal lambat menampilkan itemnya dalam penampung yang dapat di-scroll secara vertikal, yang dibentangkan di beberapa kolom, sedangkan petak horizontal lambat memiliki perilaku yang sama pada sumbu horizontal.

Membuat petak yang dapat di-scroll

Kode berikut membuat petak scroll horizontal dengan tiga kolom:

@Composable
fun ScrollingGrid() {
    val itemsList = (0..15).toList()

    val itemModifier = Modifier
        .border(1.dp, Color.Blue)
        .width(80.dp)
        .wrapContentSize()

    LazyHorizontalGrid(
        rows = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(itemsList) {
            Text("Item is $it", itemModifier)
        }

        item {
            Text("Single item", itemModifier)
        }
    }
}
LazyListSnippets.kt

Poin-poin penting tentang kode

  • Composable LazyHorizontalGrid menentukan orientasi horizontal petak.
    • Untuk membuat petak vertikal, gunakan LazyVerticalGrid.
  • Properti rows menentukan cara mengatur konten petak.
    • Untuk petak vertikal, gunakan properti columns untuk menentukan pengaturan.
  • items(itemsList) menambahkan itemsList ke LazyHorizontalGrid. Lambda merender composable Text untuk setiap item dan menetapkan teks ke deskripsi item.
  • item() menambahkan satu item ke LazyHorizontalGrid saat lambda merender satu composable Text dengan cara yang mirip dengan items().
  • GridCells.Fixed menentukan jumlah baris atau kolom.

  • Untuk membuat petak dengan baris sebanyak mungkin, tetapkan jumlah baris menggunakan GridCells.Adaptive.

    Dalam kode berikut, nilai 20.dp menentukan bahwa setiap kolom minimal 20.dp, dan semua kolom memiliki lebar yang sama. Jika layar berukuran lebar 88 dp, ada 4 kolom dengan masing-masing berukuran 22 dp.

Hasil

Gambar 1. Petak horizontal yang dapat di-scroll menggunakan LazyHorizontalGrid.

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas sasaran pengembangan Android yang lebih luas:

Daftar dan petak memungkinkan aplikasi Anda menampilkan koleksi dalam bentuk yang menarik secara visual dan mudah digunakan oleh pengguna.
Koleksi panduan cepat
Pelajari cara fungsi composable dapat memudahkan Anda membuat komponen UI yang menarik berdasarkan sistem desain Desain Material.
Koleksi panduan cepat
Rangkaian video ini memperkenalkan berbagai Compose API, yang dengan cepat menunjukkan kepada Anda apa yang tersedia dan cara menggunakannya.
Koleksi panduan cepat

Ada pertanyaan atau masukan

Buka halaman pertanyaan umum (FAQ) dan pelajari panduan singkat atau hubungi kami dan beri tahu kami pendapat Anda.
Buka FAQ Berikan masukan