Menulis Fungsi @Composable
Definisikan fungsi UI Anda sendiri yang dapat digunakan kembali.
Menulis Fungsi @Composable adalah pelajaran Jetpack Compose 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 Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.
Yang Akan Anda Bangun
Dalam pelajaran ini Anda akan menulis Composable Anda sendiri dari awal. Pada akhirnya, Anda dapat mendeskripsikan satu bagian UI dengan satu fungsi Kotlin. 🚀
It Starts With @Composable
Sebuah Composable hanyalah sebuah fungsi yang ditandai dengan anotasi @Composable. Tag tersebut memberi tahu Compose bahwa fungsi ini memunculkan UI alih-alih mengembalikan nilai.
@Composable
fun Greeting() {
Text("Hello!")
}Beri Nama Seperti Sebuah Tipe
Composables yang mengeluarkan UI menggunakan nama PascalCase, seperti sebuah kelas. Jadi, Anda menuliskan Greeting, bukan greeting, untuk menandakan bahwa itu adalah blok penyusun UI.
Unit Pengembalian
Composable Anda tidak mengembalikan nilai. Komponen tersebut mengeluarkan (mengemisi) UI dengan memanggil Composable lain di dalamnya, sehingga tipe kembaliannya hanyalah Unit.
@Composable
fun Welcome() {
Text("Welcome aboard")
}Lewatkan Data Dengan Parameter
Buat Composable yang dapat digunakan kembali dengan menambahkan parameter. Masukkan sebuah nama dan fungsi yang sama dapat menyapa siapa pun yang Anda suka.
@Composable
fun Greeting(name: String) {
Text("Hello, " + name)
}Bantuan Nilai Default
Berikan parameter defaults agar pemanggil dapat melewatkannya. Di sini nama diatur secara default ke World, sehingga Greeting() tetap berfungsi dengan sendirinya.
@Composable
fun Greeting(name: String = "World") {
Text("Hello, " + name)
}Comosabel Bawaan
Anda jarang memulai dari nol. Compose menyediakan komponen siap pakai seperti Teks, Tombol, dan Gambar yang Anda panggil dari dalam fungsi Anda sendiri.
Impor Apa yang Anda Gunakan
Saat Anda memanggil Text, Android Studio menambahkan import untuk androidx.compose.material3.Text. Biarkan IDE melakukan impor otomatis sehingga Anda tidak perlu menebak paketnya.
Jaga Fungsi Tetap Kecil
Setiap Composable harus menjelaskan satu hal dengan jelas. Fungsi yang kecil dan terfokus lebih mudah dibaca, digunakan kembali, dan di-preview daripada fungsi yang besar.
Tanpa Pengembalian, Hanya Panggilan
Di dalam sebuah Composable, Anda tidak membuat dan mengembalikan widget. Anda cukup memanggil Composable lain dari atas ke bawah, dan Compose akan menggambarnya secara berurutan.
@Composable
fun Card() {
Text("Title")
Text("Subtitle")
}It Is Still Kotlin
Sebuah Composable pada dasarnya adalah Kotlin biasa. Anda dapat menggunakan variabel, kondisi, dan perulangan di dalamnya seperti fungsi lainnya.
@Composable
fun Status(online: Boolean) {
if (online) Text("Online")
else Text("Offline")
}Pemeriksaan Cepat
Saatnya untuk memeriksa ulang apa yang mendefinisikan sebuah Composable.
Ringkasan
Sekarang Anda dapat menulis Composable: beri tag dengan @Composable, beri nama dalam PascalCase, terima parameter, dan panggil Composable lain untuk memancarkan UI. 🎉
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menulis Fungsi @Composable” gratis?
Ya — teks lengkap “Menulis Fungsi @Composable” 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 “Menulis Fungsi @Composable”?
Definisikan fungsi UI Anda sendiri yang dapat digunakan kembali. 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 1 dari 4.
Berapa lama pelajaran “Menulis Fungsi @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 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
- Menulis Fungsi @Composable
- Pratinjau Langsung dengan @Preview
- Memanggil Composable dari Composable
- setContent: Tempat UI Anda Dimulai