Trennlinie

Trennlinien sind dünne Linien, die Elemente in Listen oder anderen Container. Mithilfe von HorizontalDivider kannst du in deiner App Trennlinien implementieren. und VerticalDivider zusammensetzbare Funktionen.

API-Oberfläche

Beide Komponenten bieten Parameter zum Ändern ihres Aussehens:

  • thickness: Verwenden Sie diesen Parameter, um die Stärke der Trennlinie anzugeben. Zeile.
  • color: Mit diesem Parameter können Sie die Farbe der Trennlinie angeben.

Beispiel für horizontale Trennlinie

Das folgende Beispiel zeigt eine Implementierung des Komponente „HorizontalDivider“. 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:

Bildschirm einer Android-App, auf dem zwei Textelemente angezeigt werden: „Erstes Element in der Liste“ und „Zweites Element in der Liste“. durch eine dünne horizontale Linie getrennt.
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:

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

Weitere Informationen