В Jetpack Compose появился FlexBox — единый layout вместо Row, Column, FlowRow и FlowColumn

В Compose Foundation добавлен новый компонент FlexBox — полноценная реализация CSS Flexible Box Layout. Теперь вместо выбора между четырьмя разными контейнерами можно использовать один универсальный.

Проблема

Сейчас для построения layouts в Compose приходится выбирать:

• Row — элементы в строку
• Column — элементы в столбец
• FlowRow — строка с переносом
• FlowColumn — столбец с переносом

При этом у каждого свои ограничения. Например, во FlowRow нет нормального выравнивания по baseline, а переключение между Row и FlowRow требует смены компонента.

Решение

FlexBox объединяет всё это в едином API:

FlexBox(
    config = FlexBoxConfig(
        direction = FlexDirection.Row,
        wrap = FlexWrap.Wrap,
        justifyContent = JustifyContent.SpaceBetween,
        alignItems = AlignItems.Center,
        gap = 8.dp
    )
) {
    items.forEach { item ->
        ItemCard(
            modifier = Modifier.flex(
                grow = 1f,
                shrink = 0f,
                basis = 120.dp
            )
        )
    }
}

Что можно настроить

На контейнере (FlexBoxConfig):

• direction — направление основной оси (Row, Column, RowReverse, ColumnReverse)
• wrap — перенос элементов (NoWrap, Wrap, WrapReverse)
• justifyContent — распределение по основной оси
• alignItems — выравнивание по поперечной оси
• alignContent — выравнивание строк при переносе
• gap — отступы между элементами

На дочерних элементах (Modifier.flex):

• grow — насколько элемент может растягиваться
• shrink — насколько элемент может сжиматься
• basis — базовый размер до распределения пространства
• order — порядок отображения (независимо от порядка в коде)
• alignSelf — переопределение выравнивания для конкретного элемента

Для кого это

Если вы работали с CSS Flexbox — всё будет знакомо. Это практически 1:1 перенос модели в Compose.

Для тех, кто раньше городил вложенные Row/Column с весами и spacer'ами — теперь есть инструмент, который делает это декларативно и предсказуемо.

Когда появится

Компонент уже в androidx-main. Ждём в ближайших alpha-версиях Compose Foundation.

---

Исходный код