Jetpack Compose în dezvoltarea mobilă: ce este, concepte cheie și cum funcționează

Bazele Jetpack Compose (@Composable, Composition, Recomposition)

@Composable — adnotare care transformă o funcție în Composable. Funcțiile Composable sunt blocuri de construcție UI. Nu returnează un View, emit elemente în Composition. Composition — un arbore UI construit din apeluri de funcții Composable. Compose compară noul arbore cu cel vechi și actualizează doar părțile modificate.

Recomposition

Recomposition — repornirea funcțiilor Composable la schimbarea stării. Compose urmărește ce stări sunt citite în fiecare funcție. Când o stare se modifică, Compose repornește doar funcțiile care citesc acea stare (Smart Recomposition). Recomposition este optimistă: poate rula de mai multe ori, deci funcțiile trebuie să fie pure (fără efecte secundare). Efectele secundare se pun în LaunchedEffect sau DisposableEffect. Funcțiile Composable nu pot fi suspend. Sunt apelate din alte funcții Composable. Ordinea de apel nu este garantată (Compose poate reordona).

// Exemplu de Composable cu State Hoisting și 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 — arbore declarativ. Recomposition — repornire inteligentă. IT Sectr recomandă monitorizarea stabilității tipurilor — tipurile instabile cauzează recompoziție excesivă.

CompositionLocal

CompositionLocal — transmitere implicită de date în Compose. Analog cu @Environment în SwiftUI. CompositionLocalProvider — setarea unei valori. current — citire. Utilizat pentru: Theme (MaterialTheme), ContentScale, Density. CompositionLocal static — pentru configurare fără modificări. CompositionLocal dinamic — pentru valori mutabile (teme). IT Sectr recomandă utilizarea CompositionLocal pentru configurații globale și parametri expliciți pentru date.

Stare (remember, mutableStateOf, State Hoisting)

remember — păstrează valoarea între recompoziții. mutableStateOf — creează stare observabilă (MutableState<T>). La modificare, declanșează recompoziția. State Hoisting — model: starea este ridicată în componenta părinte, copilul primește valoare + callback. State (imutabil) — doar citire. MutableState — citire + scriere. rememberSaveable — persistă la rotație/moartea procesului.

State Hoisting

State Hoisting — principiu: state down, events up. Starea este stocată în părinte și transmisă componentelor copil prin parametri. Componentele copil raportează modificări prin lambdas (callback). Avantaje: reutilizabilitate, testabilitate, sursă unică de adevăr. Exemplu: în loc ca MyTextField să își stocheze propria stare, părintele stochează șirul și îl transmite prin value + onValueChange.

Stare derivată

derivedStateOf — stare calculată, recalculată doar când dependențele se schimbă. Utilizat pentru filtrare, conversie, validare. snapshotFlow — convertește State în Flow. Utilizat pentru lanțuri reactive. collectAsState — colectează Flow în State în interiorul Composable. IT Sectr recomandă derivedStateOf pentru valori calculate și snapshotFlow pentru conectarea State cu corutine.

Containere (Column, Row, Box, LazyColumn)

Column — layout vertical (analog cu LinearLayout vertical). Row — layout orizontal. Box — layout de stivuire (analog cu FrameLayout). LazyColumn — listă verticală derulabilă cu încărcare lentă. LazyRow — listă orizontală derulabilă. Scaffold — structura principală a ecranului: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — bara de sus. BottomNavigation — navigare inferioară (NavigationBar în Material 3). Modifier — lanț: .fillMaxWidth().padding(8.dp).clickable { }. Ordinea modificatorilor contează — fiecare creează un nou wrapper.

Optimizarea LazyColumn

LazyColumn — listă virtualizată. Randare doar elementele vizibile. Optimizare: 1) key — cheie unică pentru element, 2) contentType — grupare elemente după tip, 3) itemContent — minimizarea recompoziției în interiorul elementului, 4) LazyVerticalGrid / LazyHorizontalGrid — pentru grile. LazyLayout — layout lent personalizat. Paging 3 + Compose — paginare prin collectAsLazyPagingItems. IT Sectr recomandă key(item) pentru toate LazyColumn pentru recompoziție previzibilă.

Navigare (NavController, NavHost)

