Mises en page, modificateurs et thèmes
Créez des écrans partagés adaptatifs avec Material.
Mises en page, modificateurs et thèmes est une leçon Kotlin Multiplatform 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 Kotlin Multiplatform Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Kotlin Multiplatform Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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. 🎨
Questions Fréquemment Posées
La leçon « Mises en page, modificateurs et thèmes » est-elle gratuite ?
Oui — le texte complet de « Mises en page, modificateurs et thèmes » 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 Kotlin Multiplatform Academy, passe à CoddyKit PRO. Le cours Kotlin Multiplatform Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Mises en page, modificateurs et thèmes » ?
Créez des écrans partagés adaptatifs avec Material. Tu pratiques Kotlin Multiplatform 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 Kotlin Multiplatform Academy ?
Aucune expérience préalable n'est requise. Kotlin Multiplatform 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 « Mises en page, modificateurs et thèmes » ?
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 Kotlin Multiplatform Academy ?
Oui. Chaque leçon Kotlin Multiplatform 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
- Activer Compose Multiplatform
- Mises en page, modificateurs et thèmes
- État et recomposition dans l’interface partagée
- Héberger l’interface partagée sur iOS et ordinateur