Séparateur

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

Surface de l'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 illustre 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 permet d'afficher une fine ligne horizontale entre deux composants de texte:

Un écran d'application Android affichant deux éléments textuels : "Premier élément de la liste" et "Deuxième élément de la liste", séparés par une fine ligne horizontale.
Figure 1. Séparateur horizontal séparant deux composants de texte.

Exemple de séparateur vertical

L'exemple suivant illustre une implémentation du composant VerticalDivider. Elle utilise le paramètre color afin de fournir une couleur personnalisée pour 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 permet d'afficher une fine ligne verticale entre deux composants de texte:

Un écran d'application Android affichant deux éléments textuels : "Premier élément de la ligne" et "Deuxième élément de la ligne", séparés par une fine ligne verticale.
Figure 2 : Séparateur vertical séparant deux composants de texte.

Ressources supplémentaires