Separatory to cienkie linie oddzielające elementy na listach lub w innych kontenerach. W aplikacji możesz stosować separatory za pomocą komponentów HorizontalDivider
i VerticalDivider
.
HorizontalDivider
: oddzielne elementy w kolumnie.VerticalDivider
: oddzielne elementy w wierszu.
Interfejs API
Oba komponenty udostępniają parametry umożliwiające modyfikowanie 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") } }
W tym przypadku między dwoma komponentami tekstowymi jest wyświetlana cienka pozioma linia:

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") } }
W ramach tej implementacji między 2 elementami tekstowymi jest renderowana cienka linia pionowa:
