Séparateur

Les séparateurs sont des lignes fines qui séparent les éléments dans les listes ou d'autres conteneurs. Vous pouvez implémenter des séparateurs dans votre application à l'aide des composables HorizontalDivider et VerticalDivider.

• HorizontalDivider : sépare les éléments d'une colonne.
• VerticalDivider : sépare les éléments d'une ligne.

Surface d'API

Les deux composants fournissent des paramètres permettant de modifier leur apparence :

• thickness : utilisez ce paramètre pour spécifier l'épaisseur de la ligne de séparation.
• color : utilisez ce paramètre pour spécifier la couleur de la ligne de séparation.

Exemple de séparateur horizontal

L'exemple suivant montre une implémentation du composant HorizontalDivider. Il utilise le paramètre thickness pour contrôler la hauteur de la ligne :

@Composable
fun HorizontalDividerExample() {
    Column(
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        Text("First item in list")
        HorizontalDivider(thickness = 2.dp)
        Text("Second item in list")
    }
}
Divider.kt

Cette implémentation affiche une fine ligne horizontale entre deux composants de texte :

Exemple de séparateur vertical

L'exemple suivant montre une implémentation du composant VerticalDivider. Il utilise le paramètre color pour fournir une couleur personnalisée à la ligne :

@Composable
fun VerticalDividerExample() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Min),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Text("First item in row")
        VerticalDivider(color = MaterialTheme.colorScheme.secondary)
        Text("Second item in row")
    }
}
Divider.kt

Cette implémentation affiche une fine ligne verticale entre deux composants de texte :

Ressources supplémentaires

• HorizontalDivider
• VerticalDivider
• Material Design : séparateurs