Row dans Jetpack Compose : ce que c'est, propriétés composable et fonctionnement

Qu'est-ce que Row dans Jetpack Compose

Row est une fonction composable qui place les éléments enfants dans une séquence horizontale. Dans la hiérarchie des mises en page Compose, Row occupe la position d'un conteneur de base aux côtés de Column et Box.

Row ne nécessite pas de spécifier de dimensions — il s'ajuste automatiquement à son contenu. La largeur de Row est égale à la somme des largeurs des éléments enfants incluant le remplissage, sauf si Modifier.fillMaxWidth ou une taille fixe est spécifié.

Les éléments enfants de Row peuvent avoir leurs propres modificateurs qui affectent leur position dans le conteneur. Par exemple, Modifier.weight permet aux éléments d'occuper une partie proportionnelle de l'espace disponible.

Selon Android Developers Blog, 2024, Row traite les éléments enfants séquentiellement, calculant leurs tailles selon les règles de mesure Compose : d'abord les éléments sans weight sont mesurés, puis l'espace restant est distribué entre les éléments avec weight.

Syntaxe et signature de base de Row

La signature de base de Row inclut le paramètre modifier, horizontalArrangement et verticalAlignment. Tous les éléments enfants sont passés dans le bloc lambda de contenu final.

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "Un")
        Text(text = "Deux")
        Text(text = "Trois")
    }
}

Propriétés de Row : horizontalArrangement et verticalAlignment

Le paramètre horizontalArrangement détermine comment les éléments enfants sont répartis le long de l'axe horizontal dans Row. Les valeurs disponibles incluent Start, End, Center, SpaceBetween, SpaceAround et SpaceEvenly de la classe Arrangement.

Arrangement.Start place les éléments au début du conteneur, Arrangement.End — à la fin, et Arrangement.Center — au centre. Ces valeurs fonctionnent de manière similaire à la propriété justify-content en CSS Flexbox.

Arrangement.SpaceBetween distribue les éléments uniformément, plaçant le premier élément au début, le dernier à la fin et les autres avec des espaces égaux entre eux. Selon Material Design Guidelines, 2025, SpaceBetween est optimal pour les barres d'outils et les rangées de navigation.

Le paramètre verticalAlignment aligne les éléments verticalement. Les valeurs disponibles incluent Alignment.Top, Alignment.CenterVertically et Alignment.Bottom. Cette propriété est utile lorsque les éléments de Row ont des hauteurs différentes — par exemple, une icône à côté d'un texte multiligne.

Tableau des valeurs Arrangement

Distribution de l'espace avec Modifier.weight

Modifier.weight est un modificateur disponible uniquement dans Row et Column qui distribue l'espace disponible entre les éléments enfants proportionnellement à la valeur spécifiée. Si un élément a un poids de 1.0f et un autre de 2.0f, le deuxième élément occupera deux fois plus d'espace.

Les éléments sans weight occupent l'espace nécessaire à leur contenu. L'espace restant est distribué entre les éléments avec weight proportionnellement à leur poids. Ce comportement est similaire à la propriété flex-grow en CSS Flexbox.

Selon Android Developer Documentation, 2025, weight fonctionne uniquement dans Row, Column et BoxWithConstraints. Lors de l'utilisation de weight dans Row, tous les éléments enfants sont mesurés en deux passes : d'abord les éléments sans weight, puis les éléments avec weight.

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "Gauche",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "Droite")
    }
}

Exemples de code avec Row

Le premier exemple montre Row avec une icône et du texte — un scénario typique pour une liste de contacts ou des paramètres. Icon et Text sont encapsulés dans Row avec verticalAlignment centré.

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "Ajouter aux favoris")
    }
}

Le deuxième exemple montre Row avec des boutons et une distribution uniforme. SpaceEvenly garantit un espacement égal entre tous les boutons et les bords du conteneur.

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("Annuler") }
        Button(onClick = {}) { Text("Enregistrer") }
    }
}

Le troisième exemple — Row dans une Card pour afficher une évaluation. Un Row imbriqué avec Modifier.weight permet à l'étoile d'évaluation et à la valeur numérique d'occuper un espace fixe.

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "Évaluation :",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

Caractéristiques de Row en mise en page adaptative

Row nécessite un contrôle de la largeur en mise en page adaptative. Si le contenu de Row dépasse la largeur d'écran disponible, les éléments peuvent déborder des limites du conteneur. Pour éviter cela, utilisez Modifier.horizontalScroll ou passez à Column.

Lors de la combinaison de Row avec Modifier.weight, il est important de définir fillMaxWidth sur le Row parent — sinon weight distribuera un espace inexistant. Selon Material Design Guidelines, 2025, Row avec weight sans fillMaxWidth est considéré comme une configuration invalide.

Pour les interfaces adaptatives, il est recommandé de combiner Row avec Box ou d'utiliser Arrangement.SpaceBetween pour la distribution automatique des éléments sur différentes tailles d'écran. Cela offre une flexibilité sans requêtes média.

• Modifier.horizontalScroll — ajoute le défilement lorsque Row déborde
• Modifier.weight — distribue l'espace proportionnellement
• Arrangement.SpaceBetween — distribution adaptative avec fixation aux bords