Jetpack Compose: dasar, fungsi Composable dan State

Apa itu Jetpack Compose?

Jetpack Compose — framework UI Google yang dibangun di atas prinsip pemrograman reaktif. Alih-alih Activity dengan tata letak XML, FragmentManager dan ViewBinding, pengembang mendeskripsikan antarmuka melalui fungsi Kotlin dengan anotasi @Composable. Compose tidak menggunakan LayoutInflater — UI adalah fungsi Kotlin murni, dikompilasi ke bytecode. Framework terdiri dari beberapa pustaka: Compose UI (komponen dasar Text, Button, Column, Row), Compose Foundation (Material Design, Gerakan, Focus), Compose Material3 (Material You dengan Dynamic Colors) dan Compose Runtime (State, Side Effects, Coroutines). Compose berjalan di Android API 21+ (Android 5.0) dan sepenuhnya kompatibel dengan kode View/XML yang ada melalui ComposeView — adaptor AndroidView.

Compose vs View System

View System (2008) menggunakan hierarki objek View dengan pengelolaan manual: pengembang membuat tata letak XML, menemukan View melalui findViewById, mengimplementasikan Adapter untuk RecyclerView dan memanggil notifyDataSetChanged saat data berubah. Compose mendeskripsikan UI secara fungsional: saat status berubah, framework memulai ulang (recompose) hanya fungsi Composable yang berubah, menghitung diff dan menerapkan perubahan minimal ke Canvas. Performa Compose sebanding dengan View System, dan dalam skenario dengan daftar kompleks (LazyColumn) sering melampaui RecyclerView dengan melewatkan elemen yang tidak perlu melalui parameter key. Di IT Sectr, Compose digunakan untuk modul baru aplikasi Android dengan minSdk 24+.

Fungsi Composable: blok bangunan UI

@Composable — anotasi yang mengubah fungsi Kotlin biasa menjadi blok bangunan UI. Fungsi Composable dapat memanggil fungsi Composable lain, membentuk pohon komponen. Tidak seperti View, fungsi Composable tidak memiliki status secara default — mereka stateless dan digambar ulang pada setiap perubahan parameter input atau State. Kompilator (Compose Compiler) mentransformasi fungsi @Composable menjadi kode yang dapat dihentikan dan dilanjutkan (positional memoization) — ini memungkinkan Compose memulai ulang hanya bagian yang berubah tanpa membangun ulang seluruh pohon.

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun UserProfile(name: String, avatarUrl: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        AsyncImage(
            model = avatarUrl,
            contentDescription = "User avatar",
            modifier = Modifier.size(48.dp)
        )
        Spacer(modifier = Modifier.width(12.dp))
        Text(
            text = name,
            style = MaterialTheme.typography.titleMedium
        )
    }
}

Fungsi UserProfile menerima name dan avatarUrl sebagai parameter, membangun baris dengan avatar dan nama. Modifier.fillMaxWidth() meregangkan komponen ke lebar penuh, .padding(16.dp) menambahkan jarak. MaterialTheme.typography.titleMedium menggunakan gaya sistem Material 3. Saat parameter name atau avatarUrl berubah, Compose memulai ulang UserProfile — pembuatan ulang komponen dengan nilai baru.

State dan Recomposition di Jetpack Compose

State di Compose — nilai apa pun yang perubahannya menyebabkan rekomposisi (memulai ulang) fungsi @Composable yang bergantung. Cara dasarnya adalah mutableStateOf(), yang membuat MutableState<T> dengan dukungan sistem snapshot Compose. Snapshot — mekanisme pelacakan perubahan: saat menulis ke State, Compose menandai Snapshot saat ini sebagai kotor, dan penjadwal rekomposisi memulai ulang hanya fungsi Composable yang membaca State tersebut. Untuk koleksi yang dapat diamati, gunakan mutableStateListOf() dan mutableStateMapOf(). Compose mendukung State dari komponen Lifecycle-Aware melalui collectAsState() untuk Kotlin Flow dan observeAsState() untuk LiveData.

