FlowRow yang Membungkus Chip
Bangun layout pembungkus nyata dari awal.
FlowRow yang Membungkus Chip adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.
Yang Dilakukan Flow Row
Flow row menempatkan elemen anak dari kiri ke kanan, lalu membungkus ke baris baru saat kehabisan lebar. Cocok untuk chip tag dan filter. 🏷️
Mulai dari Komponen Tata Letak
Anda sudah mengenal alatnya: komponen Tata Letak. Logika pembungkusan sepenuhnya bergantung pada cara Anda mengukur dan menempatkan elemen anak.
Layout(content, modifier) { measurables, constraints ->
}Ukur Elemen Anak secara Longgar
Ukur setiap chip dengan maxWidth milik induk tanpa nilai minimum, sehingga ukuran chip menyesuaikan kontennya, bukan merenggang hingga memenuhi seluruh lebar.
val placeables = measurables.map {
it.measure(constraints.copy(minWidth = 0))
}Lacak Lebar Baris Saat Ini
Telusuri elemen yang dapat ditempatkan dan pertahankan lebar baris yang terus bertambah. Setiap chip yang ditambahkan menambah lebarnya sendiri.
Bungkus Saat Baris Melampaui Batas
Jika penambahan chip berikutnya akan melebihi maxWidth, atur ulang lebar baris dan geser ke bawah sebesar tinggi chip tertinggi di baris yang selesai.
if (rowWidth + placeable.width > maxWidth) {
y += rowHeight
rowWidth = 0
}Ingat Posisi Setiap Chip
Saat memindai, simpan x dan y yang dipilih untuk setiap chip dalam sebuah daftar. Anda akan menggunakan kembali posisi ini selama tahap penempatan.
Hitung Tinggi Total
Setelah baris terakhir, tinggi tata letak adalah y terakhir ditambah tinggi baris tersebut. Lebarnya cukup menggunakan maxWidth dari batasan.
Laporkan Ukuran dan Tempatkan Chip
Panggil layout dengan lebar dan tinggi total Anda, lalu lakukan perulangan pada posisi yang tersimpan dan panggil placeRelative pada setiap elemen yang dapat ditempatkan.
layout(maxWidth, totalHeight) {
placeables.forEachIndexed { i, p ->
p.placeRelative(positions[i])
}
}Tambahkan Jarak Horizontal
Sisipkan celah kecil di antara chip dengan menambahkan nilai jarak ke lebar baris setelah setiap chip. Celah vertikal bekerja dengan cara yang sama.
Compose Juga Menyediakan FlowRow
FlowRow resmi dari pustaka tata letak melakukan semua ini untuk Anda. Membuatnya sendiri menunjukkan persis cara kerja keajaiban tersebut di balik layar. ✨
FlowRow { Chip("Kotlin"); Chip("Compose") }Anda Telah Membuat Tata Letak Sungguhan
Anda mengukur elemen anak, membungkus baris berdasarkan lebar, dan menempatkan setiap chip secara manual. Itulah tata letak khusus berkualitas produksi yang dibangun dari prinsip dasar. 🎉
Pemeriksaan Singkat
Apa yang memicu flow row untuk memulai baris baru?
Rangkuman: FlowRow yang Membungkus Chip
Anda mengukur chip secara longgar, melacak lebar baris, dan membungkus ke baris baru saat melampaui batas, lalu menempatkan setiap chip. Itulah FlowRow dari awal. ✅
Pertanyaan yang Sering Diajukan
Apakah pelajaran “FlowRow yang Membungkus Chip” gratis?
Ya — teks lengkap “FlowRow yang Membungkus Chip” 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 “FlowRow yang Membungkus Chip”?
Bangun layout pembungkus nyata dari awal. 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 4 dari 4.
Berapa lama pelajaran “FlowRow yang Membungkus Chip” 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
- Model Ukur & Tempatkan
- Menulis Composable Layout
- Constraint & Pengukuran Intrinsik
- FlowRow yang Membungkus Chip