Column: Vertikale Anordnung und Container-Konfiguration in Compose

Was ist Column in Jetpack Compose

Column ist eine Composable-Funktion, die optionale Parameter akzeptiert: modifier, verticalArrangement, horizontalAlignment und content — ein Lambda mit ColumnScope. Innerhalb der Column werden die Kind-Composable-Funktionen in der Deklarationsreihenfolge von oben nach unten angeordnet. Die Höhe der Column entspricht der Summe der Kind-Höhen plus dem durch Arrangement angegebenen Raum. Die Breite entspricht der maximalen Kind-Breite unter Berücksichtigung von Alignment.

Column ist ein unsichtbarer Container: Standardmäßig hat er keinen Hintergrund oder Rahmen. Wenn Sie einen Hintergrund benötigen, fügen Sie Modifier.background() zur Column selbst hinzu. Im Gegensatz zu LazyColumn rendert Column alle Kind-Elemente gleichzeitig und unterstützt keine Virtualisierung. Das bedeutet, dass Column nur für kleine Datensätze geeignet ist — bis zu 10-15 Elemente. Für lange Listen verwenden Sie LazyColumn.

ColumnScope ist der Receiver für das content-Lambda der Column. Es bietet zusätzliche Modifier, die nur innerhalb der Column funktionieren: weight(), align(), alignByBaseline(). Diese Modifier haben außerhalb der Column keinen Sinn, da sie auf die Besonderheiten des vertikalen Layouts angewiesen sind. Beispielsweise richtet Modifier.align(Alignment.CenterHorizontally) ein Kind-Element horizontal in der Mitte der Column aus.

Column-Parameter: Arrangement, Alignment, Modifier

VerticalArrangement bestimmt, wie der vertikale Raum zwischen den Elementen verteilt wird. Verfügbare Werte: Arrangement.Top (Standard), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround. Wenn die Column-Höhe größer ist als die Summe der Elementhöhen, verteilt Arrangement den freien Raum. Wenn die Elemente die gesamte Höhe einnehmen, hat Arrangement keine Wirkung.

HorizontalAlignment legt die horizontale Ausrichtung jedes Kind-Elements fest. Alignment.Start (Standard für LTR), CenterHorizontally, End. Alignment wirkt unabhängig auf jedes Element: Wenn ein Element schmal und ein anderes breit ist, wird das erste ausgerichtet, das zweite kann die Column-Grenzen überschreiten. Alignment funktioniert nur, wenn die Column eine feste Breite oder fillMaxWidth hat.

Modifier für Column: Column akzeptiert einen Modifier, der auf den Container selbst angewendet wird. Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — alle Standard-Modifier funktionieren. Besonderer Hinweis: Modifier.height(IntrinsicSize.Min) zwingt die Column, die Mindesthöhe basierend auf den Kind-Elementen unter Verwendung der Intrinsic-Messung zu berechnen.

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Oben", modifier = Modifier.background(Color.Cyan))
        Text("Mitte", modifier = Modifier.background(Color.Magenta))
        Text("Unten", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize: Column passt Höhe an Inhalt an
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("Kurzer Text")
        Text("Ein sehr langer Text, der innerhalb der Spalte umbrochen wird")
    }
}

Column weight: Raumverteilung zwischen Elementen

Modifier.weight() ist ein ColumnScope-Modifier, der den freien vertikalen Raum zwischen den Column-Elementen proportional zu den angegebenen Gewichten verteilt. Wenn die Column 400dp Höhe einnimmt und die Kind-Elemente insgesamt 100dp betragen, werden die verbleibenden 300dp zwischen den Weight-Elementen aufgeteilt. Ein Element mit weight(2f) erhält doppelt so viel Raum wie ein Element mit weight(1f).

fill — der zweite Parameter von weight: weight(weight: Float, fill: Boolean = true). Wenn fill = true (Standard), wird das Element auf die gesamte verfügbare Höhe gestreckt. Wenn fill = false, nimmt das Element nur seine intrinsische Höhe ein und der verbleibende Raum bleibt leer. Dies ist nützlich, wenn ein Element an eine Seite gedrückt werden soll, weight aber nur das Verhältnis der Verteilung des leeren Raums definiert.

Weight-Einschränkungen: weight funktioniert nur in Column mit fester Höhe oder fillMaxHeight(). Wenn die Column-Höhe durch Kind-Elemente (wrap content) bestimmt wird, sind Gewichte sinnlos — es gibt keinen freien Raum zu verteilen. Außerdem kann weight nicht mit Modifier.height() auf demselben Element kombiniert werden — sie kollidieren und weight wird ignoriert.

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // Nimmt 1/6 der Höhe ein (weight 1 von Summe 1+2+3=6)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // Nimmt 2/6 der Höhe ein
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // Nimmt 3/6 der Höhe ein
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column vs LazyColumn: Wann was verwenden

Column rendert alle Kind-Elemente sofort. Bei mehr als 10-15 Elementen erzeugt Column eine erhebliche Belastung für Komposition und Messung. LazyColumn hingegen rendert nur sichtbare Elemente und verwendet unsichtbare wieder. Für lange Listen, Listen mit Tausenden von Elementen, Endloslisten oder Chats — LazyColumn ist Pflicht.

Wann Column besser ist: Formularbildschirme (3-10 Felder), Profilkarten, vertikale Spalten mit Symbolen, Menüs. Column unterstützt auch IntrinsicSize, was für adaptive Höhe nützlich ist. Außerdem ist Column einfacher zu debuggen — keine Virtualisierung, alle Elemente sind im Layout Inspector sichtbar. Für statische UI ist Column die richtige Wahl.

LazyColumn bietet: Element-Caching, schlüsselbasierte Identität, Animation zum Hinzufügen/Entfernen (animateItemPlacement), sticky Header. Wenn die Liste Elemente unterschiedlichen Typs enthält (unterschiedliche viewType), verwenden Sie LazyColumn mit sealed class in items. Column unterstützt keine sticky Header (sie müssen über eine scrollbare Column emuliert werden). Außerdem unterstützt LazyColumn LazyVerticalGrid bei Verwendung von GridCells.

Praktische Beispiele zur Verwendung von Column

Betrachten wir einen Benutzerprofil-Bildschirm, bei dem Column als Hauptcontainer für Avatar, Name, Bio und Aktionsschaltflächen verwendet wird. Hier passt sich Column mit IntrinsicSize.Min dem Inhalt an, und weight wird verwendet, um Raum zwischen den Abschnitten zu verteilen.

@Composable
fun UserProfileCard(name: String, bio: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            // Avatar
            Icon(
                imageVector = Icons.Default.AccountCircle,
                contentDescription = "Avatar",
                modifier = Modifier.size(64.dp)
            )
            // Name
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // Bio
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // Aktionsschaltflächen
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("Nachricht") }
                OutlinedButton(onClick = { }) { Text("Folgen") }
            }
        }
    }
}

Im Beispiel verwendet Column Arrangement.spacedBy(8.dp) für gleichmäßige Abstände zwischen den Elementen. horizontalAlignment = CenterHorizontally zentriert Avatar, Name und Bio. Das Row innerhalb der Column ist ein verschachtelter Container für Schaltflächen in einer Zeile. Diese Kombination aus Column (vertikale Anordnung) und Row (horizontale Anordnung) ist ein typisches UI-Muster in Compose.