Mengekstrak Composable yang Dapat Digunakan Kembali
Refaktor layar menjadi komponen yang rapi.
Mengekstrak Composable yang Dapat Digunakan Kembali 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.
Saatnya Merapikan Kode
Kartu Anda sudah berfungsi, tetapi masih berupa satu fungsi panjang. Sekarang Anda akan memecahnya menjadi Composable kecil bernama jelas yang lebih mudah dibaca dan digunakan kembali. 🧩
Temukan Pola yang Berulang
Ketiga blok statistik hampir sama. Bentuk yang berulang seperti itu merupakan tanda kuat untuk mengekstrak satu Composable yang dapat digunakan kembali.
Ekstrak StatBlock
Pindahkan satu statistik ke fungsinya sendiri. Teruskan nilai yang berbeda, yaitu jumlah dan label, sebagai parameter.
@Composable
fun StatBlock(count: String, label: String) {
Column { Text(count); Text(label) }
}Gunakan Kembali Tiga Kali
Sekarang Baris statistik hanya terdiri atas tiga pemanggilan yang rapi. StatBlock yang sama menampilkan data berbeda setiap kali, tanpa duplikasi.
Row {
StatBlock("128", "Posts")
StatBlock("4.2k", "Followers")
StatBlock("180", "Following")
}Ekstrak Header
Kelompokkan avatar, nama, dan bio ke dalam Composable ProfileHeader. Fungsi layar utama menjadi lebih pendek dan jauh lebih mudah dipindai.
@Composable
fun ProfileHeader(name: String, bio: String) {
Column { /* avatar, name, bio */ }
}Beri Nama dengan Jelas
Nama Composable yang baik menjelaskan apa yang Anda lihat: ProfileHeader, StatBlock, FollowButton. Nama yang jelas membuat kartu terbaca seperti sebuah kalimat.
Teruskan Data
Jaga agar komponen tetap fleksibel dengan menerima parameter, bukan menetapkan nilai secara langsung. ProfileHeader yang sama dapat menampilkan pengguna mana pun.
ProfileHeader(name = "Ada Lovelace", bio = "Building apps.")Angkat Penanganan Ketukan
Biarkan induk menentukan tindakan saat diketuk. Sediakan parameter lambda onFollowClick agar FollowButton tetap umum.
@Composable
fun FollowButton(onClick: () -> Unit) {
Button(onClick = onClick) { Text("Follow") }
}Susun Layar
ProfileCard tingkat atas kini hanya menyusun bagian-bagiannya secara berurutan. Setiap Composable anak memiliki satu tugas, sesuai cara kerja Compose.
Column {
ProfileHeader(name, bio)
StatsRow(stats)
FollowButton(onFollow)
}Tambahkan Parameter Modifier
Composable yang benar-benar dapat digunakan kembali menerima parameter Modifier, dengan nilai bawaan Modifier. Pemanggil kemudian dapat mengatur ukuran dan jaraknya dari luar.
@Composable
fun StatBlock(
count: String,
label: String,
modifier: Modifier = Modifier
) { /* ... */ }Rapi dan Dapat Digunakan Kembali
Fungsi raksasa Anda kini menjadi beberapa Composable kecil, terfokus, dan dapat digunakan kembali. Struktur ini dapat berkembang seiring meningkatnya kompleksitas aplikasi Anda. 🎉
Pemeriksaan Cepat
Apa yang membuat Composable dapat digunakan kembali untuk data yang berbeda?
Ringkasan: Anda Telah Membuat Kartu
Anda telah melakukan refaktor pada kartu profil menjadi Composable kecil yang dapat digunakan kembali, dengan parameter dan slot Modifier. Kini Anda memiliki layar yang rapi dan dapat dikembangkan, dibangun dari awal hingga akhir.
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 “Mengekstrak Composable yang Dapat Digunakan Kembali” gratis?
Ya — teks lengkap “Mengekstrak Composable yang Dapat Digunakan Kembali” 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 “Mengekstrak Composable yang Dapat Digunakan Kembali”?
Refaktor layar menjadi komponen yang rapi. 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 “Mengekstrak Composable yang Dapat Digunakan Kembali” 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
- Membuat Sketsa Layout Kartu Profil
- Bagian Avatar, Nama & Bio
- Baris Statistik & Button Ikuti
- Mengekstrak Composable yang Dapat Digunakan Kembali