Row in Jetpack Compose: cos'è, proprietà composable e come funziona

Cos'è Row in Jetpack Compose

Row è una funzione composable che posiziona gli elementi figli in una sequenza orizzontale. Nella gerarchia dei layout di Compose, Row occupa la posizione di un contenitore di base insieme a Column e Box.

Row non richiede la specifica delle dimensioni — si adatta automaticamente al suo contenuto. La larghezza di Row è uguale alla somma delle larghezze degli elementi figli inclusa la spaziatura, a meno che non venga specificato Modifier.fillMaxWidth o una dimensione fissa.

Gli elementi figli di Row possono avere i propri modificatori che influenzano la loro posizione all'interno del contenitore. Ad esempio, Modifier.weight consente agli elementi di occupare una parte proporzionale dello spazio disponibile.

Secondo Android Developers Blog, 2024, Row elabora gli elementi figli in sequenza, calcolando le loro dimensioni in base alle regole di misurazione di Compose: prima vengono misurati gli elementi senza weight, poi lo spazio rimanente viene distribuito tra gli elementi con weight.

Sintassi e firma di base di Row

La firma di base di Row include il parametro modifier, horizontalArrangement e verticalAlignment. Tutti gli elementi figli vengono passati nel blocco lambda del contenuto finale.

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

Proprietà di Row: horizontalArrangement e verticalAlignment

Il parametro horizontalArrangement determina come gli elementi figli vengono distribuiti lungo l'asse orizzontale all'interno di Row. I valori disponibili includono Start, End, Center, SpaceBetween, SpaceAround e SpaceEvenly della classe Arrangement.

Arrangement.Start posiziona gli elementi all'inizio del contenitore, Arrangement.End — alla fine, e Arrangement.Center — al centro. Questi valori funzionano in modo simile alla proprietà justify-content in CSS Flexbox.

Arrangement.SpaceBetween distribuisce gli elementi uniformemente, posizionando il primo elemento all'inizio, l'ultimo alla fine e gli altri con spaziatura uguale tra loro. Secondo Material Design Guidelines, 2025, SpaceBetween è ottimale per barre degli strumenti e righe di navigazione.

Il parametro verticalAlignment allinea gli elementi verticalmente. I valori disponibili includono Alignment.Top, Alignment.CenterVertically e Alignment.Bottom. Questa proprietà è utile quando gli elementi di Row hanno altezze diverse — ad esempio, un'icona accanto a testo su più righe.

Tabella dei valori di Arrangement

Distribuzione dello spazio con Modifier.weight

Modifier.weight è un modificatore disponibile solo all'interno di Row e Column che distribuisce lo spazio disponibile tra gli elementi figli proporzionalmente al valore specificato. Se un elemento ha un peso di 1.0f e un altro di 2.0f, il secondo elemento occuperà il doppio dello spazio.

Gli elementi senza weight occupano lo spazio necessario per il loro contenuto. Lo spazio rimanente viene distribuito tra gli elementi con weight proporzionalmente al loro peso. Questo comportamento è simile alla proprietà flex-grow in CSS Flexbox.

Secondo Android Developer Documentation, 2025, weight funziona solo all'interno di Row, Column e BoxWithConstraints. Quando si utilizza weight in Row, tutti gli elementi figli vengono misurati in due passaggi: prima gli elementi senza weight, poi gli elementi con weight.

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

Esempi di codice con Row

Il primo esempio mostra Row con un'icona e testo — uno scenario tipico per un elenco di contatti o impostazioni. Icon e Text sono racchiusi in Row con verticalAlignment centrato.

@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 = "Aggiungi ai preferiti")
    }
}

Il secondo esempio mostra Row con pulsanti e distribuzione uniforme. SpaceEvenly garantisce una spaziatura uguale tra tutti i pulsanti e i bordi del contenitore.

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

Il terzo esempio — Row all'interno di una Card per visualizzare una valutazione. Una Row annidata con Modifier.weight consente alla stella di valutazione e al valore numerico di occupare spazio fisso.

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

Caratteristiche di Row nel layout adattivo

Row richiede il controllo della larghezza nel layout adattivo. Se il contenuto di Row supera la larghezza dello schermo disponibile, gli elementi potrebbero fuoriuscire dai limiti del contenitore. Per evitare ciò, utilizzare Modifier.horizontalScroll o passare a Column.

Quando si combina Row con Modifier.weight, è importante impostare fillMaxWidth sul Row padre — altrimenti weight distribuirà spazio inesistente. Secondo Material Design Guidelines, 2025, Row con weight senza fillMaxWidth è considerata una configurazione non valida.

Per interfacce adattive, si consiglia di combinare Row con Box o utilizzare Arrangement.SpaceBetween per la distribuzione automatica degli elementi su diverse dimensioni dello schermo. Ciò offre flessibilità senza query multimediali.

• Modifier.horizontalScroll — aggiunge scorrimento quando Row trabocca
• Modifier.weight — distribuisce lo spazio proporzionalmente
• Arrangement.SpaceBetween — distribuzione adattiva con fissaggio ai bordi