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 = "Один")
        Text(text = "Два")
        Text(text = "Три")
    }
}

Властивості 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 = "Ліворуч",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "Праворуч")
    }
}

Приклади коду з 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 = "Додати до обраного")
    }
}

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

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("Скасувати") }
        Button(onClick = {}) { Text("Зберегти") }
    }
}

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

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "Рейтинг:",
            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 — адаптивний розподіл з фіксацією по краях