В чем разница между Row, Column и Box?

Разница между Row, Column и Box в Jetpack Compose

Row, Column и Box являются базовыми, фундаментальными layout-композитами в Jetpack Compose. Они используются для организации позиционирования и размещения других composable-элементов на экране. Их основное отличие заключается в основной оси (main axis) и перекрестной оси (cross axis) размещения дочерних элементов.

Основные концепции и различия

• Основная ось (Main Axis): Это направление, по которому дочерние элементы располагаются последовательно.
• Перекрестная ось (Cross Axis): Это направление, перпендикулярное основной оси. По этой оси можно контролировать дополнительное размещение (например, вертикальное выравнивание в Row).

---

Row

Row размещает свои дочерние элементы горизонтально, последовательно друг за другом вдоль горизонтальной оси (основная ось).

@Composable
fun ExampleRow() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceEvenly, // Распределение по основной оси
        verticalAlignment = Alignment.CenterVertically   // Выравнивание по перекрестной оси
    ) {
        Text("Элемент 1")
        Text("Элемент 2")
        Text("Элемент 3")
    }
}

• Основная ось: горизонтальная (horizontalArrangement).
• Перекрестная ось: вертикальная (verticalAlignment).
• Typical Use Case: Горизонтальные списки, строки с кнопками и текстом, панели инструментов.

---

Column

Column размещает свои дочерние элементы вертикально, последовательно друг за другом вдоль вертикальной оси (основная ось).

@Composable
fun ExampleColumn() {
    Column(
        modifier = Modifier.fillMaxHeight(),
        verticalArrangement = Arrangement.SpaceBetween, // Распределение по основной оси
        horizontalAlignment = Alignment.CenterHorizontally // Выравнивание по перекрестной оси
    ) {
        Text("Элемент A")
        Text("Элемент B")
        Text("Элемент C")
    }
}

• Основная ось: вертикальная (verticalArrangement).
• Перекрестная ось: горизонтальная (horizontalAlignment).
• Typical Use Case: Вертикальные списки, формы с полями ввода, страницы настроек.

---

Box

Box является более универсальным и не имеет строго заданной основной оси. Он размещает дочерние элементы послойно (в виде стопки, z-index), позволяя им перекрывать друг друга. Это ключевой инструмент для совмещенного (overlay) размещения.

@Composable
fun ExampleBox() {
    Box(
        modifier = Modifier.size(200.dp),
        contentAlignment = Alignment.Center // Выравнивание всех детей внутри Box
    ) {
        // Этот элемент будет "фоном", он заполняет всю Box
        Box(modifier = Modifier.fillMaxSize().background(Color.LightGray))
        // Этот текст будет отцентрирован и расположен "над" предыдущим Box
        Text("Центрированный текст")
        // Эта кнопка будет позиционирована абсолютно в определенном месте Box
        Button(
            onClick = {},
            modifier = Modifier.align(Alignment.BottomEnd)
        ) {
            Text("Кнопка")
        }
    }
}

• Основная ось: отсутствует (элементы не располагаются линейно).
• Ключевые особенности: Послойное размещение, поддержка абсолютного позиционирования через Modifier.align() относительно границ Box.
• Typical Use Case: Элементы с фоном и оверлеем (например, карточки с текстом на изображении), Floating Action Button (FAB), кастомные прогресс-бары, где один элемент перекрывает другой.

Сравнительная таблица

Вывод

Выбор между Row, Column и Box зависит от логической структуры интерфейса, которую вы хотите создать. Для линейного горизонтального списка элементов используйте Row. Для вертикального списка — Column. Если вам необходимо совместить элементы (например, текст на изображении, кнопка в углу контейнера) или реализовать абсолютное позиционирование внутри заданной области — ваш выбор Box. Понимание этих трех базовых композитов критически важно для построения любой сложной UI-иерархии в Compose.