0Pricing
Jetpack Compose Academy · Leçon

Écrire un Composable de disposition

Mesurez les éléments enfants et positionnez-les manuellement.

Écrire un Composable de disposition est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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. ✅

Questions Fréquemment Posées

La leçon « Écrire un Composable de disposition » est-elle gratuite ?

Oui — le texte complet de « Écrire un Composable de disposition » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Écrire un Composable de disposition » ?

Mesurez les éléments enfants et positionnez-les manuellement. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?

Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Écrire un Composable de disposition » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?

Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Le modèle Mesurer et Placer
  2. Écrire un Composable de disposition
  3. Contraintes et mesures intrinsèques
  4. Un FlowRow qui renvoie les puces à la ligne
← Retour à Jetpack Compose Academy