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
.
HorizontalDivider
Rozdziel elementy w kolumnie.VerticalDivider
Oddzielanie elementów w wierszu.
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") } }
Ta implementacja renderuje cienką linię poziomą między 2 komponentami tekstowymi:

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") } }
W tym przypadku między 2 komponentami tekstowymi wyświetlana jest cienka linia pionowa:
