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 affiche une ligne horizontale fine entre deux composants de texte:

Écran d'une application Android affichant deux éléments de texte, "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. 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:

Écran d'une application Android affichant deux éléments de texte, "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