Разделитель

Разделители – это тонкие линии, которые разделяют элементы в списках или других контейнерах. Вы можете добавить разделители в приложение, используя композиции HorizontalDivider и VerticalDivider.

• HorizontalDivider – разделить элементы в столбце.
• VerticalDivider – разделяет элементы в строке.

Поверхность API

Оба компонента имеют параметры, позволяющие изменять их внешний вид:

• thickness – параметр, позволяющий задать толщину разделительной линии.
• color: используйте этот параметр, чтобы задать цвет разделительной линии.

Пример горизонтального разделителя

В примере ниже показана реализация компонента HorizontalDivider. Параметр 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

В результате между двумя текстовыми элементами появится тонкая горизонтальная линия:

Пример вертикального разделителя

В примере ниже показана реализация компонента VerticalDivider. В нем используется параметр color, чтобы задать специальный цвет линии:

@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

В результате между двумя текстовыми компонентами будет отображаться тонкая вертикальная линия:

Дополнительные ресурсы

• HorizontalDivider
• VerticalDivider
• Разделители в Material Design