Composable Function: apa itu, sintaksis fungsi dan aturan

Apa itu Composable Function di Jetpack Compose

Composable Function — adalah fungsi dalam bahasa Kotlin yang ditandai dengan anotasi @Composable, yang mendeskripsikan bagian dari antarmuka pengguna secara deklaratif. Alih-alih membuat dan mengonfigurasi objek View melalui kode Java atau markup XML, pengembang cukup menulis bagaimana UI harus terlihat pada setiap keadaan data.

Perbedaan utama antara fungsi Composable dan sistem View tradisional Android terletak pada model pembaruan. Dalam pendekatan klasik, pengembang secara manual memanggil findViewById, mengubah teks melalui setText, mengelola visibilitas melalui setVisibility. Composable Function membebaskan dari rutinitas ini: saat data berubah, sistem sendiri menentukan fungsi mana yang harus dijalankan ulang dan hanya menjalankannya.

Kompilator Kotlin, saat memproses anotasi @Composable, menghasilkan kode tambahan yang mengintegrasikan fungsi ke dalam mekanisme komposisi. Kode ini mencakup pembacaan dan penulisan ke slot — sel memori khusus yang menyimpan status dan parameter setiap fungsi Composable di pohon UI saat ini. Berkat integrasi ini, Compose tahu fungsi mana yang bergantung pada data mana.

Sintaksis deklarasi fungsi Composable

Sintaksis fungsi Composable sangat ringkas: cukup tambahkan @Composable sebelum kata kunci fun. Fungsi dapat menerima parameter apa pun, menyertakan panggilan Composable lain di dalam tubuhnya, dan menggunakan konstruksi Kotlin — kondisi, perulangan, ekspresi when — untuk menampilkan UI secara kondisional.

@Composable
fun ProductItem(
    product: Product,
    modifier: Modifier = Modifier,
    onAddToCart: () -> Unit
) {
    Card(modifier = modifier.padding(8.dp)) {
        Row(modifier = Modifier.fillMaxWidth().padding(12.dp),
            verticalAlignment = Alignment.CenterVertically) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = product.name, style = MaterialTheme.typography.titleMedium)
                Text(text = "${product.price}", color = MaterialTheme.colorScheme.primary)
            }
            Button(onClick = onAddToCart) {
                Text("Tambahkan ke keranjang")
            }
        }
    }
}

Dalam contoh ini, fungsi Composable ProductItem menerima objek Product, pengubah, dan callback. Ketiga parameter bersifat immutabel, yang menjamin perilaku yang dapat diprediksi saat rekomposisi. Pengubah diteruskan sebagai parameter dengan nilai default — ini adalah praktik standar yang memungkinkan pihak pemanggil menyesuaikan margin dan ukuran.

Komponen dan pengubah dalam fungsi Composable

Di dalam fungsi Composable, digunakan komponen bawaan Material Design (Text, Button, Card, TextField) atau primitif fundamental (Canvas, Layout). Setiap komponen menerima parameter untuk mengonfigurasi tampilan dan perilaku, serta satu atau beberapa pengubah melalui parameter modifier.

Pengubah (Modifier) — adalah rantai fungsi yang mengubah ukuran, posisi, penanganan peristiwa, dan tampilan komponen. Urutan pengubah dalam rantai itu penting: clickable.semantics bekerja berbeda dari semantics.clickable, dan padding.background mewarnai latar belakang area termasuk padding, yang sangat penting saat mendesain.

Di dalam fungsi Composable, kondisi if dan when dapat digunakan untuk menampilkan bagian UI secara kondisional, serta perulangan for untuk daftar dinamis. Semua konstruksi ini bekerja secara alami, karena Kotlin adalah bahasa pemrograman yang lengkap. Namun penting untuk diingat: jika kondisi atau perulangan berisi panggilan fungsi Composable, mereka juga berpartisipasi dalam rekomposisi.

@Composable
fun ProductList(
    products: List<Product>,
    modifier: Modifier = Modifier
) {
    LazyColumn(modifier = modifier) {
        items(products, key = { it.id }) { product ->
            ProductItem(
                product = product,
                onAddToCart = { /* add to cart */ }
            )
        }
    }
}

