Row in Jetpack Compose: wat is het, composable-eigenschappen en hoe het werkt

Wat is Row in Jetpack Compose

Row — is een composable-functie die onderliggende elementen in een horizontale volgorde plaatst. In de hiërarchie van Compose-layouts neemt Row de plaats in van basiscontainer naast Column en Box.

Row vereist geen specificatie van afmetingen — het past zich automatisch aan de inhoud aan. De breedte van Row is gelijk aan de som van de breedtes van de onderliggende elementen inclusief tussenruimten, tenzij Modifier.fillMaxWidth of een vaste grootte is ingesteld.

Onderliggende elementen van Row kunnen eigen modifiers hebben die hun positie in de container beïnvloeden. Bijvoorbeeld, Modifier.weight stelt elementen in staat een proportioneel deel van de beschikbare ruimte in te nemen.

Volgens Android Developers Blog, 2024 verwerkt Row onderliggende elementen sequentieel, waarbij hun afmetingen worden berekend op basis van de meetregels van Compose: eerst worden elementen zonder weight gemeten, daarna wordt de resterende ruimte verdeeld over elementen met weight.

Syntax en basis-handtekening van Row

De basis-handtekening van Row bevat de parameter modifier, horizontalArrangement en verticalAlignment. Alle onderliggende elementen worden doorgegeven in het laatste lambda-blok content.

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

Eigenschappen van Row: horizontalArrangement en verticalAlignment

De parameter horizontalArrangement bepaalt hoe onderliggende elementen langs de horizontale as in Row worden verdeeld. De waarden Start, End, Center, SpaceBetween, SpaceAround en SpaceEvenly uit de klasse Arrangement zijn beschikbaar.

Arrangement.Start plaatst elementen aan het begin van de container, Arrangement.End — aan het einde, en Arrangement.Center — in het midden. Deze waarden werken vergelijkbaar met de eigenschap justify-content in CSS Flexbox.

Arrangement.SpaceBetween verdeelt elementen gelijkmatig, waarbij het eerste element aan het begin, het laatste aan het einde en de overige met gelijke tussenruimten worden geplaatst. Volgens Material Design Guidelines, 2025 is SpaceBetween optimaal voor werkbalken en navigatierijen.

De parameter verticalAlignment lijnt elementen verticaal uit. Alignment.Top, Alignment.CenterVertically en Alignment.Bottom zijn beschikbaar. Deze eigenschap is handig wanneer Row-elementen verschillende hoogtes hebben — bijvoorbeeld een pictogram naast meerregelige tekst.

Tabel met Arrangement-waarden

Ruimte verdelen met Modifier.weight

Modifier.weight — is een modifier die alleen beschikbaar is binnen Row en Column en die de beschikbare ruimte verdeelt over onderliggende elementen naar verhouding van de opgegeven waarde. Als een element gewicht 1.0f heeft en een ander 2.0f, zal het tweede element twee keer zoveel ruimte innemen.

Elementen zonder weight nemen de ruimte in die nodig is voor hun inhoud. De resterende ruimte wordt verdeeld over elementen met weight naar verhouding van hun gewicht. Dit gedrag is analoog aan de eigenschap flex-grow in CSS Flexbox.

Volgens Android Developer Documentation, 2025 werkt weight alleen binnen Row, Column en BoxWithConstraints. Bij gebruik van weight in Row worden alle onderliggende elementen in twee passes gemeten: eerst elementen zonder weight, daarna elementen met weight.

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

Codevoorbeelden met Row

Het eerste voorbeeld toont Row met een pictogram en tekst — een typisch scenario voor een contactenlijst of instellingen. Icon en Text zijn ingepakt in Row met gecentreerde 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 = "Toevoegen aan favorieten")
    }
}

Het tweede voorbeeld toont Row met knoppen en gelijkmatige verdeling. SpaceEvenly garandeert gelijke tussenruimten tussen alle knoppen en de randen van de container.

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

Het derde voorbeeld — Row in Card voor het weergeven van een beoordeling. Geneste Row met Modifier.weight stelt de beoordelingsster en numerieke waarde in staat vaste ruimte in te nemen.

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

Kenmerken van Row in adaptieve lay-out

Row vereist breedtecontrole in adaptieve lay-out. Als de inhoud van Row de beschikbare schermbreedte overschrijdt, kunnen elementen buiten de containergrenzen vallen. Gebruik Modifier.horizontalScroll of overschakeling naar Column om dit te voorkomen.

Bij het combineren van Row met Modifier.weight is het belangrijk fillMaxWidth in te stellen voor de bovenliggende Row — anders zal weight niet-bestaande ruimte verdelen. Volgens Material Design Guidelines, 2025 wordt Row met weight zonder fillMaxWidth beschouwd als een onjuiste configuratie.

Voor adaptieve interfaces wordt aanbevolen Row te combineren met Box of Arrangement.SpaceBetween te gebruiken voor automatische verdeling van elementen op verschillende schermformaten. Dit biedt flexibiliteit zonder media queries.

• Modifier.horizontalScroll — voegt scrollen toe bij overloop van Row
• Modifier.weight — verdeelt ruimte proportioneel
• Arrangement.SpaceBetween — adaptieve verdeling met fixatie aan randen