Separator

Separatory to cienkie linie oddzielające elementy na listach lub w innych kontenerach. W swojej aplikacji możesz stosować separatory za pomocą komponentów 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: użyj tego parametru, by określić kolor linii podziału.

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

W ramach tego rozwiązania między dwoma komponentami tekstowymi wyświetlana jest cienka pozioma linia:

Ekran aplikacji na Androida z 2 elementami tekstowymi „Pierwsze na liście” i „Drugie na liście” rozdzielonymi cienką poziomą linią.
Rysunek 1. Poziomy separator oddzielający dwa komponenty tekstu.

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

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

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

Dodatkowe materiały