Mises en page de flux dans Compose

FlowRow et FlowColumn sont des composables semblables à Row et Column, mais ils diffèrent par le fait que les éléments passent à la ligne suivante lorsque le conteneur manque d'espace. Cela crée plusieurs lignes ou colonnes. Le nombre d'éléments d'une ligne peut également être contrôlé en définissant maxItemsInEachRow ou maxItemsInEachColumn. Vous pouvez souvent utiliser FlowRow et FlowColumn pour créer des mises en page responsives. Le contenu ne sera pas coupé si les éléments sont trop grands pour une dimension. De plus, l'utilisation d'une combinaison de maxItemsInEach* avec Modifier.weight(weight) peut vous aider à créer des mises en page qui remplissent/étendent la largeur d'une ligne ou d'une colonne si nécessaire.

L'exemple type est une UI de chip ou de filtrage :

Figure 1. Exemple de FlowRow

Utilisation de base

Pour utiliser FlowRow ou FlowColumn, créez ces composables et placez-y les éléments qui doivent suivre le flux standard :

@Composable
private fun FlowRowSimpleUsageExample() {
    FlowRow(modifier = Modifier.padding(8.dp)) {
        ChipItem("Price: High to Low")
        ChipItem("Avg rating: 4+")
        ChipItem("Free breakfast")
        ChipItem("Free cancellation")
        ChipItem("£50 pn")
    }
}
FlowLayoutSnippets.kt

Cet extrait génère l'UI présentée ci-dessus, les éléments passant automatiquement à la ligne suivante lorsqu'il n'y a plus d'espace sur la première ligne.

Fonctionnalités de la mise en page fluide

Les mises en page de flux présentent les fonctionnalités et propriétés suivantes, que vous pouvez utiliser pour créer différentes mises en page dans votre application.

Disposition de l'axe principal : disposition horizontale ou verticale

L'axe principal est l'axe sur lequel les éléments sont disposés (par exemple, dans FlowRow, les éléments sont disposés horizontalement). Le paramètre horizontalArrangement dans FlowRow contrôle la façon dont l'espace libre est réparti entre les éléments.

Le tableau suivant montre des exemples de définition de horizontalArrangement sur des éléments pour FlowRow :

Configuration horizontale définie sur FlowRow	Résultat
Arrangement.Start (Default)
Arrangement.SpaceBetween
Arrangement.Center
Arrangement.End
Arrangement.SpaceAround
Arrangement.spacedBy(8.dp)

Pour FlowColumn, des options similaires sont disponibles avec verticalArrangement, la valeur par défaut étant Arrangement.Top.

Disposition sur l'axe transversal

L'axe transversal est l'axe dans la direction opposée à l'axe principal. Par exemple, dans FlowRow, il s'agit de l'axe vertical. Pour modifier la disposition de l'ensemble du contenu du conteneur sur l'axe transversal, utilisez verticalArrangement pour FlowRow et horizontalArrangement pour FlowColumn.

Pour FlowRow, le tableau suivant montre des exemples de définition de différents verticalArrangement sur les éléments :

Disposition verticale définie sur FlowRow	Résultat
Arrangement.Top (Default)
Arrangement.Bottom
Arrangement.Center

Pour FlowColumn, des options similaires sont disponibles avec horizontalArrangement. La disposition par défaut de l'axe transversal est Arrangement.Start.

Alignement des éléments individuels

Vous pouvez positionner des éléments individuels dans la ligne avec différents alignements. Cette propriété est différente de verticalArrangement et horizontalArrangement, car elle aligne les éléments dans la ligne actuelle. Vous pouvez appliquer cette configuration avec Modifier.align().

Par exemple, lorsque les éléments d'un FlowRow ont des hauteurs différentes, la ligne prend la hauteur de l'élément le plus grand et applique Modifier.align(alignmentOption) aux éléments :

Alignement vertical défini sur FlowRow	Résultat
Alignment.Top (Default)
Alignment.Bottom
Alignment.CenterVertically

Pour FlowColumn, des options similaires sont disponibles. L'alignement par défaut est Alignment.Start.

Nombre maximal d'éléments par ligne ou colonne

Les paramètres maxItemsInEachRow ou maxItemsInEachColumn définissent le nombre maximal d'éléments sur l'axe principal à autoriser sur une ligne avant de passer à la suivante. La valeur par défaut est Int.MAX_INT, ce qui permet d'inclure autant d'éléments que possible, tant que leur taille leur permet de tenir sur la ligne.

Par exemple, définir un maxItemsInEachRow force la mise en page initiale à ne comporter que trois éléments :

Aucun maximum défini	maxItemsInEachRow = 3

Pondérations des éléments

La pondération augmente la taille d'un élément en fonction de son facteur et de l'espace disponible sur la ligne où il a été placé. Il est important de noter qu'il existe une différence entre FlowRow et Row dans la façon dont les pondérations sont utilisées pour calculer la largeur d'un élément. Pour Rows, le poids est basé sur tous les éléments de Row. Avec FlowRow, la pondération est basée sur les éléments de la ligne dans laquelle un élément est placé, et non sur tous les éléments du conteneur FlowRow.

