Jetpack Compose nello sviluppo mobile: cos'è, concetti chiave e come funziona

Fondamenti di Jetpack Compose (@Composable, Composition, Recomposition)

@Composable — annotazione che trasforma una funzione in Composable. Le funzioni Composable sono blocchi di costruzione dell'UI. Non restituiscono una View, emettono elementi in Composition. Composition — un albero UI costruito da chiamate di funzioni Composable. Compose confronta il nuovo albero con il vecchio e aggiorna solo le parti modificate.

Recomposition

Recomposition — riavvio delle funzioni Composable al cambiamento dello stato. Compose tiene traccia di quali stati vengono letti in ogni funzione. Quando uno stato cambia, Compose riavvia solo le funzioni che leggono quello stato (Smart Recomposition). La ricomposizione è ottimistica: può eseguirsi più volte, quindi le funzioni devono essere pure (senza effetti collaterali). Gli effetti collaterali vanno in LaunchedEffect o DisposableEffect. Le funzioni Composable non possono essere suspend. Vengono chiamate da altre funzioni Composable. L'ordine di chiamata non è garantito (Compose può riordinare).

// Esempio di Composable con State Hoisting e 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 — albero dichiarativo. Recomposition — riavvio intelligente. IT Sectr raccomanda di monitorare la stabilità dei tipi — i tipi instabili causano ricomposizione eccessiva.

CompositionLocal

CompositionLocal — passaggio implicito di dati in Compose. Analogo a @Environment in SwiftUI. CompositionLocalProvider — impostare un valore. current — lettura. Usato per: Theme (MaterialTheme), ContentScale, Density. CompositionLocal statico — per configurazione senza modifiche. CompositionLocal dinamico — per valori mutabili (temi). IT Sectr raccomanda di usare CompositionLocal per configurazioni globali e parametri espliciti per i dati.

Stato (remember, mutableStateOf, State Hoisting)

remember — preserva il valore tra le ricomposizioni. mutableStateOf — crea stato osservabile (MutableState<T>). Quando cambiato, innesca la ricomposizione. State Hoisting — pattern: lo stato viene sollevato al componente genitore, il figlio riceve valore + callback. State (immutabile) — sola lettura. MutableState — lettura + scrittura. rememberSaveable — persiste durante rotazione/morte del processo.

State Hoisting

State Hoisting — principio: state down, events up. Lo stato è memorizzato nel genitore e passato ai componenti figli tramite parametri. I componenti figli segnalano i cambiamenti tramite lambda (callback). Vantaggi: riutilizzabilità, testabilità, unica fonte di verità. Esempio: invece che MyTextField memorizzi il proprio stato, il genitore memorizza la stringa e la passa tramite value + onValueChange.

Stato derivato

derivedStateOf — stato calcolato, ricalcolato solo quando le dipendenze cambiano. Usato per filtraggio, conversione, validazione. snapshotFlow — converte State in Flow. Usato per catene reattive. collectAsState — raccoglie Flow in State all'interno di Composable. IT Sectr raccomanda derivedStateOf per valori calcolati e snapshotFlow per collegare State con le coroutine.

Contenitori (Column, Row, Box, LazyColumn)

Column — layout verticale (analogo a LinearLayout verticale). Row — layout orizzontale. Box — layout a pila (analogo a FrameLayout). LazyColumn — lista verticale scorrevole con caricamento lento. LazyRow — lista orizzontale scorrevole. Scaffold — struttura principale dello schermo: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — barra superiore. BottomNavigation — navigazione inferiore (NavigationBar in Material 3). Modifier — catena: .fillMaxWidth().padding(8.dp).clickable { }. L'ordine dei modificatori è importante — ognuno crea un nuovo wrapper.

Ottimizzazione di LazyColumn

LazyColumn — lista virtualizzata. Mostra solo elementi visibili. Ottimizzazione: 1) key — chiave univoca per l'elemento, 2) contentType — raggruppa elementi per tipo, 3) itemContent — minimizzare la ricomposizione nell'elemento, 4) LazyVerticalGrid / LazyHorizontalGrid — per griglie. LazyLayout — layout lento personalizzato. Paging 3 + Compose — paginazione tramite collectAsLazyPagingItems. IT Sectr raccomanda key(item) per tutti i LazyColumn per una ricomposizione prevedibile.

Navigazione (NavController, NavHost)

