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

Какво е Row в Jetpack Compose

Row — е composable функция, която поставя дъщерните елементи в хоризонтална последователност. В йерархията на layout-овете на 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 в адаптивния layout

Row изисква контрол на ширината в адаптивния layout. Ако съдържанието на 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 — адаптивно разпределение с фиксиране по ръбовете