Jetpack Compose: mga batayan, Composable function at State

Ano ang Jetpack Compose?

Jetpack Compose — UI framework ng Google na binuo sa mga prinsipyo ng reaktibong programming. Sa halip na Activity na may mga XML layout, FragmentManager at ViewBinding, inilalarawan ng developer ang interface sa pamamagitan ng mga function ng Kotlin na may @Composable annotation. Hindi gumagamit ang Compose ng LayoutInflater — ang UI ay purong Kotlin function, na kino-compile sa bytecode. Ang framework ay binubuo ng ilang library: Compose UI (mga pangunahing component Text, Button, Column, Row), Compose Foundation (Material Design, Mga Kumpas, Focus), Compose Material3 (Material You na may Dynamic Colors) at Compose Runtime (State, Side Effects, Coroutines). Gumagana ang Compose sa Android API 21+ (Android 5.0) at ganap na katugma sa umiiral na View/XML code sa pamamagitan ng ComposeView — ang AndroidView adapter.

Compose vs View System

View System (2008) ay gumagamit ng hierarchy ng mga View object na may manu-manong pamamahala: gumagawa ang developer ng XML layout, hinahanap ang View sa pamamagitan ng findViewById, nag-iimplementa ng Adapter para sa RecyclerView at tumatawag ng notifyDataSetChanged kapag nagbago ang data. Inilalarawan ng Compose ang UI nang functional: kapag nagbago ang estado, ni-restart ng framework (recompose) ang mga nabagong Composable function lamang, kinakalkula ang diff at naglalapat ng minimal na pagbabago sa Canvas. Ang pagganap ng Compose ay maihahambing sa View System, at sa mga senaryo na may kumplikadong listahan (LazyColumn) ay madalas na nahihigitan ang RecyclerView sa pamamagitan ng paglaktaw sa mga hindi kinakailangang elemento sa pamamagitan ng key parameter. Sa IT Sectr, ginagamit ang Compose para sa mga bagong module ng Android application na may minSdk 24+.

Composable function: mga bloke ng gusali ng UI

@Composable — annotation na nagpapalit ng ordinaryong function ng Kotlin sa isang bloke ng gusali ng UI. Maaaring tumawag ang mga Composable function ng iba pang Composable function, na bumubuo ng puno ng mga component. Hindi tulad ng View, ang mga Composable function ay walang estado bilang default — ang mga ito ay stateless at iginuhit muli sa bawat pagbabago ng input parameter o State. Binabago ng Compiler (Compose Compiler) ang mga @Composable function sa code na maaaring ihinto at ipagpatuloy (positional memoization) — pinapayagan nito ang Compose na i-restart lamang ang mga nabagong bahagi nang hindi muling itinatayo ang buong puno.

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
        )
    }
}

Ang function na UserProfile ay tumatanggap ng name at avatarUrl bilang mga parameter, bumubuo ng row na may avatar at pangalan. Modifier.fillMaxWidth() ay nagpapahaba ng component sa buong lapad, ang .padding(16.dp) ay nagdaragdag ng mga puwang. Ang MaterialTheme.typography.titleMedium ay gumagamit ng system style ng Material 3. Kapag nagbago ang mga parameter na name o avatarUrl, ni-restart ng Compose ang UserProfile — muling paglikha ng component na may mga bagong halaga.

State at Recomposition sa Jetpack Compose

State sa Compose — anumang halaga na ang pagbabago ay nagdudulot ng rekomposisyon (pag-restart) ng mga umaasang @Composable function. Ang pangunahing paraan ay mutableStateOf(), na lumilikha ng MutableState<T> na may suporta para sa snapshot system ng Compose. Snapshot — mekanismo ng pagsubaybay sa mga pagbabago: kapag nagsusulat sa State, minamarkahan ng Compose ang kasalukuyang Snapshot bilang marumi, at ang tagaplano ng rekomposisyon ay ni-restart lamang ang mga Composable function na nagbabasa ng State na ito. Para sa mga obserbableng koleksyon, gumamit ng mutableStateListOf() at mutableStateMapOf(). Sinusuportahan ng Compose ang State mula sa mga Lifecycle-Aware component sa pamamagitan ng collectAsState() para sa Kotlin Flow at observeAsState() para sa 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")
    }
}

