Trennlinie

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

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.

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:

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

Ein Android-App-Bildschirm mit zwei Textelementen, „Erstes Element in Zeile“ und „Zweites Element in Zeile“, die durch eine dünne vertikale Linie getrennt sind.
Abbildung 2: Eine vertikale Trennlinie zwischen zwei Textkomponenten.

Weitere Informationen