Pourquoi Row n'est pas centré horizontalement à l'intérieur d'une colonne
Comme nous le savons par défaut, Column centre horizontalement ses enfants si elle a toute la largeur.Mais quand j'ai placé deux cartes et une ligne à l'intérieur d'une colonne, deux cartes sont placées horizontalement au centre par scintillement mais la ligne reste la même à sa position de départ? Pourquoi?
Je pense que la ligne devrait être centrée horizontalement car c'est un enfant de Column dans mon cas, mais ce n'est pas le cas.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter App'),
),
body: Container(
color: Colors.purple,
height: double.infinity,
child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Card(
child: Text(
'Chart',
style: TextStyle(fontSize: 20.0),
),
elevation: 5,
color: Colors.blue,
),
Card(
child: Text(
'list of tx',
style: TextStyle(
fontSize: 20.0,
),
),
color: Colors.purple,
),
Row(
children: [
Text('this is row'),
],
),
],
),
),
);
}
}
sortie de ce code
Réponses
Cela se produit car, par défaut, Row prendra tout l'espace horizontal. Vous pouvez le réparer en lui disant de prendre le moins de place possible:
Row(
mainAxisSize: MainAxisSize.min,
...
)
Le réglage de la mainAxisAlignment
ligne sur MainAxisAlignment.center
ne fonctionnera que s'il y a un widget à l'intérieur de la ligne. Il dit seulement à ses enfants d'aller au centre.
Par défaut, la mainAxisSize
propriété est MainAxisSize.max
dans le widget de ligne , ce que vous devez faire est simplement de le changer en MainAxisSize.min
, Pour affecter par le widget parent, qui dans cet exemple est la colonne
Row(
mainAxisSize: MainAxisSize.min,
...
)
Essayez de passer un mainAxisAlignment
argument à votre Row. Par exemple
Row(
mainAxisAlignment: MainAxisAlignment.center,
...
)
Cela fera des enfants de la rangée d'être centrés.