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 — адаптивна расподела са фиксацијом на ивицама