FR
RU
EN
ES
ZH
DE
PT
AR
HI
Pourquoi Column n'obéit-elle pas ? La malédiction du centrage dans Jetpack Compose
\nAvez-vous déjà passé une nuit avec une tasse de café, à écrire du code Kotlin pour Jetpack Compose, et soudain remarqué que votre Column refuse obstinément de centrer son contenu ? Vous ajoutez Modifier.align(Alignment.CenterHorizontally) — et le texte reste quand même collé au bord gauche. Ça vous dit quelque chose ?
Ce problème est un véritable succès sur Stack Overflow. Des milliers de développeurs (et moi-même) se sont cogné la tête contre l'écran en essayant de comprendre où était passé le "gravity center". Dans cet article, nous allons analyser les erreurs les plus fréquentes qui transforment votre Column en une liste incontrôlable, et apprendre à les éviter. Préparez-vous : il y aura beaucoup de code, des exemples concrets et rien de superflu.
\n\nErreur n°1 : Confusion entre Column et Row
\nLa première et la plus courante des embûches est le transfert des habitudes du XML Android classique. Là, LinearLayout avait un attribut gravity="center". Dans Compose, tout est différent.
Différence clé : Column dispose les éléments verticalement. Par conséquent, le "centrage horizontal" n'est pas une propriété de la Column elle-même, mais un comportement de ses éléments enfants. Si vous écrivez :
Column(\n modifier = Modifier.fillMaxSize(),\n horizontalAlignment = Alignment.CenterHorizontally\n) {\n Text("Bonjour le monde !")\n}Ici, horizontalAlignment fonctionne, mais seulement si le Text lui-même n'est pas limité en largeur. Et si vous avez Modifier.fillMaxWidth() sur l'élément enfant — le centrage se casse. Pourquoi ? Parce que l'élément s'étend sur toute la largeur, et il n'y a plus rien à centrer à l'intérieur.
Erreur n°2 : Modifier.align() au lieu de horizontalAlignment
\nVoici le code piège classique qui circule sur Stack Overflow :
\nColumn(\n modifier = Modifier.fillMaxSize()\n) {\n Text(\n text = "Je devrais être centré",\n modifier = Modifier.align(Alignment.CenterHorizontally)\n )\n}À première vue, c'est logique. Mais cela ne fonctionnera pas si la Column n'a pas de horizontalAlignment défini. En effet, Modifier.align() est un modificateur pour Box et ColumnScope. Il est disponible uniquement à l'intérieur de Column, mais fonctionne en tandem avec horizontalAlignment. Si ce dernier n'est pas spécifié, align est tout simplement ignoré.
Comment corriger :
\nColumn(\n modifier = Modifier.fillMaxSize(),\n horizontalAlignment = Alignment.CenterHorizontally // obligatoire !\n) {\n Text(\n text = "Maintenant je suis centré",\n modifier = Modifier.align(Alignment.CenterHorizontally) // optionnel\n )\n}Erreur n°3 : Oublier Arrangement pour la verticale
\nLes développeurs veulent souvent centrer le contenu de la Column verticalement (sur l'axe Y). C'est là qu'intervient verticalArrangement :
Column(\n modifier = Modifier.fillMaxSize(),\n verticalArrangement = Arrangement.Center,\n horizontalAlignment = Alignment.CenterHorizontally\n) {\n Text("Centre de l'univers")\n Button(onClick = { }) { Text("Bouton") }\n}Mais il y a un détail : Arrangement.Center fonctionnera uniquement si la Column occupe toute la hauteur de l'écran (Modifier.fillMaxSize() ou Modifier.height(IntrinsicSize.Min)). Si la hauteur de la Column est égale à la somme des hauteurs des éléments enfants — il n'y a rien à centrer.
Erreur n°4 : IntrinsicSize et comportement inattendu
\nParfois, vous ajoutez Modifier.height(IntrinsicSize.Min) pour que la Column se réduise à son contenu. Et là, le centrage vertical se casse :
Column(\n modifier = Modifier\n .fillMaxWidth()\n .height(IntrinsicSize.Min),\n verticalArrangement = Arrangement.Center\n) {\n Text("Texte 1")\n Text("Texte 2")\n}Problème :
Blogs
Book Recommendations
Lire aussi
