Jetpack Compose a mobilfejlesztésben: mi ez, kulcsfogalmak és hogyan működik

Jetpack Compose alapok (@Composable, Composition, Recomposition)

@Composable — annotáció, amely egy függvényt Composable-vé alakít. A Composable függvények UI-építőelemek. Nem adnak vissza View-t, elemeket bocsátanak ki a Composition-ba. Composition — egy UI-fa, amely Composable függvényhívásokból épül fel. A Compose összehasonlítja az új fát a régivel, és csak a megváltozott részeket frissíti.

Recomposition

Recomposition — Composable függvények újraindítása állapotváltozáskor. A Compose nyomon követi, hogy mely állapotok olvasódnak az egyes függvényekben. Amikor egy állapot megváltozik, a Compose csak azokat a függvényeket indítja újra, amelyek olvassák azt az állapotot (Smart Recomposition). A recompozíció optimista: többször is lefuthat, ezért a függvényeknek tisztáknak kell lenniük (mellékhatások nélkül). A mellékhatások a LaunchedEffect vagy DisposableEffect elemekbe kerülnek. A Composable függvények nem lehetnek suspend. Más Composable függvényekből hívódnak meg. A hívás sorrendje nem garantált (a Compose átrendezhet).

// Composable példa State Hoisting-gal és LazyColumn-nel
@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 — deklaratív fa. Recomposition — intelligens újraindítás. Az IT Sectr javasolja a típusstabilitás figyelését — az instabil típusok túlzott recompozíciót okoznak.

CompositionLocal

CompositionLocal — implicit adatátadás a Compose-ban. Analóg a SwiftUI @Environment-jével. CompositionLocalProvider — érték beállítása. current — olvasás. Használata: Theme (MaterialTheme), ContentScale, Density. Statikus CompositionLocal — változtatás nélküli konfigurációhoz. Dinamikus CompositionLocal — változó értékekhez (témák). Az IT Sectr javasolja a CompositionLocal használatát globális konfigurációkhoz és explicit paramétereket az adatokhoz.

Állapot (remember, mutableStateOf, State Hoisting)

remember — megőrzi az értéket a recompozíciók között. mutableStateOf — megfigyelhető állapotot hoz létre (MutableState<T>). Változáskor recompozíciót indít. State Hoisting — minta: az állapot a szülő komponensbe emelődik, a gyermek értéket + visszahívást kap. State (változatlan) — csak olvasható. MutableState — olvasás + írás. rememberSaveable — megmarad forgatás/folyamat megszakadása esetén.

State Hoisting

State Hoisting — elv: state down, events up. Az állapot a szülőben tárolódik, és paramétereken keresztül kerül átadásra a gyermek komponenseknek. A gyermek komponensek a változásokat lambda (visszahívás) segítségével jelentik. Előnyök: újrafelhasználhatóság, tesztelhetőség, egyetlen igazságforrás. Példa: ahelyett, hogy a MyTextField saját állapotot tárolna, a szülő tárolja a karakterláncot, és value + onValueChange segítségével adja át.

Származtatott állapot

derivedStateOf — számított állapot, csak a függőségek változásakor számítódik újra. Szűrésre, konvertálásra, érvényesítésre használatos. snapshotFlow — State konvertálása Flow-vá. Reaktív láncokhoz használatos. collectAsState — Flow gyűjtése State-be a Composable-en belül. Az IT Sectr javasolja a derivedStateOf-ot számított értékekhez és a snapshotFlow-t a State korutinokhoz való kapcsolásához.

Tárolók (Column, Row, Box, LazyColumn)

Column — függőleges elrendezés (analóg a LinearLayout függőlegessel). Row — vízszintes elrendezés. Box — halmozó elrendezés (analóg a FrameLayout-tal). LazyColumn — függőleges görgethető lista lusta betöltéssel. LazyRow — vízszintes görgethető lista. Scaffold — fő képernyőszerkezet: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — felső sáv. BottomNavigation — alsó navigáció (NavigationBar a Material 3-ban). Modifier — lánc: .fillMaxWidth().padding(8.dp).clickable { }. A módosítók sorrendje fontos — mindegyik új burkolót hoz létre.

LazyColumn optimalizálás

LazyColumn — virtualizált lista. Csak a látható elemeket jeleníti meg. Optimalizálás: 1) key — egyedi kulcs az elemhez, 2) contentType — elemek csoportosítása típus szerint, 3) itemContent — recompozíció minimalizálása az elemen belül, 4) LazyVerticalGrid / LazyHorizontalGrid — rácsokhoz. LazyLayout — egyéni lusta elrendezés. Paging 3 + Compose — lapozás a collectAsLazyPagingItems segítségével. Az IT Sectr javasolja a key(item) használatát minden LazyColumn esetében a kiszámítható recompozícióhoz.

Navigáció (NavController, NavHost)

