Row
Le widget Row
est utilisé pour aligner ses enfants de manière horizontale, les uns à côté des autres. Voici un exemple d'utilisation du widget Row
:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('Élément 1'),
Text('Élément 2'),
Text('Élément 3'),
],
)
Vous pouvez également personnaliser l'espacement entre les enfants en utilisant la propriété mainAxisAlignment
pour ajuster l'espacement horizontal et la propriété crossAxisAlignment
pour ajuster l'espacement vertical.

mainAxisAlignment : Cette propriété définit comment les enfants sont alignés horizontalement dans la ligne. Les valeurs possibles sont :
MainAxisAlignment.start
: Les enfants sont alignés à gauche de la ligne.MainAxisAlignment.end
: Les enfants sont alignés à droite de la ligne.MainAxisAlignment.center
: Les enfants sont centrés horizontalement dans la ligne.MainAxisAlignment.spaceBetween
: Les enfants sont répartis de manière égale dans la ligne, avec un espace égal entre chaque enfant mais pas avant le premier ou après le dernier enfant.MainAxisAlignment.spaceAround
: Les enfants sont répartis de manière égale dans la ligne, avec un espace égal autour de chaque enfant.MainAxisAlignment.spaceEvenly
: Les enfants sont répartis de manière égale dans la ligne, avec un espace égal entre chaque enfant, y compris avant le premier et après le dernier enfant.
crossAxisAlignment : Cette propriété définit comment les enfants sont alignés verticalement dans la ligne. Les valeurs possibles sont :
CrossAxisAlignment.start
: Les enfants sont alignés en haut de la ligne.CrossAxisAlignment.end
: Les enfants sont alignés en bas de la ligne.CrossAxisAlignment.center
: Les enfants sont centrés verticalement dans la ligne.CrossAxisAlignment.stretch
: Les enfants sont étirés pour remplir l'espace vertical disponible.CrossAxisAlignment.baseline
: Les enfants sont alignés en fonction de leur ligne de base commune. Cette option est utile lorsque vous avez des enfants avec du texte et que vous voulez les aligner par leur ligne de base.
mainAxisSize : Cette propriété définit la taille principale de la ligne en fonction de la taille de ses enfants ou de l'espace disponible. Les valeurs possibles sont
MainAxisSize.max
(la ligne occupe toute la largeur disponible) etMainAxisSize.min
(la ligne est aussi petite que possible pour contenir ses enfants).
Last updated