Row в Jetpack Compose: что это, свойства composable и как работает

Что такое Row в Jetpack Compose

Row — это composable-функция, которая располагает дочерние элементы в горизонтальной последовательности. В иерархии макетов Compose Row занимает место базового контейнера наряду с Column и Box.

Row не требует указания размеров — он автоматически подстраивается под содержимое. Ширина Row равна сумме ширин дочерних элементов с учётом отступов, если не задан Modifier.fillMaxWidth или фиксированный размер.

Дочерние элементы Row могут иметь собственные модификаторы, которые влияют на их положение внутри контейнера. Например, Modifier.weight позволяет элементам занимать пропорциональную часть доступного пространства.

По данным Android Developers Blog, 2024, Row обрабатывает дочерние элементы последовательно, вычисляя их размеры на основе правил измерения Compose: сначала измеряются элементы без weight, затем оставшееся пространство распределяется между элементами с weight.

Синтаксис и базовая сигнатура Row

Базовая сигнатура Row включает параметр modifier, horizontalArrangement и verticalAlignment. Все дочерние элементы передаются в последнем лямбда-блоке content.

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "One")
        Text(text = "Two")
        Text(text = "Three")
    }
}

Свойства Row: horizontalArrangement и verticalAlignment

Параметр horizontalArrangement определяет, как дочерние элементы распределяются по горизонтальной оси внутри Row. Доступны значения Start, End, Center, SpaceBetween, SpaceAround и SpaceEvenly из класса Arrangement.

Arrangement.Start размещает элементы в начале контейнера, Arrangement.End — в конце, а Arrangement.Center — по центру. Эти значения работают аналогично свойству justify-content в CSS Flexbox.

Arrangement.SpaceBetween распределяет элементы равномерно, располагая первый элемент в начале, последний в конце, а остальные с равными отступами между собой. По данным Material Design Guidelines, 2025, SpaceBetween оптимален для панелей инструментов и строк навигации.

Параметр verticalAlignment выравнивает элементы по вертикали. Доступны Alignment.Top, Alignment.CenterVertically и Alignment.Bottom. Это свойство полезно, когда элементы Row имеют разную высоту — например, иконка рядом с многострочным текстом.

Таблица значений Arrangement

Распределение пространства с Modifier.weight

Modifier.weight — это модификатор, доступный только внутри Row и Column, который распределяет доступное пространство между дочерними элементами пропорционально указанному значению. Если элементу задан вес 1.0f, а другому 2.0f, второй элемент займёт вдвое больше места.

Элементы без указания weight занимают место, необходимое для их содержимого. Оставшееся пространство распределяется между элементами с weight пропорционально их весу. Это поведение аналогично свойству flex-grow в CSS Flexbox.

По данным Android Developer Documentation, 2025, weight работает только внутри Row, Column и BoxWithConstraints. При использовании weight в Row все дочерние элементы измеряются в два прохода: сначала элементы без weight, затем элементы с weight.

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "Left",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "Right")
    }
}

Примеры кода с Row

Первый пример демонстрирует Row с иконкой и текстом — типичный сценарий для списка контактов или настроек. Icon и Text обёрнуты в Row с verticalAlignment по центру.

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "Add to favorites")
    }
}

Второй пример показывает Row с кнопками и равномерным распределением. SpaceEvenly гарантирует одинаковые отступы между всеми кнопками и краями контейнера.

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("Cancel") }
        Button(onClick = {}) { Text("Save") }
    }
}

Третий пример — Row внутри Card для отображения рейтинга. Вложенный Row с Modifier.weight позволяет звезде рейтинга и числовому значению занимать фиксированное пространство.

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "Rating:",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

Особенности Row при адаптивной вёрстке

Row требует контроля ширины при адаптивной вёрстке. Если содержимое Row превышает доступную ширину экрана, элементы могут выйти за границы контейнера. Для предотвращения этого используйте Modifier.horizontalScroll или перенос на Column.

При комбинировании Row с Modifier.weight важно задавать fillMaxWidth родительскому Row — иначе weight будет распределять несуществующее пространство. По данным Material Design Guidelines, 2025, Row с weight без fillMaxWidth считается некорректной конфигурацией.

Для адаптивных интерфейсов рекомендуется комбинировать Row с Box или использовать Arrangement.SpaceBetween для автоматического распределения элементов на разных размерах экрана. Это обеспечивает гибкость без медиазапросов.

• Modifier.horizontalScroll — добавляет прокрутку при переполнении Row
• Modifier.weight — распределяет пространство пропорционально
• Arrangement.SpaceBetween — адаптивное распределение с фиксацией по краям