Apa Itu Composable
Fungsi yang mendeskripsikan UI.
Apa Itu Composable adalah pelajaran Android 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 Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 4 pelajaran total.
Apa Itu Composable?
Dalam Jetpack Compose, Anda membuat layar dengan menulis fungsi, bukan dengan memuat tata letak XML. Composable hanyalah fungsi Kotlin yang menjelaskan bagian dari antarmuka pengguna Anda.
Anda menandai fungsi tersebut dengan anotasi @Composable. Ini memberi tahu kompiler Compose bahwa fungsi tersebut dapat menghasilkan UI dan memanggil fungsi composable lainnya.
Anotasi @Composable
Menambahkan @Composable di atas sebuah fungsi membuka kemampuan hebat Compose. Di dalamnya, Anda dapat memanggil composable lain seperti Text atau Column.
Sesuai konvensi, nama fungsi composable diawali dengan huruf kapital, sama seperti kelas. Hal ini memudahkan Anda mengenali fungsi UI dalam kode.
@Composable
fun Greeting() {
Text("Hello, Compose!")
}UI yang Dijelaskan dalam Kotlin
Sebuah composable tidak mengembalikan objek View. Sebaliknya, composable tersebut menghasilkan UI sebagai efek samping ketika Compose menjalankannya. Anda cukup menjelaskan apa yang seharusnya muncul di layar.
Gaya ini disebut gaya deklaratif: Anda menyatakan tampilan UI untuk data saat ini, lalu Compose menentukan cara menggambarnya.
@Composable
fun WelcomeMessage() {
Text("Welcome back!")
}Composable Memanggil Composable
Kekuatan sebenarnya berasal dari penyarangan. Sebuah composable dapat memanggil composable lain, sehingga Anda dapat membuat layar kompleks dari bagian-bagian kecil yang dapat digunakan kembali.
Di sini, composable induk memanggil composable anak. Compose menjalankan keduanya dari atas ke bawah dan menata UI yang dihasilkan.
@Composable
fun Header() {
Text("My App")
}
@Composable
fun Screen() {
Header()
}Fungsi Tanpa Nilai Pengembalian
Sebagian besar composable mengembalikan Unit, yang berarti tidak mengembalikan sesuatu yang berguna. Tugasnya adalah menghasilkan UI, bukan mengembalikan suatu nilai.
Jadi, Anda memanggil composable karena efeknya pada layar, bukan untuk menyimpan hasilnya. Hal ini terasa berbeda dari fungsi biasa, tetapi akan segera terasa alami.
@Composable
fun Footer() {
Text("\u00A9 2024 CoddyKit")
}Meneruskan Data sebagai Parameter
Composable dapat menerima parameter, sama seperti fungsi Kotlin biasa. Dengan demikian, composable yang sama dapat menampilkan data yang berbeda.
Di sini, Greeting menerima name dan menampilkannya. Meneruskan data membuat composable Anda fleksibel dan dapat digunakan kembali di seluruh aplikasi.
@Composable
fun Greeting(name: String) {
Text("Hello, " + name + "!")
}Menggunakan Kembali Composable
Karena composable adalah fungsi, Anda dapat memanggilnya berkali-kali dengan argumen yang berbeda. Setiap pemanggilan menghasilkan salinan UI-nya sendiri.
Beginilah cara Anda menghindari pengulangan: tulis UI sekali, lalu gunakan kembali di mana pun diperlukan.
@Composable
fun NameList() {
Greeting("Ada")
Greeting("Linus")
}Tempat Composable Berada
Anda menempatkan composable di dalam aktivitas Android menggunakan setContent. Blok tersebut merupakan titik masuk tempat Compose mengambil alih layar.
Di dalam setContent, Anda memanggil composable tingkat teratas, dan semua yang dihasilkannya menjadi UI aplikasi Anda.
setContent {
Greeting("World")
}Dasar-Dasar Rekomposisi
Ketika data yang dibaca composable berubah, Compose menjalankan kembali fungsi tersebut untuk memperbarui layar. Proses menjalankan kembali ini disebut rek composition.
Anda tidak perlu memperbarui UI secara manual. Anda mengubah data, lalu Compose secara otomatis melakukan rekomposisi pada composable yang terpengaruh. Dengan demikian, layar tetap selaras dengan status Anda.
Buat Composable Tetap Kecil
Kebiasaan yang baik adalah membuat setiap composable menjalankan satu tugas yang jelas. Composable yang kecil dan terfokus lebih mudah dibaca, diuji, dan digunakan kembali.
Jika sebuah fungsi menjadi terlalu besar, pecahlah menjadi composable yang lebih kecil dan panggil semuanya secara bersamaan. Diri Anda di masa depan akan berterima kasih.
@Composable
fun ProfileHeader(name: String) {
Text(name)
}Impor yang Akan Anda Temui
Composable berasal dari pustaka Compose. Anda akan sering mengimpor androidx.compose.runtime.Composable untuk anotasi dan androidx.compose.material3.Text untuk teks.
Android Studio biasanya menambahkan impor ini untuk Anda. Mengetahui asalnya akan membantu ketika suatu impor tidak tersedia.
import androidx.compose.runtime.Composable
import androidx.compose.material3.TextPemeriksaan Singkat
Mari kita tinjau hal-hal yang membuat sebuah fungsi menjadi composable.
Ringkasan
Anda telah mempelajari bahwa composable adalah fungsi Kotlin yang ditandai dengan @Composable dan menjelaskan UI secara deklaratif. Composable dapat menerima parameter, memanggil composable lain, dan diberi nama dengan huruf kapital.
Composable mengembalikan Unit dan menghasilkan UI, bukan mengembalikan suatu nilai. Ketika data berubah, Compose melakukan rekomposisi untuk memperbarui layar. Selanjutnya, Anda akan menampilkan teks nyata dan menumpuk tampilan dengan Column.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Apa Itu Composable” gratis?
Ya — teks lengkap “Apa Itu Composable” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Apa Itu Composable”?
Fungsi yang mendeskripsikan UI. Kamu berlatih Android 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 Android Academy?
Tidak diperlukan pengalaman sebelumnya. Android 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 “Apa Itu Composable” 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 Android Academy ini?
Ya. Setiap pelajaran Android 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.