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 d'alignement dans un FlexBox.

Taille de l'élément

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 la distribution de tout espace supplémentaire. Vous pouvez considérer cela comme 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 une largeur de conteneur de `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 tout 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
`dp` fixe	Taille fixe en dp.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
Pourcentage	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, cette dernière est utilisée à la place. Par exemple, si un élément Text contenant un mot nécessite 50dp pour s'afficher, mais qu'il a également basis = 10.dp, une valeur de 50dp est utilisée.

Développer des éléments lorsqu'il y a de l'espace

Utilisez grow pour spécifier la quantité d'espace supplémentaire qu'un élément occupe lorsqu'il y a de l'espace. 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 se développent 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.

Trois éléments avec une base de 100 dp chacun, dans un conteneur de 600 dp, avant la croissance.

L'enfant 1 se développe de 300dp pour remplir l'espace supplémentaire.

Le premier élément se développe pour remplir 300 dp d'espace supplémentaire.

Dans l'exemple suivant, la taille du conteneur et la taille 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.

Trois éléments avec une base de 100 dp chacun, dans un conteneur de 600 dp, avant la croissance, avec des valeurs de croissance différentes.

La valeur de développement totale est de 6.

L'enfant 1 se développe de (1 / 6) * 300 = 50dp

L'enfant 2 se développe de (2 / 6) * 300 = 100dp

L'enfant 3 se développe de (3 / 6) * 300 = 150dp

Les éléments se développent pour remplir 300 dp d'espace supplémentaire en fonction des valeurs de développement relatives.

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

Utilisez shrink pour spécifier la quantité de 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 quantité de 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'enfant 1 se réduit.

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. Cela remplace la alignItems propriété 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 de 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

Cinq enfants de tailles différentes remplaçant la propriété alignItems.

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 qui ont la même valeur order sont disposés dans le même ordre que celui 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. Le premier a la valeur order par défaut de zéro, et le second a une valeur de -1. Après le tri, l'enfant 1 apparaît après l'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

Deux zones arrondies, la première contenant le texte "Hello" et la seconde le texte "World".

Définir le comportement du conteneur

Aperçu

Définir le comportement des éléments Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.