Par exemple, si vous avez quatre éléments qui se trouvent tous sur une ligne, chacun avec des pondérations différentes de 1f, 2f, 1f et 3f, la pondération totale est de 7f. L'espace restant dans une ligne ou une colonne sera divisé par 7f. Ensuite, la largeur de chaque élément sera calculée à l'aide de weight * (remainingSpace / totalWeight).

Vous pouvez combiner Modifier.weight et le nombre maximal d'éléments avec FlowRow ou FlowColumn pour créer une mise en page de type grille. Cette approche est utile pour créer des mises en page responsives qui s'adaptent à la taille de votre appareil.

Voici quelques exemples de ce que vous pouvez faire avec les pondérations. Par exemple, une grille dans laquelle les éléments sont de taille égale, comme illustré ci-dessous :

Figure 2. Utiliser FlowRow pour créer une grille

Pour créer une grille d'éléments de taille égale, vous pouvez procéder comme suit :

val rows = 3
val columns = 3
FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = rows
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .weight(1f)
        .clip(RoundedCornerShape(8.dp))
        .background(MaterialColors.Blue200)
    repeat(rows * columns) {
        Spacer(modifier = itemModifier)
    }
}
FlowLayoutSnippets.kt

Notez que si vous ajoutez un autre élément et que vous le répétez 10 fois au lieu de 9, le dernier élément occupe toute la dernière colonne, car la pondération totale de la ligne entière est de 1f :

Figure 3. Utiliser FlowRow pour créer une grille dont le dernier élément occupe toute la largeur

Vous pouvez combiner les pondérations avec d'autres Modifiers, tels que Modifier.width(exactDpAmount), Modifier.aspectRatio(aspectRatio) ou Modifier.fillMaxWidth(fraction). Ces modificateurs fonctionnent tous ensemble pour permettre un dimensionnement responsif des éléments dans un FlowRow (ou FlowColumn).

Vous pouvez également créer une grille alternée d'éléments de différentes tailles, où deux éléments occupent chacun la moitié de la largeur et un élément occupe toute la largeur de la colonne suivante :

Figure 4. FlowRow avec des lignes de tailles différentes

Pour ce faire, utilisez le code suivant :

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 2
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .clip(RoundedCornerShape(8.dp))
        .background(Color.Blue)
    repeat(6) { item ->
        // if the item is the third item, don't use weight modifier, but rather fillMaxWidth
        if ((item + 1) % 3 == 0) {
            Spacer(modifier = itemModifier.fillMaxWidth())
        } else {
            Spacer(modifier = itemModifier.weight(0.5f))
        }
    }
}
FlowLayoutSnippets.kt

Dimensionnement fractionnaire

Modifier.fillMaxWidth(fraction) vous permet de spécifier la taille du conteneur qu'un élément doit occuper. Le fonctionnement est différent de celui de Modifier.fillMaxWidth(fraction) lorsqu'il est appliqué à Row ou Column, car les éléments Row/Column occupent un pourcentage de la largeur restante, plutôt que la largeur totale du conteneur.

Par exemple, le code suivant produit des résultats différents selon que vous utilisez FlowRow ou Row :

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 3
) {
    val itemModifier = Modifier
        .clip(RoundedCornerShape(8.dp))
    Box(
        modifier = itemModifier
            .height(200.dp)
            .width(60.dp)
            .background(Color.Red)
    )
    Box(
        modifier = itemModifier
            .height(200.dp)
            .fillMaxWidth(0.7f)
            .background(Color.Blue)
    )
    Box(
        modifier = itemModifier
            .height(200.dp)
            .weight(1f)
            .background(Color.Magenta)
    )
}
FlowLayoutSnippets.kt

FlowRow : élément du milieu avec une fraction de 0,7 de la largeur totale du conteneur.
Row : l'élément du milieu occupe 0,7 % de la largeur restante de Row.

fillMaxColumnWidth() et fillMaxRowHeight()

L'application de Modifier.fillMaxColumnWidth() ou de Modifier.fillMaxRowHeight() à un élément d'un FlowColumn ou d'un FlowRow garantit que les éléments de la même colonne ou ligne occupent la même largeur ou hauteur que l'élément le plus grand de la colonne ou de la ligne.

Par exemple, cet exemple utilise FlowColumn pour afficher la liste des desserts Android. Vous pouvez voir la différence de largeur de chaque élément lorsque Modifier.fillMaxColumnWidth() est appliqué aux éléments par rapport à lorsqu'il ne l'est pas et que les éléments sont renvoyés à la ligne.

FlowColumn(
    Modifier
        .padding(20.dp)
        .fillMaxHeight()
        .fillMaxWidth(),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    maxItemsInEachColumn = 5,
) {
    repeat(listDesserts.size) {
        Box(
            Modifier
                .fillMaxColumnWidth()
                .border(1.dp, Color.DarkGray, RoundedCornerShape(8.dp))
                .padding(8.dp)
        ) {

            Text(
                text = listDesserts[it],
                fontSize = 18.sp,
                modifier = Modifier.padding(3.dp)
            )
        }
    }
}
FlowLayoutSnippets.kt

Modifier.fillMaxColumnWidth() appliqué à chaque élément
Aucune modification de largeur définie (éléments encapsulés)