Définir le comportement des éléments

Utilisez Modifier.flex pour contrôler la façon dont un élément change de taille, d'ordre et est aligné dans un FlexBox.

Taille de l'article

Utilisez les fonctions basis, grow et shrink pour contrôler la taille d'un élément.

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis(FlexBasis.Auto)
            grow(1.0f)
            shrink(0.5f)
        }
    )
}
FlexBoxSnippets.kt

Définir la taille initiale

Utilisez basis pour spécifier la taille initiale de l'élément avant que tout espace supplémentaire ne soit distribué. Vous pouvez considérer qu'il s'agit de la taille préférée de l'élément.

Type de valeur	Comportement	Extrait de code Remarque : La taille intrinsèque maximale des cases est de 100dp.	Exemple utilisant la largeur du conteneur 600dp
Auto (par défaut)	Utilisez la taille intrinsèque maximale de l'élément. Par exemple, la largeur intrinsèque maximale d'un composable Text correspond à la largeur de l'ensemble de son texte sur une seule ligne, sans retour à la ligne.	FlexBox { RedRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) BlueRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) } FlexBoxSnippets.kt
Correction de dp.	Une taille fixe en dp.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
Pourcentage	Un pourcentage de la taille du conteneur.	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

Si la valeur de base est inférieure à la taille minimale intrinsèque de l'élément, la taille minimale intrinsèque est utilisée à la place. Par exemple, si un élément Text contenant un mot nécessite 50dp pour s'afficher, mais qu'il comporte également basis = 10.dp, la valeur 50dp est utilisée.

Agrandir les éléments lorsqu'il y a de l'espace

Utilisez grow pour spécifier l'augmentation de la taille d'un élément lorsqu'il y a de l'espace supplémentaire. Il s'agit de l'espace restant dans le conteneur FlexBox une fois que toutes les valeurs basis des éléments ont été additionnées. La valeur grow indique la quantité d'espace supplémentaire qu'un enfant donné recevra par rapport à ses frères et sœurs. Par défaut, les éléments ne s'agrandissent pas.

L'exemple suivant montre un FlexBox avec trois éléments enfants. Chacun a une valeur de base de 100dp. Le premier enfant a une valeur grow positive. Comme il n'y a qu'un seul enfant avec une valeur grow, la valeur réelle n'a pas d'importance. Tant qu'elle est positive, l'enfant reçoit tout l'espace supplémentaire.

Les images montrent le comportement de FlexBox lorsque la taille de son conteneur est de 600dp.

FlexBox { RedRoundedBox( title = "400dp", modifier = Modifier.flex { grow(1f) } ) BlueRoundedBox(title = "100dp") GreenRoundedBox(title = "100dp") } FlexBoxSnippets.kt

Chaque enfant a une valeur de base de 100dp. Il y a 300dp d'espace supplémentaire. L'enfant 1 s'agrandit de 300dp pour remplir l'espace supplémentaire.

Dans l'exemple suivant, la taille du conteneur et celle de basis sont identiques. La différence est que chaque enfant a une valeur grow différente.

FlexBox { RedRoundedBox( title = "150dp", modifier = Modifier.flex { grow(1f) } ) BlueRoundedBox( title = "200dp", modifier = Modifier.flex { grow(2f) } ) GreenRoundedBox( title = "250dp", modifier = Modifier.flex { grow(3f) } ) } FlexBoxSnippets.kt

Chaque enfant a une valeur de base de 100dp. Il y a 300dp d'espace supplémentaire. La valeur totale de croissance est de 6. L'enfant 1 grandit de (1 / 6) * 300 = 50dp L'enfant 2 grandit de (2 / 6) * 300 = 100dp L'enfant 3 augmente de (3 / 6) * 300 = 150dp

Réduire les éléments lorsque l'espace est insuffisant

Utilisez shrink pour spécifier la réduction d'un élément lorsque le conteneur FlexBox ne dispose pas de suffisamment d'espace pour tous les éléments. shrink fonctionne de la même manière que grow, sauf qu'au lieu de distribuer l'espace supplémentaire aux éléments, le déficit d'espace est distribué aux éléments. La valeur shrink spécifie la part du déficit d'espace que l'élément reçoit, ou plutôt la quantité de réduction de l'élément. Par défaut, les éléments ont une valeur shrink de 1f, ce qui signifie qu'ils se réduisent de manière égale.

L'exemple suivant montre deux composables Text avec le même texte. Le premier enfant a une valeur de réduction de 1f, ce qui signifie qu'il se réduit pour absorber tout le déficit d'espace.

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink(1f) }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink(0f) }
    )
}
FlexBoxSnippets.kt

À mesure que la taille du conteneur diminue, l'élément enfant 1 rétrécit.

Taille du conteneur	UI FlexBox
700dp
500dp
450dp

Alignement des éléments

Utilisez alignSelf pour contrôler l'alignement d'un élément sur l'axe transversal. Cette option remplace la propriété alignItems du conteneur pour cet élément. Il possède toutes les mêmes valeurs possibles, avec l'ajout de Auto qui hérite du comportement du conteneur FlexBox.

Par exemple, ce FlexBox a alignItems défini sur Start et cinq enfants qui remplacent l'alignement sur l'axe transversal.

FlexBox(
    config = {
        alignItems(FlexAlignItems.Start)
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Center) })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.End) })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Stretch) })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Baseline) })
}
FlexBoxSnippets.kt

Ordre de l'élément

Par défaut, FlexBox dispose les éléments dans l'ordre dans lequel ils sont déclarés dans le code. Remplacez ce comportement à l'aide de order.

La valeur par défaut de order est zéro, et FlexBox trie les éléments en fonction de cette valeur par ordre croissant. Tous les éléments ayant la même valeur order sont disposés dans l'ordre dans lequel ils sont déclarés. Utilisez des valeurs order négatives et positives pour déplacer des éléments au début ou à la fin d'une mise en page sans modifier l'endroit où ils sont déclarés.

L'exemple suivant montre deux éléments enfants. La première a la valeur order par défaut de zéro, et la seconde a un ordre de -1. Après le tri, Enfant 1 apparaît après Enfant 2.

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order(-1)
        }
    )
}
FlexBoxSnippets.kt