LazyRow untuk Karusel
Bina rak yang boleh ditatal secara mendatar.
LazyRow untuk Karusel ialah pelajaran Jetpack Compose Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Jetpack Compose Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Jetpack Compose Academy merangkumi sejumlah 4 pelajaran.
Menatal ke Sisi
Kadang-kadang kandungan perlu bergerak ke kiri dan kanan, seperti rak filem. Untuk itu, gunakan LazyRow, iaitu pasangan mendatar kepada LazyColumn. ↔️
Mengapa Bukan Baris Biasa?
Baris biasa menyusun setiap anak serta-merta dan tidak boleh menatal. LazyRow menatal secara mendatar dan hanya membina item yang berada dalam paparan.
LazyRow Asas
Anda membekalkan item kepada LazyRow seperti kepada lajur, tetapi item tersebut disusun bersebelahan dan bukannya bertindan.
LazyRow {
items(movies) { movie ->
MovieCard(movie)
}
}Jarakkan Kad
Kad karusel memerlukan jarak. Gunakan horizontalArrangement bersama spacedBy untuk menetapkan ruang yang konsisten antara setiap kad.
LazyRow(
horizontalArrangement = Arrangement.spacedBy(12.dp)
) { }Padding di Hujung
Tambahkan contentPadding supaya kad pertama kelihatan sedikit dari tepi dan tidak terpotong rapat pada sempadan.
contentPadding = PaddingValues(horizontal = 16.dp)Menetapkan Saiz Setiap Kad
Berikan setiap item karusel width tetap supaya kad kekal seragam apabila pengguna meleret melaluinya.
MovieCard(movie, Modifier.width(140.dp))Sedikit Kelihatan Kad Seterusnya
Jadikan sebahagian daripada kad seterusnya kelihatan untuk memberi petunjuk bahawa masih ada kandungan. width kad yang sedikit lebih kecil berbanding skrin dapat melakukannya dengan baik.
val cardWidth = screenWidth * 0.8f
MovieCard(movie, Modifier.width(cardWidth))Pengepala di Atas Karusel
Karusel biasanya berada di bawah tajuk. Susun LazyRow di dalam Lajur, dengan pengepala Text di atasnya.
Column {
Text("Trending Now")
LazyRow { items(movies) { MovieCard(it) } }
}Penyarangan dalam LazyColumn
Skrin utama sering menyusun banyak karusel. Letakkan beberapa baris LazyRow di dalam LazyColumn induk untuk suapan bergaya Netflix.
LazyColumn {
items(shelves) { shelf ->
Shelf(shelf)
}
}Setiap Baris Memerlukan Lebar
LazyRow di dalam LazyColumn mengisi lebar yang tersedia secara automatik. Pastikan induknya memberikan lebar terhingga untuk dijadikan ukuran.
Bila Perlu Menggunakan LazyRow
Gunakan LazyRow untuk rak, penapis cip, gelembung cerita dan apa-apa kandungan yang menggalakkan leretan mendatar, bukannya tatalan ke bawah.
Semakan Pantas
Fikirkan tentang tatalan mendatar.
Imbas Kembali: Karusel
Anda membina rak mendatar dengan LazyRow: item bersebelahan, jarak, pelapik hujung, kad berlebar tetap dan penyarangannya di dalam suapan. 🎬
Pelajari Kotlin dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “LazyRow untuk Karusel” percuma?
Ya — teks penuh “LazyRow untuk Karusel” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Jetpack Compose Academy, tingkat taraf kepada CoddyKit PRO. Kursus Jetpack Compose Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “LazyRow untuk Karusel”?
Bina rak yang boleh ditatal secara mendatar. Anda berlatih Jetpack Compose Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Jetpack Compose Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Jetpack Compose Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “LazyRow untuk Karusel” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Jetpack Compose Academy ini?
Ya. Setiap pelajaran Jetpack Compose Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Galeri LazyVerticalGrid
- LazyRow untuk Karusel
- Sel Grid Adaptif berbanding Tetap
- State Tatal & Penatalan Terprogram