Jetpack Compose Academy · Lektion

Eine Layout-Composable schreiben

Messen Sie untergeordnete Elemente und positionieren Sie sie manuell.

Eine Layout-Composable schreiben ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Meet the Layout Composable

To build your own arrangement, you reach for the Layout composable. It hands you the raw measure-and-place power directly. 🛠️

Layout Takes Content and a Lambda

Layout accepts your child content plus a measure lambda. The lambda receives the measurables and the constraints to work with.

Layout(content = content,
  modifier = modifier) { measurables, constraints ->
  // measure and place
}

Step One: Measure the Children

Inside the lambda, map over the measurables and measure each one. You get a list of placeables with known sizes back.

val placeables = measurables.map { it.measure(constraints) }

Step Two: Decide Your Own Size

Now compute how big your layout should be. For a vertical stack, the height is the sum of child heights and the width is the widest child.

val height = placeables.sumOf { it.height }
val width = placeables.maxOf { it.width }

Step Three: Report Size with layout()

Call layout(width, height) to declare your size. The trailing lambda is where you actually position every child.

layout(width, height) {
  // placement goes here
}

Step Four: Place Each Child

Track a running y offset and place each placeable beneath the last. Add its height to the offset after each placeRelative call.

var y = 0
placeables.forEach {
  it.placeRelative(0, y)
  y += it.height
}

You Just Rebuilt Column

Stacking children top to bottom is exactly what Column does. You have now written a layout from scratch that behaves just like it. 🎉

Wrap It in a Reusable Function

Put your Layout call inside a @Composable function so others can use it like any built-in. Expose a modifier and content slot.

@Composable
fun MyColumn(modifier: Modifier = Modifier,
  content: @Composable () -> Unit) { }

Pass the Modifier Through

Forward the incoming modifier to the Layout call. This lets callers add padding, size, and background just like with real layouts.

Default the Modifier Parameter

Give modifier a default of Modifier. Callers who do not need extra styling can skip it, keeping your API clean and friendly.

Now You Can Customize Anything

Change the placement math and you get diagonal stacks, centered rows, or grids. The Layout composable is your blank canvas for arrangement.

Quick Check

Which method actually positions a measured child on screen?

Recap: Writing a Layout Composable

Inside Layout you measure children to placeables, call layout() to set your size, then placeRelative each child. Wrap it in a function for reuse. ✅

Häufig gestellte Fragen

Ist die Lektion „Eine Layout-Composable schreiben“ kostenlos?

Ja — der vollständige Text von „Eine Layout-Composable schreiben“ 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 „Eine Layout-Composable schreiben“?

Messen Sie untergeordnete Elemente und positionieren Sie sie manuell. 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 2 von 4.

Wie lange dauert die Lektion „Eine Layout-Composable schreiben“?

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