Diseños, modificadores y tematización
Cree pantallas compartidas adaptables con Material
Diseños, modificadores y tematización es una lección gratuita de Kotlin Multiplatform Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Kotlin Multiplatform Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Kotlin Multiplatform Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en 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. 🎨
Preguntas frecuentes
¿La lección «Diseños, modificadores y tematización» es gratis?
Sí — el texto completo de «Diseños, modificadores y tematización» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Kotlin Multiplatform Academy, actualiza a CoddyKit PRO. El curso de Kotlin Multiplatform Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Diseños, modificadores y tematización»?
Cree pantallas compartidas adaptables con Material Practicas Kotlin Multiplatform Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Kotlin Multiplatform Academy?
No se requiere experiencia previa. Kotlin Multiplatform Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Diseños, modificadores y tematización»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Kotlin Multiplatform Academy?
Sí. Cada lección de Kotlin Multiplatform Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Habilite Compose Multiplatform
- Diseños, modificadores y tematización
- Estado y recomposición en la interfaz compartida
- Aloje la interfaz compartida en iOS y Desktop