Separator

Sepety to cienkie linie, które rozdzielają elementy na listach lub w innych kontenerach. Separatory w aplikacji możesz wdrożyć za pomocą funkcji kompozycyjnych HorizontalDivider i VerticalDivider.

Interfejs API

Oba komponenty zawierają parametry umożliwiające zmianę ich wyglądu:

  • thickness: użyj tego parametru, aby określić grubość linii separatora.
  • color: użyj tego parametru, by określić kolor linii podziału.

Przykład separatora poziomego

Ten przykład przedstawia implementację komponentu HorizontalDivider. Parametr thickness kontroluje wysokość wiersza:

@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

Ta implementacja powoduje wyrenderowanie cienkiej poziomej linii między 2 komponentami tekstu:

Ekran aplikacji na Androida z 2 elementami tekstowymi: „Pierwszym elementem listy” i „Drugi element na liście” rozdzielonymi cienką poziomą linią.
Rysunek 1. Poziomy separator oddzielający dwa komponenty tekstu.

Przykład separatora pionowego

Ten przykład przedstawia implementację komponentu VerticalDivider. Wykorzystuje parametr color, aby określić niestandardowy kolor linii:

@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

Ta implementacja renderuje cienką pionową linię między 2 komponentami tekstu:

Ekran aplikacji na Androida z 2 elementami tekstowymi: „Pierwszy element w wierszu” i „Drugi element w rzędzie” rozdzielonymi cienką pionową linią.
Rysunek 2. Pionowy separator oddzielający dwa komponenty tekstu.

Dodatkowe materiały