web-dev-qa-db-fra.com

Espace entre les enfants de la colonne dans Flutter

J'ai un widget Column avec deux TextField enfants et je veux avoir de l'espace entre eux.

J'ai déjà essayé mainAxisAlignment: MainAxisAlignment.spaceAround, mais le résultat n'était pas ce que je voulais.

dartflutterflutter-layout
33
Sachin Soma

Vous pouvez utiliser le widget Padding entre ces deux widgets ou envelopper ces widgets avec le widget Padding.

18
Viren V Varasadiya

Vous pouvez mettre un SizedBox avec un height spécifique entre les widgets, comme ceci:

Column(
  children: <Widget>[
    FirstWidget(),
    SizedBox(height: 100),
    SecondWidget(),
  ]
)

Pourquoi préférer ceci plutôt que d'encapsuler les widgets dans Padding? Lisibilité! Il y a moins de passe-partout visuel, moins d'indentation et le code suit l'ordre de lecture typique.

70
Marcel

Utilisez simplement un rembourrage pour l’envelopper comme ceci:

Column(
  children: <Widget>[
  Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('Hello World!'),
  ),
  Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('Hello World2!'),
  )
]);

Vous pouvez également utiliser Container (padding ...) ou SizeBox (height: x.x). Le dernier est le plus courant, mais il dépend de la façon dont vous voulez gérer l’espace de vos widgets. J’aime utiliser le padding si l’espace fait vraiment partie du widget et utiliser sizebox pour les listes, par exemple.

18
dmarquina

vous pouvez utiliser Wrap() widget à la place de Column() pour ajouter un espace entre les widgets enfants. Et utiliser la propriété spacing pour donner un espacement égal entre les enfants.

Wrap(
  spacing: 20, // to apply margin horizontally
  runSpacing: 20, // to apply margin vertically
  children: <Widget>[
     Text('child 1'),
     Text('child 2')
  ]
)
9
Mahdi Tohidloo

De la même manière que SizedBox est utilisé ci-dessus Pour des raisons de lisibilité du code, vous pouvez utiliser le widget Padding de la même manière et ne pas avoir à en faire un widget parent pour les enfants de la colonne.

Column(
  children: <Widget>[
    FirstWidget(),
    Padding(padding: EdgeInsets.only(top: 40.0)),
    SecondWidget(),
  ]
)
2
Al-Ameen

Vous pouvez résoudre ce problème de manière différente.

Si vous utilisez Row/Column, vous devez alors utiliser mainAxisAlignment: MainAxisAlignment.spaceEvenly

Si vous utilisez Wrap Widget, vous devez utiliser runSpacing: 5, spacing: 10,

Dans n'importe où, vous pouvez utiliser SizeBox ()

0
Md.Tarikul Islam
Column(
  children: <Widget>[
    FirstWidget(),
    Spacer(),
    SecondWidget(),
  ]
)
0
user9139407