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, mit denen ihr Erscheinungsbild geändert werden kann:

  • thickness: Verwenden Sie diesen Parameter, um die Stärke der Trennlinie anzugeben. Zeile.
  • color: Mit diesem Parameter wird die Farbe der Trennlinie angegeben.

Beispiel für horizontale Trennlinie

Das folgende Beispiel zeigt eine Implementierung des Komponente „HorizontalDivider“. Mit dem Parameter thickness wird der Zeilenhöhe:

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

<ph type="x-smartling-placeholder">
</ph> Bildschirm einer Android-App, auf dem zwei Textelemente angezeigt werden: „Erstes Element auf 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 des Komponente „VerticalDivider“. Dabei wird der Parameter color verwendet, um eine benutzerdefinierte Farbe für die Linie:

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

<ph type="x-smartling-placeholder">
</ph> 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, die zwei Textkomponenten voneinander trennt.

Weitere Informationen