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 d'API

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

  • thickness: utilisez ce paramètre pour spécifier l'épaisseur du séparateur. ligne.
  • 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 l'implémentation de la méthode 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 l'implémentation de la méthode Composant VerticalDivider. Il utilise le paramètre color pour fournir un couleur de 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