Separator

Separatory to cienkie linie oddzielające elementy na listach lub w innych kontenerach. W aplikacji możesz wdrożyć separatory za pomocą funkcji kompozycyjnych HorizontalDivider i VerticalDivider.

Powierzchnia interfejsu API

Oba komponenty mają parametry, które umożliwiają modyfikowanie ich wyglądu:

  • thickness: ten parametr służy do określania grubości linii podziału.
  • color: użyj tego parametru, aby określić kolor linii podziału.

Przykład linii dzielenia ekranu w poziomie

Poniższy przykład pokazuje implementację komponentu HorizontalDivider. Używa parametru thickness do kontrolowania wysokości linii:

@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 renderuje cienką linię poziomą między 2 komponentami tekstowymi:

Ekran aplikacji na Androida z 2 elementami tekstowymi: „Pierwszy element na liście” i „Drugi element na liście”, oddzielonymi cienką linią poziomą.
Rysunek 1. Linia dzielenia w poziomie oddzielająca 2 komponenty tekstowe.

Przykład separatora pionowego

Poniższy przykład pokazuje implementację komponentu VerticalDivider. Używa parametru color, aby podać 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

W tym przypadku między 2 komponentami tekstowymi wyświetlana jest cienka linia pionowa:

Ekran aplikacji na Androida z 2 elementami tekstowymi: „Pierwszy element w wierszu” i „Drugi element w wierszu”, oddzielonymi cienką pionową linią.
Rysunek 2. Separator pionowy oddzielający 2 komponenty tekstowe.

Dodatkowe materiały