Trennlinie

Trennlinien sind dünne Linien, die Elemente in Listen oder anderen Containern voneinander trennen. Sie können Trennlinien in Ihrer App mit den zusammensetzbaren Funktionen HorizontalDivider und VerticalDivider implementieren.

API-Oberfläche

Beide Komponenten bieten Parameter zum Ändern ihres Erscheinungsbilds:

  • thickness: Mit diesem Parameter können Sie die Dicke der Trennlinie angeben.
  • color: Mit diesem Parameter können Sie die Farbe der Trennlinie angeben.

Beispiel für eine horizontale Trennlinie

Das folgende Beispiel zeigt eine Implementierung der Komponente HorizontalDivider. Mit dem Parameter thickness wird die Höhe der Linie 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:

Ein Android-App-Bildschirm mit zwei Textelementen: „Erstes Element in der Liste“ und „Zweites Element in der Liste“, getrennt durch eine dünne 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 festgelegt:

@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:

Auf dem Bildschirm einer Android-App werden zwei Textelemente angezeigt: „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