Navigation Compose — navigációs könyvtár. NavController — a célvermet kezeli. NavHost — a navigációs gráf tárolója. composable("route") — cél regisztrálása. navController.navigate("route") — navigálás. popBackStack() — visszalépés. Argumentumok: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). Mélyhivatkozás intentFilter segítségével. BottomNavigation — integráció a NavController-rel: NavBarItem → navigate + popUpTo.

Haladó navigáció

Többszörös visszaverem — külön visszaverem minden BottomNavigation fülhöz. SavedStateHandle — argumentumok megőrzése folyamatmegszakadáskor. NavArgs — típusbiztos argumentumok (Kotlin 2.0+). Mélyhivatkozások — URL-sémák külső hivatkozásokhoz. Prediktív vissza gesztus (Android 14+) — vissza gesztus támogatása előnézettel. Az IT Sectr javasolja a NavArgs használatát a típusbiztonságért és a többszörös visszavermeket a BottomNavigation számára.

Hatások (LaunchedEffect, DisposableEffect)

LaunchedEffect — suspend blokkot indít a Composition-ban. Megszakad a Composition elhagyásakor. Újraindul a keys megváltozásakor. Használata: adatbetöltés, időzítők, animációk. DisposableEffect — tisztítást igénylő erőforrásokhoz: onDispose { } — leiratkozás a listener-ekről, kapcsolatok bezárása. SideEffect — szinkron hatás (minden recompozíciókor). Használata: naplózás, szinkronizálás nem Compose kóddal. Az IT Sectr javasolja a LaunchedEffect-et adatbetöltéshez és a DisposableEffect-et a tisztításhoz.

Compose — függvény + módosító. SwiftUI — struct + módosító. A fogalmak hasonlóak, a szintaxis eltérő. Az IT Sectr javasolja mindkét keretrendszer tanulását — az egyik megértése megkönnyíti a másik tanulását.

Hatásminták

rememberCoroutineScope — hozzáférés a CoroutineScope-hoz a LaunchedEffect-en kívül (pl. gombnyomáskor). snapshotFlow — State átalakítása Flow-vá láncokhoz. produceState — nem Compose forrás átalakítása State-té. animateFloatAsState és animateColorAsState — animációk hatásokon keresztül. Az IT Sectr javasolja a rememberCoroutineScope-ot UI eseményekhez és a LaunchedEffect-et automatikus betöltéshez.

Témázás (MaterialTheme, Material3)

MaterialTheme — globális Compose téma. Színek, tipográfia, formák. MaterialTheme { } — az egész alkalmazást becsomagolja. Material3 (M3) — Google dizájnrendszer 2023+. Dynamic Colors — alkalmazkodás a háttérképhez (Android 12+). TextStyle — szövegkonfiguráció: fontSize, fontWeight, lineHeight. Shape — sarkok lekerekítése. Elevation — árnyékok. Az IT Sectr alapértelmezés szerint a Material3-at és modern eszközökhöz a Dynamic Colors-t javasolja.

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

Animációk (animate*, AnimatedVisibility)

animateFloatAsState — Float értéket animál. animateColorAsState — színt animál. animateDpAsState — méretet animál. AnimatedVisibility — megjelenítés/elrejtés .animateEnterExit()-tel. AnimatedContent — animáció tartalomváltáskor (crossfade, slide). updateTransition — enum állapoton alapuló animáció. Animatable — egyéni animáció az Animatable interfészen keresztül. Az IT Sectr az AnimatedVisibility-t javasolja listákhoz és az AnimatedContent-ot képernyőátmenetekhez.

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

Tesztelés (Compose UI Test)

Compose UI Test — Compose képernyők tesztelése. createComposeRule() — JUnit szabály. setContent { } — Composable beállítása. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — elemek keresése. performClick, performTextInput, performScrollTo — műveletek. assertIsDisplayed, assertTextEquals — állítások. Semantics — Semantics fa akadálymentesítéshez és tesztekhez. IdlingResource — aszinkron műveletek várakozása. Képernyőkép tesztek — Papercuts, Roborazzi. Az IT Sectr UI teszteket javasol minden képernyőhöz és egységteszteket a ViewModel-hez.

WindowSizeClass — alkalmazkodás a képernyő méretéhez (Compact, Medium, Expanded). Kapcsolódik a Material3 reszponzív elrendezésekhez. Az Adaptive Navigation Suite-ben használatos a BottomNavigation automatikus NavigationRail-re váltásához. Az IT Sectr a WindowSizeClass-t javasolja a Compose táblagépes és asztali adaptációjához.

Paging 3 + Compose — lapozókönyvtár a Google-től. PagingData — oldalfolyam. PagingConfig — beállítások (pageSize, prefetchDistance). collectAsLazyPagingItems() — gyűjtés Compose-ban. PagingSource — egyéni forrás. RemoteMediator — hibrid betöltés (hálózat + AB). A Paging 3 a végtelen görgetésű listák szabványa a Compose-ban.