Функция FlowRow

Функция FlowRow раскладывает дочерние элементы слева направо и переносит лишние на новую строку. Дочерние элементы передаются в лямбду content. Вдоль строки работает horizontalArrangement, между строками - verticalArrangement, поперёк строки - itemVerticalAlignment. Параметры maxItemsInEachRow и maxLines ограничивают число элементов и строк.

Синтаксис

FlowRow {
	child1()
	child2()
}

Параметры

Параметр	Описание
`content`	Лямбда с дочерними элементами. Элементы идут по строкам в порядке записи.
`horizontalArrangement`	Распределение дочерних элементов вдоль строки. Принимает значение класса `Arrangement`.
`verticalArrangement`	Распределение строк друг относительно друга по вертикали. Принимает значение класса `Arrangement`.
`itemVerticalAlignment`	Выравнивание элементов поперёк строки. Принимает значение класса `Alignment`.
`maxItemsInEachRow`	Сколько элементов может стоять в одной строке. По умолчанию ограничения нет.
`maxLines`	Максимальное число строк. Лишние элементы обрабатывает параметр `overflow`.
`overflow`	Поведение, когда элементы не помещаются в заданные `maxLines` или ширину.

Пример

Давайте поставим несколько текстов в FlowRow:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			FlowRow(
				modifier = Modifier.fillMaxWidth(),
			) {
				Text(text = "abcde")
				Text(text = "12345")
				Text(text = "abcde")
				Text(text = "12345")
			}
		}
	}
}

На экране тексты выстроятся в ряд и перенесутся на следующую строку, когда ширина экрана не хватит.

Пример

Давайте ограничим число элементов в строке:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			FlowRow(
				modifier = Modifier.fillMaxWidth(),
				maxItemsInEachRow = 2,
			) {
				Text(text = "abcde")
				Text(text = "12345")
				Text(text = "abcde")
				Text(text = "12345")
			}
		}
	}
}

На экране в каждой строке окажется не больше двух текстов, остальные уйдут на следующую строку.

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

функция FlowColumn,
которая переносит элементы на следующий столбец
функция Row,
которая ставит все элементы в одну строку без переноса
класс Arrangement,
который задаёт зазоры между элементами и строками
класс Alignment,
который выравнивает элементы поперёк строки