Contoh fungsi Composable untuk layar nyata

Mari kita lihat contoh layar pencarian produk menggunakan beberapa fungsi Composable. Di sini ditunjukkan pola-pola tipikal: bidang input dengan status, pemfilteran daftar, penanganan hasil kosong, dan pemuatan.

data class Product(
    val id: String,
    val name: String,
    val price: Double,
    val category: String
)

@Composable
fun SearchScreen() {
    var query by remember { mutableStateOf("") }
    val products = remember(query) { getFilteredProducts(query) }

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        OutlinedTextField(
            value = query,
            onValueChange = { query = it },
            label = { Text("Cari produk") },
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        when (products) {
            is Loading -> CircularProgressIndicator()
            is Empty -> Text("Hasil tidak ditemukan")
            is Result -> LazyColumn {
                items(products.items, key = { it.id }) { product ->
                    ProductItem(product = product, onAddToCart = {})
                }
            }
        }
    }
}

Contoh ini mendemonstrasikan beberapa idiom sekaligus: remember untuk menyimpan status kueri pencarian, remember(query) untuk pemfilteran dengan kunci, when untuk tiga status UI, dan LazyColumn untuk menampilkan daftar secara efisien. Setiap idiom ini adalah hasil dari pengalaman praktis dalam mengembangkan aplikasi Compose.

Parameter dan Slot API

Fungsi Composable menerima parameter seperti fungsi Kotlin biasa, tetapi dengan satu perbedaan penting: parameter dapat berupa fungsi Composable lain yang diteruskan melalui lambda dengan anotasi @Composable. Mekanisme ini disebut Slot API dan merupakan pola utama untuk membuat wadah yang dapat digunakan kembali.

Slot API memecahkan masalah yang dalam sistem View tradisional diselesaikan melalui ViewGroup dan penambahan View anak secara terprogram. Alih-alih metode addView, Compose menggunakan lambda content — parameter terakhir dengan tipe @Composable () -> Unit. Pihak pemanggil meneruskan UI apa pun ke lambda ini, dan wadah itu sendiri hanya menentukan penempatannya.

Parameter fungsi Composable dapat memiliki nilai default, yang menyederhanakan penggunaannya dalam konteks yang berbeda. Disarankan untuk membuat wajib hanya parameter-parameter yang tanpanya fungsi tidak dapat menjalankan tugasnya, dan sisanya dilengkapi dengan nilai default yang wajar.

Idiom fungsi Composable di Kotlin

Di komunitas Compose, terbentuk beberapa idiom mapan yang membuat fungsi Composable lebih mudah dibaca dan diprediksi. Pertama — State Hoisting: status dinaikkan ke tingkat yang lebih tinggi, dan fungsi Composable menerimanya melalui parameter. Ini membuat fungsi menjadi murni dan dapat digunakan kembali di berbagai konteks.

Idiom kedua — parameter Event-driven. Alih-alih meneruskan ViewModel atau useCase ke fungsi Composable, hanya callback spesifik yang diteruskan: onSave, onDelete, onNavigateToDetail. Ini mengurangi kopling dan menyederhanakan pengujian — untuk menguji ProductItem tidak perlu ViewModel, hanya lambda-stub.

Idiom ketiga — CompositionLocal untuk meneruskan data bersama melalui pohon komposisi. Tema, kepadatan layar, rute saat ini — semua ini diteruskan melalui CompositionLocal, menghindari rantai parameter melalui puluhan fungsi Composable. Namun CompositionLocal tidak boleh disalahgunakan: parameter eksplisit selalu lebih baik daripada dependensi implisit.

// State Hoisting: status dinaikkan ke fungsi induk
@Composable
fun CounterDisplay(
    count: Int,
    onIncrement: () -> Unit
) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "Penghitung: $count", style = MaterialTheme.typography.headlineLarge)
        Button(onClick = onIncrement) {
            Text("+1")
        }
    }
}

// Penggunaan dengan State Hoisting
@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }
    CounterDisplay(
        count = count,
        onIncrement = { count++ }
    )
}