Row in Jetpack Compose: Was es ist, composable Eigenschaften und wie es funktioniert

Was ist Row in Jetpack Compose

Row ist eine composable-Funktion, die untergeordnete Elemente in einer horizontalen Sequenz anordnet. In der Compose-Layout-Hierarchie nimmt Row die Position eines grundlegenden Containers neben Column und Box ein.

Row erfordert keine Angabe von Abmessungen — es passt sich automatisch an seinen Inhalt an. Die Breite von Row entspricht der Summe der Breiten der untergeordneten Elemente einschließlich Auffüllung, sofern nicht Modifier.fillMaxWidth oder eine feste Größe angegeben wird.

Untergeordnete Elemente von Row können eigene Modifikatoren haben, die ihre Position innerhalb des Containers beeinflussen. Beispielsweise ermöglicht Modifier.weight Elementen, einen proportionalen Teil des verfügbaren Platzes zu belegen.

Laut Android Developers Blog, 2024 verarbeitet Row untergeordnete Elemente sequentiell und berechnet ihre Größen basierend auf Compose-Messregeln: zuerst werden Elemente ohne weight gemessen, dann wird der verbleibende Platz zwischen Elementen mit weight verteilt.

Row-Syntax und grundlegende Signatur

Die grundlegende Signatur von Row umfasst den Parameter modifier, horizontalArrangement und verticalAlignment. Alle untergeordneten Elemente werden im abschließenden content-Lambda-Block übergeben.

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

Row-Eigenschaften: horizontalArrangement und verticalAlignment

Der Parameter horizontalArrangement bestimmt, wie untergeordnete Elemente entlang der horizontalen Achse innerhalb von Row verteilt werden. Verfügbare Werte sind Start, End, Center, SpaceBetween, SpaceAround und SpaceEvenly aus der Klasse Arrangement.

Arrangement.Start platziert Elemente am Anfang des Containers, Arrangement.End — am Ende, und Arrangement.Center — in der Mitte. Diese Werte funktionieren ähnlich wie die justify-content-Eigenschaft in CSS Flexbox.

Arrangement.SpaceBetween verteilt Elemente gleichmäßig, wobei das erste Element am Anfang, das letzte am Ende und die restlichen mit gleichen Abständen dazwischen platziert werden. Laut Material Design Guidelines, 2025 ist SpaceBetween optimal für Symbolleisten und Navigationszeilen.

Der Parameter verticalAlignment richtet Elemente vertikal aus. Verfügbare Werte sind Alignment.Top, Alignment.CenterVertically und Alignment.Bottom. Diese Eigenschaft ist nützlich, wenn Row-Elemente unterschiedliche Höhen haben — beispielsweise ein Symbol neben mehrzeiligem Text.

Tabelle der Arrangement-Werte

Platzverteilung mit Modifier.weight

Modifier.weight ist ein Modifikator, der nur innerhalb von Row und Column verfügbar ist und den verfügbaren Platz zwischen untergeordneten Elementen proportional zum angegebenen Wert verteilt. Wenn ein Element ein Gewicht von 1.0f hat und ein anderes 2.0f, nimmt das zweite Element doppelt so viel Platz ein.

Elemente ohne weight belegen den für ihren Inhalt benötigten Platz. Der verbleibende Platz wird zwischen Elementen mit weight proportional zu ihrem Gewicht verteilt. Dieses Verhalten ähnelt der flex-grow-Eigenschaft in CSS Flexbox.

Laut Android Developer Documentation, 2025 funktioniert weight nur innerhalb von Row, Column und BoxWithConstraints. Bei Verwendung von weight in Row werden alle untergeordneten Elemente in zwei Durchgängen gemessen: zuerst Elemente ohne weight, dann Elemente mit weight.

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

Codebeispiele mit Row

Das erste Beispiel zeigt Row mit einem Symbol und Text — ein typisches Szenario für eine Kontaktliste oder Einstellungen. Icon und Text sind in Row mit verticalAlignment zentriert eingeschlossen.

@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 = "Zu Favoriten hinzufügen")
    }
}

Das zweite Beispiel zeigt Row mit Schaltflächen und gleichmäßiger Verteilung. SpaceEvenly garantiert gleiche Abstände zwischen allen Schaltflächen und den Rändern des Containers.

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

Das dritte Beispiel — Row innerhalb einer Card zur Anzeige einer Bewertung. Eine verschachtelte Row mit Modifier.weight ermöglicht es dem Bewertungsstern und dem numerischen Wert, festen Platz einzunehmen.

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

Row-Eigenschaften im adaptiven Layout

Row erfordert Breitenkontrolle im adaptiven Layout. Wenn der Inhalt von Row die verfügbare Bildschirmbreite überschreitet, können Elemente über die Containergrenzen hinausragen. Verwenden Sie Modifier.horizontalScroll oder wechseln Sie zu Column, um dies zu verhindern.

Bei der Kombination von Row mit Modifier.weight ist es wichtig, fillMaxWidth für die übergeordnete Row festzulegen — andernfalls verteilt weight nicht vorhandenen Platz. Laut Material Design Guidelines, 2025 gilt Row mit weight ohne fillMaxWidth als ungültige Konfiguration.

Für adaptive Oberflächen wird empfohlen, Row mit Box zu kombinieren oder Arrangement.SpaceBetween für die automatische Elementverteilung auf verschiedenen Bildschirmgrößen zu verwenden. Dies bietet Flexibilität ohne Medienabfragen.

• Modifier.horizontalScroll — fügt Bildlauf hinzu, wenn Row überläuft
• Modifier.weight — verteilt Platz proportional
• Arrangement.SpaceBetween — adaptive Verteilung mit Randfixierung