Jetpack Compose sa Pag-develop ng Mobile: Ano Ito, Mga Pangunahing Konsepto at Paano Ito Gumagana

Mga Batayan ng Jetpack Compose (@Composable, Composition, Recomposition)

@Composable — anotasyon na nagpapalit ng function sa Composable. Ang mga Composable function ay mga building block ng UI. Hindi sila nagbabalik ng View, naglalabas sila ng mga elemento sa Composition. Composition — isang puno ng UI na binuo mula sa mga tawag ng Composable function. Inihahambing ng Compose ang bagong puno sa luma at ina-update lamang ang mga bahaging nabago.

Recomposition

Recomposition — pag-restart ng mga Composable function kapag nagbago ang estado. Sinusubaybayan ng Compose kung anong mga estado ang binabasa sa bawat function. Kapag nagbago ang isang estado, irerestart lamang ng Compose ang mga function na bumabasa ng estadong iyon (Smart Recomposition). Ang recomposition ay optimistiko: maaaring tumakbo nang maraming beses, kaya ang mga function ay dapat na puro (walang side effect). Ang mga side effect ay inilalagay sa LaunchedEffect o DisposableEffect. Ang mga Composable function ay hindi maaaring maging suspend. Ang mga ito ay tinatawag mula sa iba pang mga Composable function. Ang pagkakasunod-sunod ng tawag ay hindi garantisado (maaaring mag-reorder ang Compose).

// Halimbawa ng Composable na may State Hoisting at LazyColumn
@Composable
fun ItemList(
    items: List<String>,
    onItemClick: (String) -> Unit
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(items) { item ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { onItemClick(item) }
                    .padding(8.dp)
            ) {
                Text(
                    text = item,
                    style = MaterialTheme.typography.bodyLarge
                )
            }
        }
    }
}

@Composable
fun MainScreen() {
    var text by remember { mutableStateOf("") }
    val items = listOf("Item 1", "Item 2", "Item 3")

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Compose App") })
        }
    ) { padding ->
        ItemList(
            items = items,
            onItemClick = { selected -> text = selected }
        )
    }
}

Composition — deklaratibong puno. Recomposition — matalinong pag-restart. Inirerekomenda ng IT Sectr ang pag-monitor ng katatagan ng uri — ang hindi matatag na mga uri ay nagdudulot ng labis na recomposition.

CompositionLocal

CompositionLocal — implicit na pagpapasa ng data sa Compose. Katulad ng @Environment sa SwiftUI. CompositionLocalProvider — pagtatakda ng halaga. current — pagbabasa. Ginagamit para sa: Theme (MaterialTheme), ContentScale, Density. Static CompositionLocal — para sa configuration na walang pagbabago. Dynamic CompositionLocal — para sa nababagong halaga (tema). Inirerekomenda ng IT Sectr ang paggamit ng CompositionLocal para sa global na configuration at mga explicit na parameter para sa data.

Estado (remember, mutableStateOf, State Hoisting)

remember — nag-iingat ng halaga sa pagitan ng mga recomposition. mutableStateOf — lumilikha ng nakikitang estado (MutableState<T>). Kapag nagbago, nagti-trigger ng recomposition. State Hoisting — pattern: ang estado ay iniangat sa component ng magulang, ang anak ay tumatanggap ng halaga + callback. State (hindi nababago) — babasahin lamang. MutableState — basa + sulat. rememberSaveable — nananatili sa pag-ikot/pagkamatay ng proseso.

State Hoisting

State Hoisting — prinsipyo: state down, events up. Ang estado ay iniimbak sa magulang at ipinapasa sa mga anak na component sa pamamagitan ng mga parameter. Ang mga anak na component ay nag-uulat ng mga pagbabago sa pamamagitan ng lambda (callback). Mga benepisyo: muling magamit, masusuri, nag-iisang pinagmumulan ng katotohanan. Halimbawa: sa halip na ang MyTextField ay mag-imbak ng sarili nitong estado, ang magulang ang nag-iimbak ng string at ipinapasa ito sa pamamagitan ng value + onValueChange.

