Trennlinie

Trennlinien sind dünne Linien, die Elemente in Listen oder anderen Containern voneinander trennen. Mithilfe der zusammensetzbaren Funktionen HorizontalDivider und VerticalDivider kannst du Trennlinien in deiner App implementieren.

API-Oberfläche

Beide Komponenten bieten Parameter, mit denen ihr Erscheinungsbild geändert werden kann:

  • thickness: Hiermit wird die Stärke der Trennlinie angegeben.
  • color: Mit diesem Parameter wird die Farbe der Trennlinie angegeben.

Beispiel für horizontale Trennlinie

Das folgende Beispiel zeigt eine Implementierung der Komponente HorizontalDivider. Mit dem Parameter thickness wird die Höhe der Zeile gesteuert:

@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

Diese Implementierung rendert eine dünne horizontale Linie zwischen zwei Textkomponenten:

Bildschirm einer Android-App mit zwei Textelementen: „Erstes Element in der Liste“ und „Zweites Element in der Liste“, getrennt durch eine schmale horizontale Linie.
Abbildung 1. Eine horizontale Trennlinie, die zwei Textkomponenten voneinander trennt.

Beispiel für eine vertikale Trennlinie

Das folgende Beispiel zeigt eine Implementierung der Komponente VerticalDivider. Mit dem Parameter color wird eine benutzerdefinierte Farbe für die Linie angegeben:

@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

Diese Implementierung rendert eine dünne vertikale Linie zwischen zwei Textkomponenten:

Bildschirm einer Android-App, auf dem zwei Textelemente angezeigt werden: „Erstes Element in der Zeile“ und „Zweites Element in der Zeile“, getrennt durch eine dünne vertikale Linie.
Abbildung 2: Eine vertikale Trennlinie, die zwei Textkomponenten voneinander trennt.

Zusätzliche Ressourcen