Row a Jetpack Compose-ban: mi ez, a composable tulajdonságai és működése

Mi az a Row a Jetpack Compose-ban

Row — egy composable függvény, amely a gyermek elemeket vízszintes sorrendbe helyezi. A Compose elrendezések hierarchiájában a Row az alapkonténer szerepét tölti be a Column és a Box mellett.

A Row nem igényel méretek megadását — automatikusan alkalmazkodik a tartalomhoz. A Row szélessége egyenlő a gyermek elemek szélességének összegével a hézagokat figyelembe véve, kivéve ha Modifier.fillMaxWidth vagy rögzített méret van beállítva.

A Row gyermek elemei saját módosítókkal rendelkezhetnek, amelyek befolyásolják a pozíciójukat a konténeren belül. Például a Modifier.weight lehetővé teszi, hogy az elemek arányos részt foglaljanak el a rendelkezésre álló helyből.

A Android Developers Blog, 2024 szerint a Row szekvenciálisan dolgozza fel a gyermek elemeket, kiszámítva a méretüket a Compose mérési szabályai alapján: először a súly nélküli elemeket mérik, majd a fennmaradó helyet elosztják a súlyozott elemek között.

A Row szintaxisa és alap aláírása

A Row alap aláírása a modifier, horizontalArrangement és verticalAlignment paramétereket tartalmazza. Az összes gyermek elem az utolsó lambda content blokkban kerül átadásra.

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "Egy")
        Text(text = "Kettő")
        Text(text = "Három")
    }
}

A Row tulajdonságai: horizontalArrangement és verticalAlignment

A horizontalArrangement paraméter határozza meg, hogy a gyermek elemek hogyan oszlanak el a vízszintes tengely mentén a Row-n belül. Elérhető értékek: Start, End, Center, SpaceBetween, SpaceAround és SpaceEvenly az Arrangement osztályból.

Arrangement.Start a konténer elejére, Arrangement.End a végére, Arrangement.Center pedig a közepére helyezi az elemeket. Ezek az értékek hasonlóan működnek, mint a justify-content tulajdonság a CSS Flexbox-ban.

Arrangement.SpaceBetween egyenletesen osztja el az elemeket, az elsőt az elejére, az utolsót a végére helyezve, a többit pedig egyenlő hézagokkal közöttük. A Material Design Guidelines, 2025 szerint a SpaceBetween optimális eszköztárakhoz és navigációs sorokhoz.

A verticalAlignment paraméter függőlegesen igazítja az elemeket. Az Alignment.Top, Alignment.CenterVertically és Alignment.Bottom értékek érhetők el. Ez a tulajdonság akkor hasznos, ha a Row elemei különböző magasságúak — például egy ikon több soros szöveg mellett.

Az Arrangement értékek táblázata

Hely elosztása a Modifier.weight segítségével

Modifier.weight — egy módosító, amely csak Row és Column belsejében érhető el, és a rendelkezésre álló helyet osztja el a gyermek elemek között a megadott érték arányában. Ha egy elem súlya 1.0f, egy másiké pedig 2.0f, a második elem kétszer annyi helyet foglal el.

A súly nélküli elemek annyi helyet foglalnak el, amennyi a tartalmukhoz szükséges. A fennmaradó hely a súlyozott elemek között oszlik el a súlyuk arányában. Ez a viselkedés analóg a flex-grow tulajdonsággal a CSS Flexbox-ban.

A Android Developer Documentation, 2025 szerint a súly csak Row, Column és BoxWithConstraints belsejében működik. A súly Row-ban történő használatakor az összes gyermek elemet két lépésben mérik: először a súly nélküli elemeket, majd a súlyozott elemeket.

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

Kódpéldák a Row-val

Az első példa egy Row-t mutat be ikonnal és szöveggel — tipikus forgatókönyv névjegyzékhez vagy beállításokhoz. Az Icon és Text középre igazított verticalAlignment-el van Row-ba csomagolva.

@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 = "Hozzáadás a kedvencekhez")
    }
}

A második példa egy Row-t mutat be gombokkal és egyenletes elosztással. A SpaceEvenly egyenlő hézagokat garantál az összes gomb és a konténer szélei között.

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("Mégse") }
        Button(onClick = {}) { Text("Mentés") }
    }
}

A harmadik példa — Row egy Card-on belül az értékelés megjelenítéséhez. A beágyazott Row a Modifier.weight segítségével lehetővé teszi, hogy az értékelő csillag és a számérték rögzített helyet foglaljon el.

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

A Row jellemzői adaptív elrendezésben

Row szélesség-ellenőrzést igényel adaptív elrendezésben. Ha a Row tartalma meghaladja a rendelkezésre álló képernyőszélességet, az elemek kiléphetnek a konténer határain. Ennek megelőzésére használja a Modifier.horizontalScroll vagy váltson Column-ra.

A Row és Modifier.weight kombinálásakor fontos beállítani a fillMaxWidth-t a szülő Row-hoz — különben a súly nem létező helyet oszt el. A Material Design Guidelines, 2025 szerint a súlyozott Row fillMaxWidth nélkül helytelen konfigurációnak minősül.

Adaptív felületekhez ajánlott a Row és Box kombinálása vagy az Arrangement.SpaceBetween használata az elemek automatikus elosztásához különböző képernyőméreteken. Ez rugalmasságot biztosít médialekérdezések nélkül.

• Modifier.horizontalScroll — görgetést ad hozzá a Row túlcsordulásakor
• Modifier.weight — arányosan osztja el a helyet
• Arrangement.SpaceBetween — adaptív elosztás rögzítéssel a széleken