Android Academy · Pelajaran

Composable Pertama Anda

Buat dan pratinjau fungsi composable.

Composable Pertama Anda adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Composable Pertama Anda

Composable hanyalah fungsi Kotlin yang diberi tanda @Composable. Mari kita tulis composable yang menyapa pengguna berdasarkan namanya.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

Anotasi @Composable

Anotasi @Composable memberi tahu kompiler bahwa fungsi ini dapat menghasilkan UI dan dapat memanggil composable lain. Tanpanya, Anda tidak dapat memanggil Text, Button, atau fungsi UI lainnya.

Konvensi Penamaan

Composable yang menghasilkan UI diberi nama menggunakan kata benda PascalCase, seperti Greeting atau ProfileCard — mirip dengan class. Hal ini menandakan "fungsi ini menggambar sesuatu", bukan "fungsi ini mengembalikan nilai".

Parameter Mengendalikan UI

Composable menerima parameter seperti fungsi lainnya. Parameter tersebut adalah masukan Anda. Argumen yang berbeda menghasilkan UI yang berbeda.

@Composable
fun Greeting(name: String) {
    Text(text = "Welcome, $name")
}
// Greeting("Sam") and Greeting("Mia") render different text

Memanggil Composable

Composable hanya dapat dipanggil dari composable lain. Anda menyusun layar dengan menumpuk pemanggilan.

@Composable
fun WelcomeScreen() {
    Greeting(name = "Ada")
    Greeting(name = "Grace")
}

Menampung dengan setContent

Untuk benar-benar menampilkan composable, sebuah Activity memanggil setContent { } di dalam onCreate. Lambda tersebut adalah akar UI Compose Anda.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WelcomeScreen()
        }
    }
}

Composable Mengembalikan Unit

Perhatikan bahwa composable tidak mengembalikan objek UI. Composable memiliki tipe pengembalian Unit dan menghasilkan UI sebagai efek samping saat dipanggil. Anda membangun UI dengan memanggil fungsi, bukan dengan mengembalikan nilai.

Parameter Bawaan

Argumen bawaan Kotlin sangat cocok digunakan di sini. Berikan nilai bawaan pada parameter agar pemanggil dapat mengabaikannya.

@Composable
fun Greeting(name: String = "Guest") {
    Text(text = "Hello, $name!")
}
// Greeting() shows "Hello, Guest!"

Menggunakan Kembali Composable

Karena composable adalah fungsi, composable dapat digunakan kembali. Definisikan Greeting sekali dan panggil di mana saja dengan nama yang berbeda. Inilah cara menghindari duplikasi kode UI.

Buat Tetap Kecil

Composable yang baik bersifat kecil dan terfokus. Satu composable sebaiknya mendeskripsikan satu bagian logis UI. Susun layar yang lebih besar dengan menggabungkan composable kecil.

Menggabungkan Semuanya

Berikut composable pertama yang lengkap dan terhubung ke sebuah activity. Saat dijalankan di perangkat, tampilannya adalah "Hello, Compose!".

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "Compose")
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

Pemeriksaan Singkat

Apa yang memungkinkan dilakukan fungsi dengan anotasi @Composable?

Rangkuman

Anda telah menulis composable pertama. Ingatlah:

Beri tanda @Composable pada fungsi UI.
Gunakan nama PascalCase.
Parameter adalah masukan yang membentuk UI.
setContent { } menampung composable dalam sebuah activity.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Composable Pertama Anda” gratis?

Ya — teks lengkap “Composable Pertama Anda” 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 “Composable Pertama Anda”?

Buat dan pratinjau fungsi composable. 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 2 dari 4.

Berapa lama pelajaran “Composable Pertama Anda” 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.

Semua pelajaran dalam kursus ini

← Kembali ke Android Academy