Pourquoi Row n'est pas centré horizontalement à l'intérieur d'une colonne

Aug 17 2020

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

1 Uni Aug 17 2020 at 16:14

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 mainAxisAlignmentligne sur MainAxisAlignment.centerne fonctionnera que s'il y a un widget à l'intérieur de la ligne. Il dit seulement à ses enfants d'aller au centre.

2 faroukosama Aug 17 2020 at 16:17

Par défaut, la mainAxisSizepropriété est MainAxisSize.maxdans 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,
    ...
)
1 Yash Aug 17 2020 at 16:08

Essayez de passer un mainAxisAlignmentargument à votre Row. Par exemple

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    ...
)

Cela fera des enfants de la rangée d'être centrés.