Separator

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

Interfejs API

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

  • thickness: ten parametr służy do określania grubości linii rozdzielającej.
  • color: ten parametr służy do określania koloru linii rozdzielającej.

Przykład separatora poziomego

Poniższy przykład pokazuje implementację komponentu HorizontalDivider. Do sterowania wysokością linii służy parametr thickness:

@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. Pozioma linia rozdzielająca 2 komponenty tekstowe.

Przykład separatora pionowego

Poniższy przykład pokazuje implementację komponentu VerticalDivider. Używa on parametru color, aby nadać linii niestandardowy kolor:

@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

W ramach tej implementacji między 2 elementami tekstu renderowana jest cienka linia pionowa:

Ekran aplikacji na Androida z 2 elementami tekstowymi „First item in row” (Pierwszy element w wierszu) i „Second item in row” (Drugi element w wierszu) rozdzielonymi cienką pionową linią.
Rysunek 2. Pionowy separator oddzielający 2 składniki tekstu.

Dodatkowe materiały