Navigation Compose — libreria di navigazione. NavController — gestisce lo stack di destinazioni. NavHost — contenitore del grafo di navigazione. composable("route") — registrare destinazione. navController.navigate("route") — navigare. popBackStack() — tornare indietro. Argomenti: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). Deep linking tramite intentFilter. BottomNavigation — integrazione con NavController: NavBarItem → navigate + popUpTo.

Navigazione avanzata

Back stack multipli — back stack separato per ogni scheda di BottomNavigation. SavedStateHandle — preservare gli argomenti durante la morte del processo. NavArgs — argomenti type-safe (Kotlin 2.0+). Deep link — schemi URL per link esterni. Gesto di ritorno predittivo (Android 14+) — supporto del gesto di ritorno con anteprima. IT Sectr raccomanda di usare NavArgs per la sicurezza dei tipi e back stack multipli per BottomNavigation.

Effetti (LaunchedEffect, DisposableEffect)

LaunchedEffect — avvia un blocco suspend in Composition. Annullato quando si esce da Composition. Riavviato quando cambiano le keys. Usato per: caricamento dati, timer, animazioni. DisposableEffect — per risorse che richiedono pulizia: onDispose { } — annullare iscrizione ai listener, chiudere connessioni. SideEffect — effetto sincrono (ogni ricomposizione). Usato per: logging, sincronizzazione con codice non Compose. IT Sectr raccomanda LaunchedEffect per il caricamento dati e DisposableEffect per la pulizia.

Compose — funzione + modificatore. SwiftUI — struct + modificatore. I concetti sono simili, la sintassi è diversa. IT Sectr raccomanda di imparare entrambi i framework — capire uno facilita l'apprendimento dell'altro.

Pattern di effetti

rememberCoroutineScope — accesso a CoroutineScope fuori da LaunchedEffect (es. al clic di un pulsante). snapshotFlow — convertire State in Flow per catene. produceState — convertire sorgente non Compose in State. animateFloatAsState e animateColorAsState — animazioni tramite effetti. IT Sectr raccomanda rememberCoroutineScope per eventi UI e LaunchedEffect per caricamento automatico.

Tematizzazione (MaterialTheme, Material3)

MaterialTheme — tema globale di Compose. Colori, tipografia, forme. MaterialTheme { } — avvolge l'intera app. Material3 (M3) — sistema di design Google 2023+. Dynamic Colors — adattamento allo sfondo (Android 12+). TextStyle — configurazione del testo: fontSize, fontWeight, lineHeight. Shape — arrotondamento angoli. Elevation — ombre. IT Sectr raccomanda Material3 per impostazione predefinita e Dynamic Colors per dispositivi moderni.

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

Animazioni (animate*, AnimatedVisibility)

animateFloatAsState — anima valori Float. animateColorAsState — anima colori. animateDpAsState — anima dimensione. AnimatedVisibility — mostra/nascondi con .animateEnterExit(). AnimatedContent — animazione al cambio di contenuto (crossfade, slide). updateTransition — animazione basata su stato enum. Animatable — animazione personalizzata tramite interfaccia Animatable. IT Sectr raccomanda AnimatedVisibility per liste e AnimatedContent per transizioni di schermo.

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

Test (Compose UI Test)

Compose UI Test — test degli schermi Compose. createComposeRule() — regola JUnit. setContent { } — impostare Composable. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — trovare elementi. performClick, performTextInput, performScrollTo — azioni. assertIsDisplayed, assertTextEquals — asserzioni. Semantics — albero Semantics per accessibilità e test. IdlingResource — attendere operazioni asincrone. Test screenshot — Papercuts, Roborazzi. IT Sectr raccomanda test UI per ogni schermo e test unitari per ViewModel.

WindowSizeClass — adattamento alla dimensione dello schermo (Compact, Medium, Expanded). Correlato ai layout responsivi di Material3. Usato in Adaptive Navigation Suite per il passaggio automatico da BottomNavigation a NavigationRail. IT Sectr raccomanda WindowSizeClass per l'adattamento di Compose a tablet e desktop.

Paging 3 + Compose — libreria di paginazione di Google. PagingData — flusso di pagine. PagingConfig — impostazioni (pageSize, prefetchDistance). collectAsLazyPagingItems() — raccogliere in Compose. PagingSource — sorgente personalizzata. RemoteMediator — caricamento ibrido (rete + DB). Paging 3 è lo standard per liste a scorrimento infinito in Compose.