Row v Jetpack Compose: co to je, vlastnosti composable a jak funguje

Co je Row v Jetpack Compose

Row — je composable funkce, která umísťuje podřízené prvky do horizontální sekvence. V hierarchii rozvržení Compose zaujímá Row místo základního kontejneru vedle Column a Box.

Row nevyžaduje zadání rozměrů — automaticky se přizpůsobuje obsahu. Šířka Row se rovná součtu šířek podřízených prvků včetně mezer, pokud není nastaven Modifier.fillMaxWidth nebo pevná velikost.

Podřízené prvky Row mohou mít vlastní modifikátory, které ovlivňují jejich pozici uvnitř kontejneru. Například Modifier.weight umožňuje prvkům zabírat poměrnou část dostupného prostoru.

Podle Android Developers Blog, 2024 zpracovává Row podřízené prvky sekvenčně, vypočítávaje jejich velikosti na základě pravidel měření Compose: nejprve se měří prvky bez weight, poté se zbývající prostor rozdělí mezi prvky s weight.

Syntaxe a základní signatura Row

Základní signatura Row zahrnuje parametr modifier, horizontalArrangement a verticalAlignment. Všechny podřízené prvky jsou předány v posledním lambda bloku content.

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "Jedna")
        Text(text = "Dva")
        Text(text = "Tři")
    }
}

Vlastnosti Row: horizontalArrangement a verticalAlignment

Parametr horizontalArrangement určuje, jak jsou podřízené prvky rozmístěny podél horizontální osy uvnitř Row. K dispozici jsou hodnoty Start, End, Center, SpaceBetween, SpaceAround a SpaceEvenly z třídy Arrangement.

Arrangement.Start umísťuje prvky na začátek kontejneru, Arrangement.End — na konec a Arrangement.Center — do středu. Tyto hodnoty fungují podobně jako vlastnost justify-content v CSS Flexbox.

Arrangement.SpaceBetween rozmísťuje prvky rovnoměrně, umísťuje první prvek na začátek, poslední na konec a ostatní se stejnými mezerami mezi nimi. Podle Material Design Guidelines, 2025 je SpaceBetween optimální pro panely nástrojů a navigační řady.

Parametr verticalAlignment zarovnává prvky vertikálně. K dispozici jsou Alignment.Top, Alignment.CenterVertically a Alignment.Bottom. Tato vlastnost je užitečná, když mají prvky Row různou výšku — například ikona vedle víceřádkového textu.

Tabulka hodnot Arrangement

Rozdělení prostoru pomocí Modifier.weight

Modifier.weight — je modifikátor dostupný pouze uvnitř Row a Column, který rozděluje dostupný prostor mezi podřízené prvky poměrně podle zadané hodnoty. Pokud má jeden prvek váhu 1.0f a druhý 2.0f, druhý prvek zabere dvakrát více místa.

Prvky bez weight zabírají tolik místa, kolik potřebují pro svůj obsah. Zbývající prostor je rozdělen mezi prvky s weight poměrně k jejich váze. Toto chování je analogické vlastnosti flex-grow v CSS Flexbox.

Podle Android Developer Documentation, 2025 funguje weight pouze uvnitř Row, Column a BoxWithConstraints. Při použití weight v Row jsou všechny podřízené prvky měřeny ve dvou průchodech: nejprve prvky bez weight, poté prvky s weight.

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

Příklady kódu s Row

První příklad ukazuje Row s ikonou a textem — typický scénář pro seznam kontaktů nebo nastavení. Icon a Text jsou zabaleny do Row s centrovacím 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 = "Přidat k oblíbeným")
    }
}

Druhý příklad ukazuje Row s tlačítky a rovnoměrným rozložením. SpaceEvenly zaručuje stejné mezery mezi všemi tlačítky a okraji kontejneru.

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("Zrušit") }
        Button(onClick = {}) { Text("Uložit") }
    }
}

Třetí příklad — Row uvnitř Card pro zobrazení hodnocení. Vnořený Row s Modifier.weight umožňuje hvězdě hodnocení a číselné hodnotě zabírat pevný prostor.

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

Vlastnosti Row v adaptivním rozvržení

Row vyžaduje kontrolu šířky v adaptivním rozvržení. Pokud obsah Row překročí dostupnou šířku obrazovky, prvky mohou vybočit z hranic kontejneru. K zabránění tomu použijte Modifier.horizontalScroll nebo přechod na Column.

Při kombinování Row s Modifier.weight je důležité nastavit fillMaxWidth pro rodičovský Row — jinak bude weight rozdělovat neexistující prostor. Podle Material Design Guidelines, 2025 je Row s weight bez fillMaxWidth považován za nesprávnou konfiguraci.

Pro adaptivní rozhraní se doporučuje kombinovat Row s Box nebo použít Arrangement.SpaceBetween pro automatické rozložení prvků na různých velikostech obrazovky. To poskytuje flexibilitu bez media queries.

• Modifier.horizontalScroll — přidává posouvání při přetečení Row
• Modifier.weight — rozděluje prostor poměrně
• Arrangement.SpaceBetween — adaptivní rozložení s fixací na okrajích