Row w Jetpack Compose: co to jest, właściwości composable i jak działa

Czym jest Row w Jetpack Compose

Row — to funkcja composable, która umieszcza elementy potomne w sekwencji poziomej. W hierarchii układów Compose Row zajmuje miejsce podstawowego kontenera obok Column i Box.

Row nie wymaga określania rozmiarów — automatycznie dostosowuje się do zawartości. Szerokość Row jest równa sumie szerokości elementów potomnych z uwzględnieniem odstępów, jeśli nie ustawiono Modifier.fillMaxWidth lub stałego rozmiaru.

Elementy potomne Row mogą mieć własne modyfikatory, które wpływają na ich położenie wewnątrz kontenera. Na przykład Modifier.weight pozwala elementom zajmować proporcjonalną część dostępnej przestrzeni.

Według Android Developers Blog, 2024, Row przetwarza elementy potomne sekwencyjnie, obliczając ich rozmiary na podstawie reguł pomiaru Compose: najpierw mierzone są elementy bez weight, następnie pozostała przestrzeń jest dzielona między elementy z weight.

Składnia i podstawowa sygnatura Row

Podstawowa sygnatura Row zawiera parametr modifier, horizontalArrangement i verticalAlignment. Wszystkie elementy potomne są przekazywane w ostatnim bloku lambda content.

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

Właściwości Row: horizontalArrangement i verticalAlignment

Parametr horizontalArrangement określa, jak elementy potomne są rozmieszczane wzdłuż osi poziomej wewnątrz Row. Dostępne są wartości Start, End, Center, SpaceBetween, SpaceAround i SpaceEvenly z klasy Arrangement.

Arrangement.Start umieszcza elementy na początku kontenera, Arrangement.End — na końcu, a Arrangement.Center — na środku. Te wartości działają podobnie do właściwości justify-content w CSS Flexbox.

Arrangement.SpaceBetween rozmieszcza elementy równomiernie, umieszczając pierwszy element na początku, ostatni na końcu, a pozostałe z równymi odstępami między sobą. Według Material Design Guidelines, 2025, SpaceBetween jest optymalny dla paneli narzędzi i wierszy nawigacyjnych.

Parametr verticalAlignment wyrównuje elementy w pionie. Dostępne są Alignment.Top, Alignment.CenterVertically i Alignment.Bottom. Ta właściwość jest przydatna, gdy elementy Row mają różną wysokość — na przykład ikona obok wielowierszowego tekstu.

Tabela wartości Arrangement

Rozdzielanie przestrzeni za pomocą Modifier.weight

Modifier.weight — to modyfikator dostępny tylko wewnątrz Row i Column, który rozdziela dostępną przestrzeń między elementami potomnymi proporcjonalnie do określonej wartości. Jeśli element ma wagę 1.0f, a inny 2.0f, drugi element zajmie dwa razy więcej miejsca.

Elementy bez określenia weight zajmują tyle miejsca, ile potrzebują na swoją zawartość. Pozostała przestrzeń jest dzielona między elementy z weight proporcjonalnie do ich wagi. To zachowanie jest analogiczne do właściwości flex-grow w CSS Flexbox.

Według Android Developer Documentation, 2025, weight działa tylko wewnątrz Row, Column i BoxWithConstraints. Przy użyciu weight w Row wszystkie elementy potomne są mierzone w dwóch przebiegach: najpierw elementy bez weight, następnie elementy z weight.

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

Przykłady kodu z Row

Pierwszy przykład pokazuje Row z ikoną i tekstem — typowy scenariusz dla listy kontaktów lub ustawień. Icon i Text są owinięte w Row z verticalAlignment wyśrodkowanym.

@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 = "Dodaj do ulubionych")
    }
}

Drugi przykład pokazuje Row z przyciskami i równomiernym rozmieszczeniem. SpaceEvenly gwarantuje równe odstępy między wszystkimi przyciskami i krawędziami kontenera.

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

Trzeci przykład — Row wewnątrz Card do wyświetlania oceny. Zagnieżdżony Row z Modifier.weight pozwala gwieździe oceny i wartości liczbowej zajmować stałą przestrzeń.

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

Cechy Row w układzie adaptacyjnym

Row wymaga kontroli szerokości w układzie adaptacyjnym. Jeśli zawartość Row przekracza dostępną szerokość ekranu, elementy mogą wychodzić poza granice kontenera. Aby temu zapobiec, używaj Modifier.horizontalScroll lub przejścia na Column.

Przy łączeniu Row z Modifier.weight ważne jest ustawienie fillMaxWidth dla nadrzędnego Row — w przeciwnym razie weight będzie rozdzielać nieistniejącą przestrzeń. Według Material Design Guidelines, 2025, Row z weight bez fillMaxWidth jest uważany za nieprawidłową konfigurację.

W interfejsach adaptacyjnych zaleca się łączenie Row z Box lub używanie Arrangement.SpaceBetween do automatycznego rozmieszczania elementów na różnych rozmiarach ekranu. Zapewnia to elastyczność bez zapytań medialnych.

• Modifier.horizontalScroll — dodaje przewijanie przy przepełnieniu Row
• Modifier.weight — rozdziela przestrzeń proporcjonalnie
• Arrangement.SpaceBetween — adaptacyjne rozmieszczenie z mocowaniem na krawędziach