Column zaraďuje prvky pod seba (vertikálne). Je to najpoužívanejší layout v Compose:

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 ColumnExample() {
    MaterialTheme {
        Surface {
            Column(
                modifier = Modifier.padding(16.dp),
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                Text("Prvy text")
                Text("Druhy text")
                Text("Treti text")
                Button(onClick = {}) {
                    Text("Tlacidlo")
                }
            }
        }
    }
}

fun main() = application {
    Window(onCloseRequest = ::exitApplication, title = "Column") {
        ColumnExample()
    }
}

21.1.1 Arrangement (Rozloženie)

verticalArrangement určuje, ako sú prvky rozložené vertikálne:

Column(
    verticalArrangement = Arrangement.Top           // zhora (default)
    // verticalArrangement = Arrangement.Bottom      // zdola
    // verticalArrangement = Arrangement.Center      // centrované
    // verticalArrangement = Arrangement.SpaceBetween // rovnomerne medzi
    // verticalArrangement = Arrangement.SpaceEvenly // rovnomerne všetko
    // verticalArrangement = Arrangement.spacedBy(8.dp) // medzera 8dp
)

21.1.2 Alignment (Zarovnanie)

horizontalAlignment určuje, ako sú prvky zarovnané horizontálne:

Column(
    horizontalAlignment = Alignment.CenterHorizontally
    // Alignment.Start (default)
    // Alignment.End
)

Column je ekvivalent flex-direction: column v CSS.

Úlohy

Úloha 1

Vytvor formulár v Column s nadpisom, dvomi textami a tlačidlom pod sebou.

Úloha 2

Nastav medzi prvkami medzeru 12 dp pomocou Arrangement.spacedBy.

Úloha 3

Zarovnaj obsah Column horizontálne na stred.