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.

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 :

Écran d'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. Un séparateur horizontal sépare 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 :

Écran d'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. Un séparateur vertical sépare deux composants de texte.

Ressources supplémentaires