Row zaraďuje prvky vedľa seba (horizontálne):

import androidx.compose.desktop.ui.tooling.preview.Preview
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application

@Composable
fun RowExample() {
    MaterialTheme {
        Surface {
            Row(
                modifier = Modifier.padding(16.dp),
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                Button(onClick = {}) { Text("Lave") }
                Button(onClick = {}) { Text("Stred") }
                Button(onClick = {}) { Text("Prave") }
            }
        }
    }
}

fun main() = application {
    Window(onCloseRequest = ::exitApplication, title = "Row") {
        RowExample()
    }
}

21.2.1 Arrangement

Row(
    horizontalArrangement = Arrangement.Start          // zlava (default)
    // horizontalArrangement = Arrangement.End         // zprava
    // horizontalArrangement = Arrangement.Center       // centrované
    // horizontalArrangement = Arrangement.SpaceBetween // rovnomerne medzi
    // horizontalArrangement = Arrangement.spacedBy(8.dp)
)

21.2.2 Alignment

Row(
    verticalAlignment = Alignment.CenterVertically
    // Alignment.Top (default)
    // Alignment.Bottom
)

Row je ekvivalent flex-direction: row v CSS.

Úlohy

Úloha 1

Vytvor Row s tlačidlami Späť, Uložiť a Ďalej.

Úloha 2

Nastav medzi tlačidlami rovnomernú medzeru pomocou Arrangement.spacedBy.

Úloha 3

Zarovnaj prvky v Row vertikálne na stred.