Jetpack Compose : fondamentaux, fonctions Composable et State

Qu'est-ce que Jetpack Compose ?

Jetpack Compose est un framework d'UI de Google construit sur les principes de la programmation réactive. Au lieu d'une Activity avec mise en page XML, FragmentManager et ViewBinding, le développeur décrit l'interface via des fonctions Kotlin annotées avec @Composable. Compose n'utilise pas LayoutInflater — l'UI est constituée de fonctions Kotlin pures compilées en bytecode. Le framework est composé de plusieurs bibliothèques : Compose UI (composants de base Text, Button, Column, Row), Compose Foundation (Material Design, Gestures, Focus), Compose Material3 (Material You avec Dynamic Colors) et Compose Runtime (State, Side Effects, Coroutines). Compose fonctionne sur Android API 21+ (Android 5.0) et est totalement compatible avec le code View/XML existant via ComposeView — un adaptateur AndroidView.

Compose vs View System

View System (2008) utilise une hiérarchie d'objets View avec gestion manuelle : le développeur crée une mise en page XML, trouve les Views via findViewById, implémente un Adapter pour RecyclerView et appelle notifyDataSetChanged lorsque les données changent. Compose décrit l'UI fonctionnellement : lorsque l'état change, le framework recompose uniquement les fonctions Composable modifiées, calcule le diff et applique des modifications minimales au Canvas. Les performances de Compose sont comparables à View System, et dans les scénarios avec des listes complexes (LazyColumn), il surpasse souvent RecyclerView en sautant les éléments inutiles grâce au paramètre key. Chez IT Sectr, Compose est utilisé pour les nouveaux modules d'applications Android avec minSdk 24+.

Fonctions Composable : blocs de construction de l'UI

@Composable — une annotation qui transforme une fonction Kotlin ordinaire en bloc de construction d'UI. Les fonctions Composable peuvent appeler d'autres fonctions Composable, formant un arbre de composants. Contrairement à View, les fonctions Composable n'ont pas d'état par défaut — elles sont stateless et se redessinent à chaque changement de paramètres d'entrée ou de State. Le Compose Compiler transforme les fonctions @Composable en code pouvant être interrompu et repris (positional memoization) — cela permet à Compose de redémarrer uniquement les parties modifiées sans reconstruire entièrement l'arbre.

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

La fonction UserProfile accepte name et avatarUrl comme paramètres, construit une ligne avec un avatar et un nom. Modifier.fillMaxWidth() étire le composant sur toute la largeur, .padding(16.dp) ajoute du remplissage. MaterialTheme.typography.titleMedium utilise le style système Material 3. Lorsque les paramètres name ou avatarUrl changent, Compose recompose UserProfile — recréant le composant avec de nouvelles valeurs.

State et Recomposition dans Jetpack Compose

State dans Compose est toute valeur dont le changement déclenche la recomposition (redémarrage) des fonctions @Composable dépendantes. L'approche de base est mutableStateOf(), créant un MutableState<T> avec le support du système de snapshot de Compose. Snapshot est un mécanisme de suivi des changements : lors de l'écriture dans State, Compose marque le Snapshot actuel comme dirty, et le planificateur de recomposition redémarre uniquement les fonctions Composable lisant ce State. Pour les collections observables, utilisez mutableStateListOf() et mutableStateMapOf(). Compose prend en charge le State des composants Lifecycle-Aware via collectAsState() pour Kotlin Flow et observeAsState() pour 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")
    }
}

Le code crée un bouton "Like" avec l'état liked (Boolean) et count (Int) stockés via mutableStateOf(). Lors de l'appui, liked est inversé et le compteur augmente/diminue — Compose recompose LikeButton automatiquement. Le délégué by permet d'utiliser State comme une variable normale : liked = !liked au lieu de liked.value = !liked.value. La couleur du bouton change réactivement entre primary (aimé) et surfaceVariant (non aimé).

remember : cache entre les recompositions

remember — une fonction Compose qui met en cache une valeur entre les recompositions. Sans remember, chaque redémarrage d'une fonction Composable crée un nouvel état (mutableStateOf) — cela casse la logique de l'application : lors de la rotation de l'écran ou du changement du State parent, le compteur se réinitialise. remember accepte un lambda de calcul et évalue la valeur uniquement lors de la première composition ; lors des suivantes, il retourne le résultat en cache. Pour réinitialiser le cache, utilisez remember(key) — la clé détermine quand recalculer la valeur. remember(key1, key2) recalcule lorsque n'importe quelle clé change. Pour les états persistants (survivant à la rotation d'écran), utilisez rememberSaveable — un analogue de remember avec sauvegarde dans Bundle via 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 = "Elapsed: ${seconds}s",
            style = MaterialTheme.typography.displayMedium
        )
    }
}

rememberSaveable préserve seconds lors de la rotation d'écran (changement de configuration). LaunchedEffect démarre une coroutine qui incrémente seconds chaque seconde. Lors de la recomposition de TimerScreen (chaque seconde), seconds n'est pas réinitialisé grâce à rememberSaveable. Utilisez remember normal pour les états qui ne doivent pas survivre aux changements de configuration (par exemple, les drapeaux d'animation).

Modifier : chaîne de configurations Composable

Modifier — un objet conteneur immuable implémentant le pattern Builder pour configurer l'apparence, le comportement et la disposition des composants Composable. Chaque appel de méthode Modifier (.padding(), .width(), .clickable(), .background()) retourne un nouveau Modifier avec l'élément ajouté. L'ordre des modificateurs est important : .padding(16.dp).clickable { } — le remplissage est appliqué avant le gestionnaire de clic, clickable suit toute la zone y compris le remplissage. .clickable { }.padding(16.dp) — toute la zone avant le remplissage est cliquable, le remplissage déplace le contenu vers l'intérieur. Modifier prend en charge les implémentations personnalisées via then(otherModifier) et compositionLocal pour accéder aux configurations parentes.

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { println("Card clicked") },
        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(
                "UI déclarative pour Android avec State et Modifier",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

CardExample démontre la chaîne Modifier : fillMaxWidth + padding + clickable. Card est un composant Material3 avec ses propres paramètres elevation et colors. Le Column imbriqué a un remplissage interne de 16dp. Compose Material3 adapte automatiquement les couleurs au Dynamic Color (Material You) sur Android 12+. Card est l'un des 30+ composants Material3 intégrés dans Compose.

State hoisting et architecture Compose

State hoisting — un pattern consistant à remonter l'état d'une fonction Composable vers son appelant, rendant la fonction stateless. Un composant stateless reçoit des données et des callbacks via des paramètres sans posséder l'État lui-même. Cela améliore la réutilisabilité et la testabilité : le composant peut être appelé avec différents States et testé en preview. Google recommande l'architecture : ViewModel + StateFlow (ou MutableStateFlow) + collectAsState() dans Compose. ViewModel remonte l'état au niveau de l'écran, Compose le rend. Les effets secondaires (LaunchedEffect, DisposableEffect) gèrent les événements ponctuels.