Функция Box

Функция Box рисует дочерние элементы в одной области, накладывая их друг на друга. Дочерние элементы передаются в лямбду content. Общее выравнивание по умолчанию задаёт параметр contentAlignment. Параметр propagateMinConstraints решает, учитывать ли минимальные ограничения родителя при измерении дочерних элементов.

Синтаксис

Box {
	child1()
	child2()
}

Параметры

Параметр	Описание
`content`	Лямбда с дочерними элементами. Позже нарисованный элемент перекрывает более ранний. Приёмник лямбды - класс `BoxScope`.
`contentAlignment`	Выравнивание дочерних элементов внутри области, если для элемента не задано своё выравнивение. Принимает значение класса `Alignment`.
`propagateMinConstraints`	Если `true`, минимальные ограничения родителя передаются дочерним элементам при измерении. По умолчанию `false`.

Пример

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

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

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

На экране виден только второй текст, он перекрывает первый.

Пример

Давайте разведём тексты по углам области:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			Box(
				modifier = Modifier.fillMaxSize(),
			) {
				Text(
					text = "abcde",
					modifier = Modifier.align(Alignment.TopStart),
				)
				Text(
					text = "12345",
					modifier = Modifier.align(Alignment.BottomEnd),
				)
			}
		}
	}
}

На экране первый текст встанет в левый верхний угол, второй - в правый нижний.

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

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