Flutter crossAxisAlignment vs mainAxisAlignment
Je suis confus à propos de crossAxisAlignment et mainAxisAlignment. Quelqu'un peut-il l'expliquer en termes simples?
Pour la ligne:
mainAxisAlignment = Axe horizontalcrossAxisAlignment = Axe vertical
Pour la colonne:
mainAxisAlignment = Axe verticalcrossAxisAlignment = Axe horizontal
Row/Column sont associés à un axe:
- Horizontal pour
Row - Vertical pour
Column
mainAxisAlignment est la façon dont les éléments sont alignés sur cet axe. crossAxisAlignment est la façon dont les éléments sont alignés sur l'autre axe.
Lorsque vous utilisez un Row, ses enfants sont disposés sur une ligne horizontale. L'axe principal d'un Row est donc horizontal. L'utilisation de mainAxisAlignment dans un Row vous permet d'aligner les enfants de la ligne horizontalement (par exemple, gauche, droite). L'axe transversal à l'axe principal d'un Row est vertical. Ainsi, l'utilisation de crossAxisAlignment dans un Row vous permet de définir comment ses enfants sont alignés verticalement.
Dans un Column, c'est le contraire. Les enfants d'une colonne sont disposés verticalement, de haut en bas (par défaut). Son axe principal est donc vertical. Cela signifie que l'utilisation de mainAxisAlignment dans un Column aligne ses enfants verticalement (par exemple, haut, bas) et crossAxisAlignment définit comment les enfants sont alignés horizontalement dans cette colonne.
Ces deux images sont claires pour montrer la signification de MainAxisAlignment et CrossAxisAlignment.
(Les images proviennent du réseau)