Функция VerticalDivider

Функция VerticalDivider рисует тонкую вертикальную линию в стиле Material3. Её ставят между элементами в Row. Это аналог горизонтальной HorizontalDivider, не старый Divider из material. Толщину и цвет задают параметры thickness и color.

Синтаксис

VerticalDivider()

Параметры

Параметр	Описание
`thickness`	Толщина линии в dp.
`color`	Цвет линии. Принимает значение класса `Color`.

Пример

Давайте разделим два текста в ряду:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height
import androidx.compose.material3.Text
import androidx.compose.material3.VerticalDivider
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			Row {
				Text(text = "abcde")
				VerticalDivider(
					modifier = Modifier.height(24.dp),
				)
				Text(text = "12345")
			}
		}
	}
}

На экране между текстами появится вертикальная линия заданной высоты.

Пример

Давайте поставим две линии в один ряд:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height
import androidx.compose.material3.Text
import androidx.compose.material3.VerticalDivider
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			Row {
				Text(text = "abcde")
				VerticalDivider(
					modifier = Modifier.height(32.dp),
				)
				Text(text = "12345")
				VerticalDivider(
					modifier = Modifier.height(32.dp),
				)
				Text(text = "abcde")
			}
		}
	}
}

На экране три текста разделят две вертикальные линии.

Смотрите также

функция HorizontalDivider,
которая рисует горизонтальную линию
функция Row,
где ставят VerticalDivider между текстами
класс Color,
которым меняют цвет разделителя
функция Column,
рядом с которой используют HorizontalDivider