LazyRow untuk Karusel
Bangun deretan konten yang dapat digulir secara horizontal.
LazyRow untuk Karusel adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.
Menggulir ke Samping
Terkadang konten perlu bergeser ke kiri dan kanan, seperti rak film. Untuk itu, gunakan LazyRow, versi horizontal dari LazyColumn. ↔️
Mengapa Bukan Row Biasa?
Row biasa langsung menyusun setiap anak dan tidak dapat menggulir. LazyRow menggulir secara horizontal dan hanya membuat elemen yang terlihat.
LazyRow Dasar
Anda memberikan elemen kepada LazyRow seperti pada kolom, tetapi elemen-elemen tersebut berjejer berdampingan, bukan bertumpuk.
LazyRow {
items(movies) { movie ->
MovieCard(movie)
}
}Memberi Jarak Antar Kartu
Kartu korsel memerlukan jarak. Gunakan horizontalArrangement dengan spacedBy untuk menetapkan jarak yang konsisten di antara setiap kartu.
LazyRow(
horizontalArrangement = Arrangement.spacedBy(12.dp)
) { }Padding di Ujung
Tambahkan contentPadding agar kartu pertama sedikit terlihat dari tepi, bukan terpotong rapat pada tepinya.
contentPadding = PaddingValues(horizontal = 16.dp)Mengatur Ukuran Setiap Kartu
Beri setiap elemen korsel width tetap agar kartu tetap seragam saat pengguna menggesernya.
MovieCard(movie, Modifier.width(140.dp))Sedikit Intipan Kartu Berikutnya
Buat sebagian kartu berikutnya terlihat sebagai petunjuk bahwa masih ada konten lainnya. width kartu yang sedikit lebih kecil dibandingkan lebar layar dapat melakukannya dengan baik.
val cardWidth = screenWidth * 0.8f
MovieCard(movie, Modifier.width(cardWidth))Header di Atas Karusel
Karusel biasanya berada di bawah judul. Letakkan LazyRow di dalam Column, dengan header Text di atasnya.
Column {
Text("Trending Now")
LazyRow { items(movies) { MovieCard(it) } }
}Penumpukan di Dalam LazyColumn
Layar beranda sering menumpuk banyak karusel. Letakkan beberapa baris LazyRow di dalam LazyColumn induk untuk membuat umpan bergaya Netflix.
LazyColumn {
items(shelves) { shelf ->
Shelf(shelf)
}
}Setiap Baris Memerlukan Lebar
LazyRow di dalam LazyColumn otomatis mengisi lebar yang tersedia. Pastikan saja induknya memberikan width terbatas sebagai acuan pengukuran.
Kapan Menggunakan LazyRow
Gunakan LazyRow untuk rak konten, penyaring berbentuk chip, gelembung cerita, dan konten apa pun yang mengundang usapan horizontal, bukan pengguliran ke bawah.
Pemeriksaan Singkat
Pikirkan tentang pengguliran horizontal.
Rangkuman: Karusel
Anda membuat rak horizontal dengan LazyRow: item berdampingan, jarak, padding akhir, kartu dengan lebar tetap, serta penumpukan di dalam umpan. 🎬
Belajar Kotlin dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “LazyRow untuk Karusel” gratis?
Ya — teks lengkap “LazyRow untuk Karusel” 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 “LazyRow untuk Karusel”?
Bangun deretan konten yang dapat digulir secara horizontal. 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 2 dari 4.
Berapa lama pelajaran “LazyRow untuk Karusel” 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
- Galeri LazyVerticalGrid
- LazyRow untuk Karusel
- Sel Grid Adaptif vs Tetap
- State Gulir & Pengguliran Terprogram