Derived State

derivedStateOf — kinakalkulang estado, muling kinakalkula lamang kapag nagbago ang mga dependency. Ginagamit para sa pag-filter, conversion, validation. snapshotFlow — nagko-convert ng State sa Flow. Ginagamit para sa mga reaktibong kadena. collectAsState — nagkokolekta ng Flow sa State sa loob ng Composable. Inirerekomenda ng IT Sectr ang derivedStateOf para sa kinakalkulang halaga at snapshotFlow para sa pagkonekta ng State sa mga coroutine.

Mga Container (Column, Row, Box, LazyColumn)

Column — vertical na layout (katulad ng LinearLayout vertical). Row — horizontal na layout. Box — stacking na layout (katulad ng FrameLayout). LazyColumn — vertical na nai-scroll na listahan na may lazy loading. LazyRow — horizontal na nai-scroll na listahan. Scaffold — pangunahing istraktura ng screen: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — itaas na bar. BottomNavigation — ilalim na nabigasyon (NavigationBar sa Material 3). Modifier — kadena: .fillMaxWidth().padding(8.dp).clickable { }. Mahalaga ang pagkakasunod-sunod ng modifier — bawat isa ay lumilikha ng bagong wrapper.

Pag-optimize ng LazyColumn

LazyColumn — virtualized na listahan. Nagre-render lamang ng nakikitang elemento. Pag-optimize: 1) key — natatanging susi para sa item, 2) contentType — pag-grupo ng mga item ayon sa uri, 3) itemContent — pag-minimize ng recomposition sa loob ng item, 4) LazyVerticalGrid / LazyHorizontalGrid — para sa mga grid. LazyLayout — custom na lazy layout. Paging 3 + Compose — pagination sa pamamagitan ng collectAsLazyPagingItems. Inirerekomenda ng IT Sectr ang key(item) para sa lahat ng LazyColumn para sa predictable na recomposition.

Nabigasyon (NavController, NavHost)

Navigation Compose — library ng nabigasyon. NavController — namamahala ng stack ng destinasyon. NavHost — container para sa navigation graph. composable("route") — pagrehistro ng destinasyon. navController.navigate("route") — mag-navigate. popBackStack() — bumalik. Mga argumento: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). Deep linking sa pamamagitan ng intentFilter. BottomNavigation — integrasyon sa NavController: NavBarItem → navigate + popUpTo.

Advance na Nabigasyon

Maramihang back stack — hiwalay na back stack para sa bawat tab ng BottomNavigation. SavedStateHandle — pag-iingat ng mga argumento sa pagkamatay ng proseso. NavArgs — uri-ligtas na argumento (Kotlin 2.0+). Deep link — mga URL scheme para sa panlabas na link. Predictive back gesture (Android 14+) — suporta sa back gesture na may preview. Inirerekomenda ng IT Sectr ang paggamit ng NavArgs para sa kaligtasan ng uri at maramihang back stack para sa BottomNavigation.

Mga Epekto (LaunchedEffect, DisposableEffect)

LaunchedEffect — naglulunsad ng suspend block sa Composition. Kinakansela kapag umalis sa Composition. Nirere-start kapag nagbago ang keys. Ginagamit para sa: pag-load ng data, timer, animation. DisposableEffect — para sa mga resource na nangangailangan ng paglilinis: onDispose { } — mag-unsubscribe mula sa mga listener, isara ang mga koneksyon. SideEffect — sabay na epekto (bawat recomposition). Ginagamit para sa: pag-log, pag-sync sa non-Compose code. Inirerekomenda ng IT Sectr ang LaunchedEffect para sa pag-load ng data at DisposableEffect para sa paglilinis.

Compose — function + modifier. SwiftUI — struct + modifier. Ang mga konsepto ay magkatulad, ang syntax ay naiiba. Inirerekomenda ng IT Sectr ang pag-aaral ng parehong framework — ang pag-unawa sa isa ay nagpapadali sa pag-aaral ng isa pa.

