Column, Row et Box
Organisez les composables dans des mises en page courantes.
Column, Row et Box est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 1 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 Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 4 leçons au total.
Organiser les composables
Pour placer des composables les uns par rapport aux autres, Compose fournit trois composables de mise en page essentiels : colonne, ligne et boîte.
Colonne : empilement vertical
Column empile ses enfants verticalement, de haut en bas.
Column {
Text("First")
Text("Second")
Text("Third")
}Ligne : empilement horizontal
Row place ses enfants côte à côte, de gauche à droite.
Row {
Text("Left")
Text("Middle")
Text("Right")
}Boîte : superposition
Box empile ses enfants les uns sur les autres, comme des calques. Les enfants ajoutés plus tard sont dessinés par-dessus les précédents. C’est idéal pour les badges, les superpositions et les arrière-plans.
Box {
Image(
painter = painterResource(R.drawable.photo),
contentDescription = null
)
Text("Caption")
}Les enfants sont des lambdas de contenu
Chaque mise en page reçoit une lambda de contenu finale. Tous les composables que vous appelez à l’intérieur deviennent ses enfants. Il n’y a pas de XML : les enfants sont simplement des appels de fonction.
Imbriquer les mises en page
Les mises en page s’imbriquent librement. Placez un Row dans un Column pour créer une structure semblable à une grille ou une liste de lignes.
Column {
Row {
Text("A")
Text("B")
}
Row {
Text("C")
Text("D")
}
}Column et LinearLayout
Si vous avez utilisé XML, Column ressemble à un LinearLayout vertical et Row à un LinearLayout horizontal. Box ressemble à un FrameLayout simple.
Dimensionnement par défaut
Par défaut, une mise en page est seulement aussi grande que ses enfants (ajustement au contenu). Vous pouvez lui faire occuper l’espace disponible avec des modificateurs comme Modifier.fillMaxSize(), que nous étudierons dans la prochaine leçon.
contentAlignment dans Box
Box peut aligner tous ses enfants avec contentAlignment. Vous pouvez par exemple tout centrer.
Box(contentAlignment = Alignment.Center) {
Text("Centered")
}Choisir la bonne option
Choisissez selon la direction : colonne pour la verticale, ligne pour l’horizontale, et boîte pour la superposition ou le centrage d’un enfant unique. La plupart des écrans combinent les trois.
Pour tout assembler
Une petite mise en page de profil utilisant les trois.
@Composable
fun Profile() {
Column {
Box(contentAlignment = Alignment.Center) {
Image(
painter = painterResource(R.drawable.avatar),
contentDescription = null
)
}
Row {
Text("Posts ")
Text("Followers")
}
}
}Vérification rapide
Quelle mise en page empile ses enfants les uns sur les autres (en les superposant) ?
Récapitulatif
Trois mises en page essentielles :
Column— empilement vertical.Row— empilement horizontal.Box— calques superposés ;contentAlignmentcentre le contenu.
Elles s’imbriquent librement pour construire n’importe quel écran.
Questions Fréquemment Posées
La leçon « Column, Row et Box » est-elle gratuite ?
Oui — le texte complet de « Column, Row et Box » 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 Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Column, Row et Box » ?
Organisez les composables dans des mises en page courantes. Tu pratiques Android 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 Android Academy ?
Aucune expérience préalable n'est requise. Android 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 1 sur 4.
Combien de temps prend la leçon « Column, Row et Box » ?
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 Android Academy ?
Oui. Chaque leçon Android 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.