0Pricing
Jetpack Compose Academy · Pelajaran

Galeri LazyVerticalGrid

Susun item dalam grid yang dapat digulir.

Galeri LazyVerticalGrid adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Grid di Compose

Saat layar yang penuh foto memerlukan baris dan kolom yang rapi, gunakan LazyVerticalGrid. Grid ini menggulir secara vertikal dan hanya menyusun sel yang dapat Anda lihat. 🖼️

Mengapa Lazy?

Seperti LazyColumn, grid lazy melewati elemen di luar layar. Galeri yang berisi seribu gambar tetap mulus karena Compose membuat sel sesuai kebutuhan, bukan semuanya sekaligus.

Penyiapan Dasar

Anda memberikan jumlah kolom dan elemen kepada LazyVerticalGrid. Setiap elemen menjadi satu sel, lalu Compose menyusunnya dari kiri ke kanan, kemudian ke bawah.

LazyVerticalGrid(columns = GridCells.Fixed(2)) {
    items(photos) { photo ->
        PhotoCell(photo)
    }
}

GridCells.Fixed

Gunakan GridCells.Fixed(n) saat Anda menginginkan jumlah kolom yang pasti, seperti grid ikon tiga kolom yang rapi dan tidak pernah berubah.

columns = GridCells.Fixed(3)

Jarak Antarsel

Tambahkan ruang dengan parameter Arrangement. Parameter tersebut mengatur jarak antarbaris dan jarak antarkolom secara terpisah.

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) { }

Padding di Sekitar Grid

Gunakan contentPadding untuk memberi jarak pada seluruh grid dari tepi layar. Dengan begitu, sel pertama dan terakhir tidak menempel pada batas.

contentPadding = PaddingValues(16.dp)

Elemen dari Sebuah Daftar

Pembuat elemen menerima daftar data dan lambda sel Anda. Setiap elemen dalam daftar dipetakan tepat ke satu sel yang disusun.

items(galleryPhotos) { photo ->
    AsyncImage(model = photo.url, contentDescription = null)
}

Satu Sel Khusus

Memerlukan kepala daftar atau sel khusus yang hanya muncul sekali? Gunakan item (tunggal) untuk konten yang tidak boleh diulang di seluruh daftar.

item { GalleryTitle() }
items(photos) { PhotoCell(it) }

Membentang di Seluruh Kolom

Sebuah sel dapat membentang di seluruh baris dengan span. Ini cocok untuk judul bagian yang berada di atas foto-fotonya.

item(span = { GridItemSpan(maxLineSpan) }) {
    SectionHeader("Recent")
}

Pertahankan Sel Tetap Persegi

Galeri foto terlihat paling baik jika selnya berbentuk persegi. Terapkan aspectRatio(1f) pada setiap sel agar tingginya mengikuti lebarnya.

Box(Modifier.aspectRatio(1f)) { PhotoCell(photo) }

Grid atau Daftar

Pilih grid saat elemen bersifat visual dan memiliki bobot yang sama, seperti gambar mini. Pilih daftar saat setiap baris merupakan catatan berbeda dengan lebar penuh.

Pemeriksaan Cepat

Pertanyaan singkat tentang jumlah kolom.

Ringkasan: Galeri Grid

Anda telah mengenal LazyVerticalGrid: sel lazy, jumlah kolom, jarak, padding, dan span. Inilah pilihan utama Anda untuk galeri foto yang dapat digulir. ✨

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Galeri LazyVerticalGrid” gratis?

Ya — teks lengkap “Galeri LazyVerticalGrid” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Galeri LazyVerticalGrid”?

Susun item dalam grid yang dapat digulir. Kamu berlatih Jetpack Compose Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Galeri LazyVerticalGrid” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Galeri LazyVerticalGrid
  2. LazyRow untuk Karusel
  3. Sel Grid Adaptif vs Tetap
  4. State Gulir & Pengguliran Terprogram
← Kembali ke Jetpack Compose Academy