Jetpack Compose

Conditional Rendering: if & when

Penjelasan

Karena Composable adalah fungsi Kotlin biasa, percabangan tampilan cukup memakai if/else atau when Kotlin BIASA — tidak ada syntax spesial terpisah seperti *ngIf Angular atau v-if Vue, konsepnya lebih dekat ke pendekatan JSX React (kondisional native bahasa).

Contoh Konsep

@Composable
fun StatusPesanan(sudahBayar: Boolean, jumlahItem: Int) {
    if (sudahBayar) {
        Text("Pesanan sudah dibayar")
    } else {
        Text("Menunggu pembayaran")
    }

    when {
        jumlahItem == 0 -> Text("Keranjang kosong")
        jumlahItem < 5 -> Text("Ada $jumlahItem item")
        else -> Text("Banyak item! ($jumlahItem)")
    }
}

Praktikum

Buat Composable BadgeStok(stok: Int) yang pakai if/else untuk menampilkan Text "Tersedia" atau "Habis" sesuai nilai stok (>0 atau tidak).

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Karena kondisionalnya murni Kotlin biasa, kamu BEBAS memakai fitur bahasa Kotlin lain di dalamnya (early return, elvis operator ?:, dst) — TIDAK terbatas pada pola template khusus seperti framework berbasis template string (Vue/Angular), fleksibilitas ini konsisten dengan filosofi Compose yang "semuanya Kotlin".

← Kembali Event Handling: onClick Lanjutkan → LazyColumn: Menampilkan Daftar Data