Row i Jetpack Compose: vad det är, composable-egenskaper och hur det fungerar

Vad är Row i Jetpack Compose

Row — är en composable-funktion som placerar underordnade element i en horisontell sekvens. I Compose-layouthierarkin intar Row positionen som grundläggande behållare tillsammans med Column och Box.

Row kräver inte specifikation av dimensioner — den anpassar sig automatiskt till innehållet. Bredden på Row är lika med summan av bredderna på de underordnade elementen med hänsyn till mellanrum, om inte Modifier.fillMaxWidth eller en fast storlek har angetts.

Underordnade element i Row kan ha egna modifierare som påverkar deras position i behållaren. Till exempel gör Modifier.weight det möjligt för element att ta upp en proportionell del av tillgängligt utrymme.

Enligt Android Developers Blog, 2024 bearbetar Row underordnade element sekventiellt och beräknar deras storlekar baserat på Compose mätregler: först mäts element utan weight, sedan fördelas det återstående utrymmet mellan element med weight.

Syntax och grundsignatur för Row

Grundsignaturen för Row inkluderar parametern modifier, horizontalArrangement och verticalAlignment. Alla underordnade element skickas i det sista lambda-blocket content.

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

Egenskaper för Row: horizontalArrangement och verticalAlignment

Parametern horizontalArrangement bestämmer hur underordnade element fördelas längs den horisontella axeln inuti Row. Värdena Start, End, Center, SpaceBetween, SpaceAround och SpaceEvenly från klassen Arrangement är tillgängliga.

Arrangement.Start placerar element i början av behållaren, Arrangement.End — i slutet och Arrangement.Center — i mitten. Dessa värden fungerar på samma sätt som egenskapen justify-content i CSS Flexbox.

Arrangement.SpaceBetween fördelar element jämnt, placerar det första i början, det sista i slutet och resten med lika mellanrum mellan dem. Enligt Material Design Guidelines, 2025 är SpaceBetween optimalt för verktygsfält och navigeringsrader.

Parametern verticalAlignment justerar element vertikalt. Alignment.Top, Alignment.CenterVertically och Alignment.Bottom är tillgängliga. Denna egenskap är användbar när Row-element har olika höjd — till exempel en ikon bredvid flerradig text.

Tabell över Arrangement-värden

Fördela utrymme med Modifier.weight

Modifier.weight — är en modifierare som endast är tillgänglig inuti Row och Column, som fördelar tillgängligt utrymme mellan underordnade element proportionellt mot det angivna värdet. Om ett element har vikten 1.0f och ett annat 2.0f kommer det andra elementet att ta upp dubbelt så mycket utrymme.

Element utan weight tar upp den plats som behövs för deras innehåll. Det återstående utrymmet fördelas mellan element med weight proportionellt mot deras vikt. Detta beteende är analogt med egenskapen flex-grow i CSS Flexbox.

Enligt Android Developer Documentation, 2025 fungerar weight endast inuti Row, Column och BoxWithConstraints. Vid användning av weight i Row mäts alla underordnade element i två omgångar: först element utan weight, sedan element med weight.

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "Vänster",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "Höger")
    }
}

Kodexempel med Row

Det första exemplet visar Row med en ikon och text — ett typiskt scenario för en kontaktlista eller inställningar. Icon och Text är inslagna i Row med centrerad 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 = "Lägg till i favoriter")
    }
}

Det andra exemplet visar Row med knappar och jämn fördelning. SpaceEvenly garanterar lika mellanrum mellan alla knappar och behållarens kanter.

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

Det tredje exemplet — Row inuti Card för att visa betyg. Den nästlade Row med Modifier.weight gör att betygsstjärnan och det numeriska värdet kan ta upp fast utrymme.

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

Funktioner för Row i adaptiv layout

Row kräver breddkontroll i adaptiv layout. Om innehållet i Row överskrider tillgänglig skärmbredd kan element hamna utanför behållarens gränser. För att förhindra detta, använd Modifier.horizontalScroll eller växla till Column.

Vid kombination av Row med Modifier.weight är det viktigt att ställa in fillMaxWidth för den överordnade Row — annars kommer weight att fördela utrymme som inte finns. Enligt Material Design Guidelines, 2025 betraktas Row med weight utan fillMaxWidth som en felaktig konfiguration.

För adaptiva gränssnitt rekommenderas att kombinera Row med Box eller använda Arrangement.SpaceBetween för automatisk fördelning av element på olika skärmstorlekar. Detta ger flexibilitet utan mediaförfrågningar.

• Modifier.horizontalScroll — lägger till rullning vid överflöd av Row
• Modifier.weight — fördelar utrymme proportionellt
• Arrangement.SpaceBetween — adaptiv fördelning med fixering vid kanter