Aller au contenu principal

Compose syntaxe, les subtilités

Facile : fonctions en majuscule​

Les fonctions Composable commencent par une majuscule, contrairement aux conventions de nommage en Kotlin où les fonctions commencent par une minuscule.

  • Convention juste pour compose
  • C'est une contradiction avec les conventions Kotlin
  • Pourrait nous mélanger avec des appels de constructeur
  • Row() est un appel de compose
  • Random() est un appel de constructeur

Ce sont bien des fonctions en compose.

Intermédiaire : Syntaxe des appels de fonctions Compose​

  • Dans un appel fonction classique, on a des () : maFonction(5, 6)
  • En kotlin, si le dernier paramètre est une lambda, on peut la déporter après les parenthèses
  • On appelle ça une trailing lambda

Exemple​

Voici deux façons équivalentes d'utiliser un composant Row :

// Utilisation du trailing lambda
Row {
    Column { /* contenu */ }
    Column { /* contenu */ }
}
// Lambda passé dans les parenthèses
Row(content = {
    Column { /* contenu */ }
    Column { /* contenu */ }
})
  • Le contenu de la Row est défini par une lambda
  • La syntaxe diffère selon la position du bloc
  • Juste la dernière lambda peut être déportée

Code source de Column​

@Composable
inline fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope.() -> Unit
) {
    val measurePolicy = columnMeasurePolicy(verticalArrangement, horizontalAlignment)
    Layout(
        content = { ColumnScopeInstance.content() },
        measurePolicy = measurePolicy,
        modifier = modifier
    )
}

Difficile : le Modifier​

  • modifier permet de chaîner plusieurs transformations ou décorations sur un composant.
  • Chaque appel à une fonction comme padding, background, fillMaxWidth, etc., retourne un nouvel objet Modifier
  • Ça permet de les enchaîner facilement.

Ce mécanisme repose sur le patron de conception Chain of Responsibility (chaîne de responsabilité), où chaque transformation modifie ou enrichit le comportement du composant.

Exemple d'utilisation de Modifier​

Row(
    modifier = Modifier
        .padding(8.dp)
        .background(Color.LightGray)
        .fillMaxWidth()
) {
    // contenu
}

Dans cet exemple, le Row aura un padding de 8dp, un fond gris clair et prendra toute la largeur disponible. Chaque appel retourne un nouveau Modifier enrichi, permettant de composer facilement plusieurs effets.

God mode : gestion de l'état avec remember​

En Jetpack Compose, la fonction remember permet de conserver une valeur en mémoire à travers les recompositions d'une fonction composable. Cela signifie que la valeur stockée avec remember ne sera pas réinitialisée à chaque fois que la fonction est réévaluée, sauf si les clés de dépendance changent ou si le composant est retiré de la composition.

remember est souvent utilisé pour stocker l'état local d'un composant, comme une variable qui doit survivre aux changements d'interface mais rester propre à la composable.

Exemple d'utilisation de remember​

@Composable
fun Compteur() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Compteur : $count")
    }
}

Dans cet exemple, la variable count est conservée grâce à remember. À chaque clic, la valeur est incrémentée et l'interface se met à jour, mais la valeur n'est pas perdue lors des recompositions.

Références :

Exercices​

Ouvrez le projet WhatTheCompose dans Intellij, il s'agit d'un projet en pur Kotlin.

Exercice Lambda​

Pour se familiariser avec les lambda, ouvrez le fichier A-Lambdas.kt.

Rajouter:

  • dans la fonction main
  • crée un tableau avec les valeurs 5, 55, -12, 2034
  • un appel à triBulle
  • qui trie le tableau du nombre le plus court au nombre le plus long au sens du nombre de chiffres
  • par exemple "-12" (3 chiffres) est plus long que "55" (2 chiffres) donc sera après dans le tableau trié

Exercice lambda déportée​

Se familiariser avec les trailing lambdas, ouvrez le fichier B-TrailingLambda.kt.

Exercice Café modifié​

Ouvrez le fichier C-Modifier-Voodoo-Magic.kt.

  1. placer quelques points d'arrêts et regarder ce que fait chaque modification
  2. essayer d'ajouter une fonction pour mettre une vanilleFrançaise dans le café