Jetpack Compose Academy · Aula

Escrevendo uma Composable de Layout

Meça os elementos filhos e posicione-os manualmente.

Escrevendo uma Composable de Layout é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

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

Perguntas Frequentes

A aula “Escrevendo uma Composable de Layout” é grátis?

Sim — o texto completo de “Escrevendo uma Composable de Layout” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.

O que vou aprender em “Escrevendo uma Composable de Layout”?

Meça os elementos filhos e posicione-os manualmente. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Jetpack Compose Academy?

Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Escrevendo uma Composable de Layout”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Jetpack Compose Academy?

Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Jetpack Compose Academy