Layouts, modificadores e tematização
Crie telas compartilhadas adaptáveis com Material
Layouts, modificadores e tematização é uma aula grátis de Kotlin Multiplatform 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 Kotlin Multiplatform Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Kotlin Multiplatform Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
Three Layout Building Blocks
Almost every screen is built from Column, Row and Box. Column stacks children vertically, Row places them side by side, Box layers them.
Column {
Text("Top")
Text("Bottom")
}Rows Place Items Side by Side
A Row arranges its children horizontally. Reach for it when you want a label and a value, or an icon next to text, on one line.
Row {
Text("Price:")
Text("$9")
}Box for Stacking
A Box overlaps its children on the same spot. It is perfect for a badge on top of an avatar or text centered over an image.
Box {
Image(painter, null)
Text("New")
}Modifiers Shape Everything
A Modifier adjusts size, spacing, background and more. You chain calls in order, and the order genuinely changes the result.
Text(
"Hi",
modifier = Modifier.padding(16.dp)
)Order Matters in Chains
Modifiers apply top to bottom. Padding before background insets the color, while background before padding fills behind the padding. Read them like steps.
Modifier
.background(Blue)
.padding(8.dp)Fill and Size the Space
Use fillMaxWidth, fillMaxSize or fixed size to control how much room a composable claims inside its parent layout.
Column(Modifier.fillMaxSize()) {
Text("Stretched")
}Arrangement and Alignment
Layout parameters like Arrangement and Alignment position children, for example centering a Row or spacing items evenly across it.
Row(
horizontalArrangement = Arrangement.SpaceBetween
) { }Theming with MaterialTheme
Wrap your app in MaterialTheme to supply a color scheme, typography and shapes. Every Material component reads from it automatically.
MaterialTheme(colorScheme = darkColorScheme()) {
App()
}Read Theme Values Anywhere
Inside the theme you access tokens through MaterialTheme.colorScheme and typography, so your styling stays consistent across every shared screen.
Text(
"Title",
color = MaterialTheme.colorScheme.primary
)Adapt to Each Platform
The same layout code runs everywhere, yet you can branch on size or platform to make screens adaptive for phones, tablets and desktops.
Consistent by Default
Because layouts, modifiers and theming are all shared, your Android and iOS screens look the same without anyone duplicating styling work.
Quick Check
What does a Modifier do?
Recap: Layout, Modify, Theme
You stacked UI with Column, Row and Box, shaped it with chained modifiers, and applied a shared MaterialTheme so every platform stays consistent. 🎨
Perguntas Frequentes
A aula “Layouts, modificadores e tematização” é grátis?
Sim — o texto completo de “Layouts, modificadores e tematização” é 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 Kotlin Multiplatform Academy, atualize para CoddyKit PRO. O curso de Kotlin Multiplatform Academy inclui 4 aulas no total.
O que vou aprender em “Layouts, modificadores e tematização”?
Crie telas compartilhadas adaptáveis com Material Você pratica Kotlin Multiplatform 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 Kotlin Multiplatform Academy?
Nenhuma experiência prévia é necessária. Kotlin Multiplatform 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 “Layouts, modificadores e tematização”?
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 Kotlin Multiplatform Academy?
Sim. Cada aula de Kotlin Multiplatform 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
- Ative o Compose Multiplatform
- Layouts, modificadores e tematização
- Estado e recomposição na interface compartilhada
- Hospede a interface compartilhada no iOS e no desktop