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 à l'intérieur d'un FlexBox.

Taille de l'article

Utilisez les propriétés 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 qu'il s'agit de la taille préférée de l'article.

Type de valeur	Comportement	Extrait de code Remarque : La taille intrinsèque maximale des boîtes 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 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
Correction de `dp`.	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, c'est cette dernière qui est utilisée. Par exemple, si un élément Text contenant un mot nécessite 50dp pour s'afficher, mais comporte également basis = 10.dp, la valeur 50dp est utilisée.

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

Utilisez grow pour spécifier 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 après l'addition de toutes les valeurs basis des éléments. La valeur grow indique la part de l'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. Chacune 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 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 grandit de 300dp pour remplir l'espace supplémentaire.

Le premier élément s'étend pour remplir 300 dp d'espace supplémentaire.

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

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 croissance totale est de 6.

L'enfant 1 reçoit (1 / 6) * 300 = 50dp

L'enfant 2 grandit de (2 / 6) * 300 = 100dp

L'enfant 3 grandit 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 la taille des é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 manque d'espace est distribué aux éléments. La valeur shrink spécifie la part du déficit d'espace que reçoit l'élément, ou plutôt la quantité dont l'élément va diminuer. Par défaut, les éléments ont une valeur shrink de 1f, ce qui signifie qu'ils rétrécissent 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 manque 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, celle de l'enfant 1 diminue également.

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 propriété alignItems du conteneur pour cet élément. Il possède 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

Cinq enfants de tailles différentes écrasant 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. Les éléments ayant 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. La première a une valeur par défaut de order égale à 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

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

Définir le comportement du conteneur

À propos des appareils pliables

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