Ang code ay gumagawa ng «Like» na button na may estado na liked (Boolean) at count (Int), na iniimbak sa pamamagitan ng mutableStateOf(). Kapag pinindot, ang liked ay binabaligtad, ang counter ay tumataas/bumababa — awtomatikong ni-restart ng Compose ang LikeButton. Ang by delegate ay nagpapahintulot sa paggamit ng State bilang ordinaryong variable: liked = !liked sa halip na liked.value = !liked.value. Ang kulay ng button ay nagbabago nang reaktibo sa pagitan ng primary (na-like) at surfaceVariant (hindi na-like).

remember: pag-cache sa pagitan ng mga rekomposisyon

remember — function ng Compose na nag-cache ng halaga sa pagitan ng mga rekomposisyon. Kung wala ang remember, bawat pag-restart ng Composable function ay lumilikha ng bagong estado (mutableStateOf) — sinisira nito ang lohika ng application: sa pag-ikot ng screen o pagbabago ng parent State, ang counter ay nire-reset. Ang remember ay tumatanggap ng calculator-lambda at kinakalkula ang halaga lamang sa unang komposisyon; sa mga susunod ay ibinabalik ang naka-cache na resulta. Upang i-reset ang cache, gumamit ng remember(key) — tinutukoy ng key kung kailan muling kalkulahin ang halaga. Ang remember(key1, key2) ay muling nagkakalkula kapag nagbago ang alinmang key. Para sa matagal na estado (na nakaligtas sa pag-ikot ng screen) gumamit ng rememberSaveable — kahalintulad ng remember na may pag-save sa Bundle sa pamamagitan ng 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 = "Lumipas: ${seconds}s",
            style = MaterialTheme.typography.displayMedium
        )
    }
}

rememberSaveable ay nagpapanatili ng seconds sa pag-ikot ng screen (pagbabago ng configuration). Ang LaunchedEffect ay nagpapatakbo ng korutin na nag-i-increment ng seconds bawat segundo. Sa rekomposisyon ng TimerScreen (bawat segundo) ang seconds ay hindi nire-reset salamat sa rememberSaveable. Gumamit ng ordinaryong remember para sa estado na hindi dapat makaligtas sa mga pagbabago ng configuration (halimbawa, mga flag ng animation).

Modifier: kadena ng mga setting ng Composable

Modifier — hindi nababagong container object na nag-iimplementa ng pattern ng Builder para sa pagtatakda ng hitsura, pag-uugali at layout ng mga Composable component. Bawat tawag sa pamamaraan ng Modifier (.padding(), .width(), .clickable(), .background()) ay nagbabalik ng bagong Modifier na may idinagdag na elemento. Mahalaga ang pagkakasunod-sunod ng mga modifier: .padding(16.dp).clickable { } — ang puwang ay inilalapat bago ang handler ng click, ang clickable ay sumusubaybay sa buong lugar na isinasaalang-alang ang puwang. .clickable { }.padding(16.dp) — ang buong lugar bago ang puwang ay naki-click, inililipat ng puwang ang nilalaman sa loob. Sinusuportahan ng Modifier ang mga custom na implementasyon sa pamamagitan ng then(otherModifier) at compositionLocal para sa access sa mga setting ng magulang.

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { println("Na-click ang card") },
        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(
                "Deklaratibong UI para sa Android na may State at Modifier",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

Ang CardExample ay nagpapakita ng kadena ng Modifier: fillMaxWidth + padding + clickable. Card — Component ng Material3 na may sariling setting ng elevation at colors. Ang nested Column ay may internal na padding na 16dp. Awtomatikong inaayos ng Compose Material3 ang mga kulay sa Dynamic Color (Material You) sa Android 12+. Ang Card ay isa sa 30+ built-in na Material3 component sa Compose.

State hoisting at arkitektura ng Compose

State hoisting — pattern ng pag-angat ng estado mula sa Composable function patungo sa tumatawag nito, na ginagawang stateless ang function. Ang stateless component ay tumatanggap ng data at callback sa pamamagitan ng mga parameter, hindi nagmamay-ari ng sariling State. Pinapataas nito ang muling paggamit at pagsubok: ang component ay maaaring tawagin na may iba't ibang State at masuri sa preview. Inirerekomenda ng Google ang arkitektura: ViewModel + StateFlow (o MutableStateFlow) + collectAsState() sa Compose. Itinataas ng ViewModel ang estado sa antas ng screen, ipinapakita ng Compose. Ang mga side effect (LaunchedEffect, DisposableEffect) ay humahawak ng mga isang beses na kaganapan.