Jetpack Compose Academy · Lektion

Column: Dinge vertikal stapeln

Ordnen Sie untergeordnete Elemente von oben nach unten an.

Column: Dinge vertikal stapeln ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Stacking Vertically

When you want children to sit top to bottom, you reach for Column. It is Compose's go-to layout for vertical stacks. 📚

Your First Column

A Column takes a trailing lambda. Every Composable you call inside it becomes a child, drawn in the order you write them.

Column {
    Text("First")
    Text("Second")
}

Order Is Top to Bottom

Children stack in source order. The first Composable sits at the top, the next below it, and so on down the screen.

Mixing Different Children

A Column can hold any Composables, not just Text. Buttons, Images, and even other Columns all stack happily inside it.

Column {
    Text("Title")
    Button(onClick = {}) { Text("Go") }
}

Default Sizing: Wrap Content

By default a Column is only as tall and wide as its children need. It shrinks to wrap its content unless you tell it otherwise.

Filling the Width

Add a Modifier to change size. fillMaxWidth makes the Column stretch across the whole screen horizontally.

Column(modifier = Modifier.fillMaxWidth()) {
    Text("Wide column")
}

Spacing Between Children

Use verticalArrangement with spacedBy to put even gaps between every child. No manual padding on each item needed.

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    Text("A")
    Text("B")
}

Aligning Children Sideways

Set horizontalAlignment to line children up. CenterHorizontally pulls them all to the middle of the Column's width.

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    Text("Centered")
}

Columns Don't Scroll Yet

A plain Column does not scroll. If children run past the screen they get clipped, so it suits short, fixed lists best.

Adding Scroll When Needed

For longer content, attach verticalScroll to the Column's modifier. Now the whole stack scrolls as one piece.

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    Text("Long content")
}

Nesting for Real Screens

Real screens nest Columns inside Columns. An outer Column holds sections, and each section is its own little Column of details.

Quick Check

Let's confirm how a Column arranges its children.

Recap: Column

You learned Column: it stacks children top to bottom in order, wraps content by default, and uses arrangement, alignment, and modifiers to size and space them.

Häufig gestellte Fragen

Ist die Lektion „Column: Dinge vertikal stapeln“ kostenlos?

Ja — der vollständige Text von „Column: Dinge vertikal stapeln“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Column: Dinge vertikal stapeln“?

Ordnen Sie untergeordnete Elemente von oben nach unten an. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?

Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Column: Dinge vertikal stapeln“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?

Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Jetpack Compose Academy