Row în Jetpack Compose: ce este, proprietățile composable și cum funcționează

Ce este Row în Jetpack Compose

Row — este o funcție composable care plasează elementele copil într-o secvență orizontală. În ierarhia layout-urilor Compose, Row ocupă locul containerului de bază alături de Column și Box.

Row nu necesită specificarea dimensiunilor — se adaptează automat la conținut. Lățimea Row este egală cu suma lățimilor elementelor copil ținând cont de spațieri, dacă nu este setat Modifier.fillMaxWidth sau o dimensiune fixă.

Elementele copil Row pot avea proprii modificatori care influențează poziția lor în interiorul containerului. De exemplu, Modifier.weight permite elementelor să ocupe o parte proporțională din spațiul disponibil.

Conform Android Developers Blog, 2024, Row procesează elementele copil secvențial, calculând dimensiunile lor pe baza regulilor de măsurare Compose: mai întâi se măsoară elementele fără weight, apoi spațiul rămas se distribuie între elementele cu weight.

Sintaxa și semnătura de bază a Row

Semnătura de bază a Row include parametrul modifier, horizontalArrangement și verticalAlignment. Toate elementele copil sunt transmise în ultimul bloc lambda content.

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

Proprietățile Row: horizontalArrangement și verticalAlignment

Parametrul horizontalArrangement determină modul în care elementele copil sunt distribuite de-a lungul axei orizontale în interiorul Row. Sunt disponibile valorile Start, End, Center, SpaceBetween, SpaceAround și SpaceEvenly din clasa Arrangement.

Arrangement.Start plasează elementele la începutul containerului, Arrangement.End — la sfârșit, iar Arrangement.Center — în centru. Aceste valori funcționează similar proprietății justify-content din CSS Flexbox.

Arrangement.SpaceBetween distribuie elementele uniform, plasând primul element la început, ultimul la sfârșit, iar restul cu spațieri egale între ele. Conform Material Design Guidelines, 2025, SpaceBetween este optim pentru panourile de instrumente și rândurile de navigare.

Parametrul verticalAlignment aliniază elementele pe verticală. Sunt disponibile Alignment.Top, Alignment.CenterVertically și Alignment.Bottom. Această proprietate este utilă când elementele Row au înălțimi diferite — de exemplu, o icoană lângă un text pe mai multe rânduri.

Tabelul valorilor Arrangement

Distribuirea spațiului cu Modifier.weight

Modifier.weight — este un modificator disponibil doar în interiorul Row și Column, care distribuie spațiul disponibil între elementele copil proporțional cu valoarea specificată. Dacă un element are greutatea 1.0f, iar altul 2.0f, al doilea element va ocupa de două ori mai mult spațiu.

Elementele fără weight ocupă spațiul necesar conținutului lor. Spațiul rămas este distribuit între elementele cu weight proporțional cu greutatea lor. Acest comportament este analog proprietății flex-grow din CSS Flexbox.

Conform Android Developer Documentation, 2025, weight funcționează doar în interiorul Row, Column și BoxWithConstraints. La utilizarea weight în Row, toate elementele copil sunt măsurate în două treceri: mai întâi elementele fără weight, apoi elementele cu weight.

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

Exemple de cod cu Row

Primul exemplu demonstrează Row cu o icoană și text — un scenariu tipic pentru o listă de contacte sau setări. Icon și Text sunt înfășurate în Row cu verticalAlignment centrat.

@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 = "Adaugă la favorite")
    }
}

Al doilea exemplu arată Row cu butoane și distribuire uniformă. SpaceEvenly garantează spațieri egale între toate butoanele și marginile containerului.

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

Al treilea exemplu — Row în interiorul Card pentru afișarea ratingului. Row-ul imbricat cu Modifier.weight permite stelei de rating și valorii numerice să ocupe spațiu fix.

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

Particularitățile Row în layout-ul adaptiv

Row necesită controlul lățimii în layout-ul adaptiv. Dacă conținutul Row depășește lățimea disponibilă a ecranului, elementele pot ieși în afara granițelor containerului. Pentru a preveni acest lucru, utilizați Modifier.horizontalScroll sau trecerea la Column.

La combinarea Row cu Modifier.weight este important să setați fillMaxWidth pentru Row-ul părinte — altfel weight va distribui spațiu inexistent. Conform Material Design Guidelines, 2025, Row cu weight fără fillMaxWidth este considerat o configurație incorectă.

Pentru interfețe adaptive, se recomandă combinarea Row cu Box sau utilizarea Arrangement.SpaceBetween pentru distribuirea automată a elementelor pe diferite dimensiuni de ecran. Aceasta asigură flexibilitate fără media queries.

• Modifier.horizontalScroll — adaugă derulare la depășirea Row
• Modifier.weight — distribuie spațiul proporțional
• Arrangement.SpaceBetween — distribuire adaptivă cu fixare pe margini