Navigation Compose — bibliotecă de navigare. NavController — gestionează stiva de destinații. NavHost — container pentru graful de navigare. composable("route") — înregistrare destinație. navController.navigate("route") — navigare. popBackStack() — înapoi. Argumente: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). Deep linking prin intentFilter. BottomNavigation — integrare cu NavController: NavBarItem → navigate + popUpTo.

Navigare avansată

Stive de întoarcere multiple — stivă de întoarcere separată pentru fiecare filă BottomNavigation. SavedStateHandle — păstrarea argumentelor la moartea procesului. NavArgs — argumente sigure tip (Kotlin 2.0+). Deep linkuri — scheme URL pentru linkuri externe. Gestiunea de întoarcere predictivă (Android 14+) — suport pentru gestul de întoarcere cu previzualizare. IT Sectr recomandă utilizarea NavArgs pentru siguranța tipurilor și stive de întoarcere multiple pentru BottomNavigation.

Efecte (LaunchedEffect, DisposableEffect)

LaunchedEffect — lansează un bloc suspend în Composition. Anulat la ieșirea din Composition. Repornit la schimbarea keys. Utilizat pentru: încărcare date, temporizatoare, animații. DisposableEffect — pentru resurse care necesită curățare: onDispose { } — dezabonare de la listeneri, închidere conexiuni. SideEffect — efect sincron (fiecare recompoziție). Utilizat pentru: logare, sincronizare cu cod non-Compose. IT Sectr recomandă LaunchedEffect pentru încărcare date și DisposableEffect pentru curățare.

Compose — funcție + modificator. SwiftUI — struct + modificator. Conceptele sunt similare, sintaxa este diferită. IT Sectr recomandă învățarea ambelor cadre — înțelegerea unuia facilitează învățarea celuilalt.

Modele de efecte

rememberCoroutineScope — acces la CoroutineScope în afara LaunchedEffect (de exemplu, la clic pe buton). snapshotFlow — convertire State în Flow pentru lanțuri. produceState — convertire sursă non-Compose în State. animateFloatAsState și animateColorAsState — animații prin efecte. IT Sectr recomandă rememberCoroutineScope pentru evenimente UI și LaunchedEffect pentru încărcare automată.

Tematica (MaterialTheme, Material3)

MaterialTheme — tema globală Compose. Culori, tipografie, forme. MaterialTheme { } — înfășoară întreaga aplicație. Material3 (M3) — sistem de design Google 2023+. Dynamic Colors — adaptare la fundal (Android 12+). TextStyle — configurare text: fontSize, fontWeight, lineHeight. Shape — rotunjire colțuri. Elevation — umbre. IT Sectr recomandă Material3 în mod implicit și Dynamic Colors pentru dispozitive moderne.

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

Animații (animate*, AnimatedVisibility)

animateFloatAsState — animează valoarea Float. animateColorAsState — animează culoarea. animateDpAsState — animează dimensiunea. AnimatedVisibility — arată/ascunde cu .animateEnterExit(). AnimatedContent — animație la schimbarea conținutului (crossfade, slide). updateTransition — animație bazată pe stare enum. Animatable — animație personalizată prin interfața Animatable. IT Sectr recomandă AnimatedVisibility pentru liste și AnimatedContent pentru tranziții de ecran.

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

Testare (Compose UI Test)

Compose UI Test — testarea ecranelor Compose. createComposeRule() — regulă JUnit. setContent { } — setare Composable. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — găsire elemente. performClick, performTextInput, performScrollTo — acțiuni. assertIsDisplayed, assertTextEquals — aserțiuni. Semantics — arbore Semantics pentru accesibilitate și teste. IdlingResource — așteptare operațiuni asincrone. Teste captură ecran — Papercuts, Roborazzi. IT Sectr recomandă teste UI pentru fiecare ecran și teste unitare pentru ViewModel.

WindowSizeClass — adaptare la dimensiunea ecranului (Compact, Medium, Expanded). Legat de layout-urile responsive Material3. Folosit în Adaptive Navigation Suite pentru comutarea automată de la BottomNavigation la NavigationRail. IT Sectr recomandă WindowSizeClass pentru adaptarea Compose pe tablete și desktop.

Paging 3 + Compose — bibliotecă de paginare de la Google. PagingData — flux de pagini. PagingConfig — setări (pageSize, prefetchDistance). collectAsLazyPagingItems() — colectare în Compose. PagingSource — sursă personalizată. RemoteMediator — încărcare hibridă (rețea + BD). Paging 3 este standardul pentru liste cu derulare infinită în Compose.