Trennlinie

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

API-Oberfläche

Beide Komponenten bieten Parameter zum Ändern ihres Erscheinungsbilds:

  • thickness: Mit diesem Parameter können Sie die Stärke 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 festgelegt:

@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

Bei dieser Implementierung wird eine dünne horizontale Linie zwischen zwei Textkomponenten gerendert:

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 zwischen zwei Textkomponenten.

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

Bei dieser Implementierung wird eine dünne vertikale Linie zwischen zwei Textkomponenten gerendert:

Auf einem Bildschirm einer Android-App werden zwei Textelemente angezeigt: „First item in row“ (Erstes Element in der Zeile) und „Second item in row“ (Zweites Element in der Zeile), getrennt durch eine dünne vertikale Linie.
Abbildung 2. Eine vertikale Trennlinie zwischen zwei Textkomponenten.

Zusätzliche Ressourcen