Trennlinie

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

• HorizontalDivider: Trennt Elemente in einer Spalte.
• VerticalDivider: Elemente in einer Zeile trennen.

API-Oberfläche

Für beide Komponenten gibt es Parameter, mit denen sich ihr Erscheinungsbild ändern lässt:

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

Hinweis: Mit dem Parameter modifier können Sie den Abstand steuern.

Beispiel für eine horizontale Trennlinie

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

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

Abbildung 1 Eine horizontale Trennlinie, die zwei Textkomponenten voneinander trennt.

Beispiel für eine vertikale Trennlinie

Das folgende Beispiel zeigt eine Implementierung der VerticalDivider-Komponente. Dabei wird der Parameter color verwendet, um eine benutzerdefinierte Farbe für die Linie anzugeben:

@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 zwischen zwei Textkomponenten eine dünne vertikale Linie gerendert:

Abbildung 2. Eine vertikale Trennlinie, die zwei Textkomponenten voneinander trennt.

Zusätzliche Ressourcen

• HorizontalDivider
• VerticalDivider
• Material Design – Trennlinien