颤动crossAxisAlignment与mainAxisAlignment

问题描述 投票:1回答:4

我对crossAxisAlignmentmainAxisAlignment感到困惑。有人可以用简单的话来解释吗?

flutter flutter-layout
4个回答
7
投票

对于行:

mainAxisAlignment =水平轴 crossAxisAlignment =垂直轴

对于列:

mainAxisAlignment =垂直轴 crossAxisAlignment =水平轴


1
投票

Row / Column与轴相关联:

  • 水平为Row
  • 垂直为Column

mainAxisAlignment是项目在该轴上对齐的方式。 crossAxisAlignment是项目在另一个轴上对齐的方式。


0
投票

当你使用Row时,它的孩子们被排成一排,这是水平的。所以Row的主轴是水平的。在mainAxisAlignment中使用Row可让您水平对齐行的子项(例如,左,右)。 Row主轴的横轴是垂直的。因此,在crossAxisAlignment中使用Row可以定义其子项如何垂直对齐。

Column,情况正好相反。列的子项从上到下垂直布局(默认情况下)。所以它的主轴是垂直的。这意味着,在mainAxisAlignment中使用Column将其子项垂直对齐(例如,顶部,底部),crossAxisAlignment定义子项在该列中水平对齐的方式。


0
投票

这两张图片清晰显示MainAxisAlignment和CrossAxisAlignment的含义。

enter image description here

enter image description here

(图片来自网络)