@Composable
fun LikeButton() {
    var liked by remember { mutableStateOf(false) }
    var count by remember { mutableStateOf(42) }
    
    Button(
        onClick = {
            liked = !liked
            if (liked) count++ else count--
        },
        colors = ButtonDefaults.buttonColors(
            containerColor = if (liked) MaterialTheme.colorScheme.primary
                else MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Text("♥ $count")
    }
}

Kode membuat tombol «Like» dengan status liked (Boolean) dan count (Int), disimpan melalui mutableStateOf(). Saat ditekan, liked dibalik, penghitung bertambah/berkurang — Compose secara otomatis memulai ulang LikeButton. by delegate memungkinkan penggunaan State sebagai variabel biasa: liked = !liked alih-alih liked.value = !liked.value. Warna tombol berubah secara reaktif antara primary (disukai) dan surfaceVariant (tidak disukai).

remember: caching antar rekomposisi

remember — fungsi Compose yang menyimpan cache nilai antar rekomposisi. Tanpa remember, setiap mulai ulang fungsi Composable membuat status baru (mutableStateOf) — ini merusak logika aplikasi: saat rotasi layar atau perubahan State induk, penghitung direset. remember menerima lambda-kalkulator dan menghitung nilai hanya pada komposisi pertama; pada komposisi berikutnya mengembalikan hasil cache. Untuk mereset cache, gunakan remember(key) — kunci menentukan kapan menghitung ulang nilai. remember(key1, key2) menghitung ulang saat salah satu kunci berubah. Untuk status berumur panjang (yang bertahan dari rotasi layar) gunakan rememberSaveable — analog remember dengan penyimpanan di Bundle melalui SavedStateHandle.

@Composable
fun TimerScreen() {
    var seconds by rememberSaveable { mutableStateOf(0) }
    
    LaunchedEffect(Unit) {
        while (true) {
            delay(1000)
            seconds++
        }
    }
    
    Column(
        modifier = Modifier.fillMaxSize().padding(32.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Waktu berlalu: ${seconds}s",
            style = MaterialTheme.typography.displayMedium
        )
    }
}

rememberSaveable mempertahankan seconds saat rotasi layar (perubahan konfigurasi). LaunchedEffect menjalankan korutin yang menambah seconds setiap detik. Saat rekomposisi TimerScreen (setiap detik) seconds tidak direset berkat rememberSaveable. Gunakan remember biasa untuk status yang tidak boleh bertahan dari perubahan konfigurasi (misalnya bendera animasi).

Modifier: rantai pengaturan Composable

Modifier — objek wadah tak berubah yang mengimplementasikan pola Builder untuk mengatur tampilan, perilaku, dan tata letak komponen Composable. Setiap panggilan metode Modifier (.padding(), .width(), .clickable(), .background()) mengembalikan Modifier baru dengan elemen yang ditambahkan. Urutan pengubah penting: .padding(16.dp).clickable { } — jarak diterapkan sebelum penangan klik, clickable melacak seluruh area dengan mempertimbangkan jarak. .clickable { }.padding(16.dp) — seluruh area sebelum jarak dapat diklik, jarak memindahkan konten ke dalam. Modifier mendukung implementasi kustom melalui then(otherModifier) dan compositionLocal untuk akses ke pengaturan induk.

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { println("Kartu diklik") },
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Jetpack Compose", style = MaterialTheme.typography.titleLarge)
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                "UI Deklaratif untuk Android dengan State dan Modifier",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

CardExample mendemonstrasikan rantai Modifier: fillMaxWidth + padding + clickable. Card — komponen Material3 dengan pengaturan elevation dan colors sendiri. Column bersarang memiliki padding internal 16dp. Compose Material3 secara otomatis menyesuaikan warna dengan Dynamic Color (Material You) di Android 12+. Card adalah salah satu dari 30+ komponen Material3 bawaan di Compose.

State hoisting dan arsitektur Compose

State hoisting — pola mengangkat status dari fungsi Composable ke pemanggilnya, membuat fungsi menjadi stateless. Komponen stateless menerima data dan callback melalui parameter, tidak memiliki State sendiri. Ini meningkatkan penggunaan ulang dan pengujian: komponen dapat dipanggil dengan State berbeda dan diuji di preview. Google merekomendasikan arsitektur: ViewModel + StateFlow (atau MutableStateFlow) + collectAsState() di Compose. ViewModel mengangkat status ke tingkat layar, Compose menampilkan. Efek samping (LaunchedEffect, DisposableEffect) menangani peristiwa satu kali.