Mga Pattern ng Epekto

rememberCoroutineScope — pag-access sa CoroutineScope sa labas ng LaunchedEffect (hal., sa pag-click ng button). snapshotFlow — pag-convert ng State sa Flow para sa mga kadena. produceState — pag-convert ng non-Compose source sa State. animateFloatAsState at animateColorAsState — mga animation sa pamamagitan ng mga epekto. Inirerekomenda ng IT Sectr ang rememberCoroutineScope para sa mga UI event at LaunchedEffect para sa awtomatikong pag-load.

Pag-tema (MaterialTheme, Material3)

MaterialTheme — global na tema ng Compose. Mga kulay, tipograpiya, hugis. MaterialTheme { } — bumabalot sa buong app. Material3 (M3) — Google design system 2023+. Dynamic Colors — adaptasyon sa wallpaper (Android 12+). TextStyle — configuration ng teksto: fontSize, fontWeight, lineHeight. Shape — pagbilog ng sulok. Elevation — mga anino. Inirerekomenda ng IT Sectr ang Material3 bilang default at Dynamic Colors para sa modernong device.

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val colorScheme = if (isSystemInDarkTheme()) {
        darkColorScheme(
            primary = Color(0xFFBB86FC),
            secondary = Color(0xFF03DAC6)
        )
    } else {
        lightColorScheme(
            primary = Color(0xFF6200EE),
            secondary = Color(0xFF03DAC6)
        )
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography(
            bodyLarge = TextStyle(fontSize = 16.sp)
        )
    ) { content() }
}

Mga Animation (animate*, AnimatedVisibility)

animateFloatAsState — nag-aanimate ng Float value. animateColorAsState — nag-aanimate ng kulay. animateDpAsState — nag-aanimate ng laki. AnimatedVisibility — ipakita/ itago gamit ang .animateEnterExit(). AnimatedContent — animation kapag nagbago ang content (crossfade, slide). updateTransition — animation batay sa enum state. Animatable — custom animation sa pamamagitan ng Animatable interface. Inirerekomenda ng IT Sectr ang AnimatedVisibility para sa mga listahan at AnimatedContent para sa screen transition.

@Composable
fun AnimatedCounter(count: Int) {
    val animatedCount by animateFloatAsState(
        targetValue = count.toFloat(),
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    )

    AnimatedContent(targetState = count) { targetCount ->
        Text(
            text = "$targetCount",
            style = MaterialTheme.typography.displayLarge,
            modifier = Modifier.animateContentSize()
        )
    }
}

Pagsubok (Compose UI Test)

Compose UI Test — pagsubok ng mga Compose screen. createComposeRule() — JUnit rule. setContent { } — pagtatakda ng Composable. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — paghahanap ng elemento. performClick, performTextInput, performScrollTo — mga aksyon. assertIsDisplayed, assertTextEquals — mga assertion. Semantics — Semantics tree para sa accessibility at pagsubok. IdlingResource — paghihintay sa asynchronous na operasyon. Pagsubok ng screenshot — Papercuts, Roborazzi. Inirerekomenda ng IT Sectr ang UI test para sa bawat screen at Unit test para sa ViewModel.

WindowSizeClass — adaptasyon sa laki ng screen (Compact, Medium, Expanded). Kaugnay sa Material3 responsive layout. Ginagamit sa Adaptive Navigation Suite para sa awtomatikong paglipat mula BottomNavigation patungong NavigationRail. Inirerekomenda ng IT Sectr ang WindowSizeClass para sa tablet at desktop Compose adaptation.

Paging 3 + Compose — library ng pagination mula sa Google. PagingData — stream ng pahina. PagingConfig — mga setting (pageSize, prefetchDistance). collectAsLazyPagingItems() — pagkolekta sa Compose. PagingSource — custom na source. RemoteMediator — hybrid na pag-load (network + DB). Ang Paging 3 ay pamantayan para sa walang katapusang scroll na listahan sa Compose.