Функция Column

Функция Column ставит дочерние элементы в вертикальный столбец, сверху вниз. Дочерние элементы передаются в лямбду content. Вдоль столбца их распределяет параметр verticalArrangement, поперёк столбца - параметр horizontalAlignment. По умолчанию столбец занимает высоту своих дочерних элементов и прижимает их к началу столбца.

Синтаксис

Column {
	child1()
	child2()
}

Параметры

Параметр	Описание
`content`	Лямбда с дочерними элементами. В столбец они встают в том порядке, в каком записаны. Приёмник лямбды - класс `ColumnScope`.
`verticalArrangement`	Распределение дочерних элементов вдоль столбца. Принимает значение класса `Arrangement`.
`horizontalAlignment`	Выравнивание дочерних элементов поперёк столбца, то есть по горизонтали. Принимает значение класса `Alignment`.

Пример

Давайте поставим два текста в один столбец:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			Column {
				Text(text = "abcde")
				Text(text = "12345")
			}
		}
	}
}

На экране два текста встанут один под другим и прижмутся к началу столбца.

Пример

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

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			Column(
				verticalArrangement = Arrangement.SpaceBetween,
				modifier = Modifier.fillMaxHeight(),
			) {
				Text(text = "abcde")
				Text(text = "12345")
			}
		}
	}
}

На экране первый текст встанет у начала столбца, второй - у конца.

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

функция Row,
которая ставит дочерние элементы в горизонтальный ряд
функция Box,
которая кладёт дочерние элементы друг на друга
метод weight,
который отдаёт дочернему элементу свободное место в столбце
класс Arrangement,
который задаёт распределение вдоль столбца