Делитель

Разделители — это тонкие линии, которые отделяют элементы в списках или других контейнерах. Вы можете реализовать разделители в своем приложении, используя составные объекты 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

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

Экран приложения для Android, отображающий два текстовых элемента: «Первый элемент в списке» и «Второй элемент в списке», разделенные тонкой горизонтальной линией.
Рисунок 1. Горизонтальная перегородка, разделяющая два текстовых компонента.

Пример вертикальной перегородки

В следующем примере демонстрируется реализация компонента 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

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

Экран приложения для Android, отображающий два текстовых элемента: «Первый элемент в ряду» и «Второй элемент в ряду», разделенных тонкой вертикальной линией.
Рисунок 2. Вертикальная перегородка, разделяющая два текстовых компонента.

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