Flutter横轴对准与主轴对准

7jmck4yq  于 2022-12-05  发布在  Flutter
关注(0)|答案(7)|浏览(123)

我对crossAxisAlignmentmainAxisAlignment感到困惑。有人能用简单的话解释一下吗?

knsnq2tg

knsnq2tg1#

对于行:

mainAxisAlignment =水平轴
crossAxisAlignment =垂直轴

对于列:

mainAxisAlignment =垂直轴
crossAxisAlignment =水平轴

图像来源

oiopk7p5

oiopk7p52#

这两张图清楚地显示了主轴对准和交叉轴对准的含义。

(图片均来自网络)

aiazj4mn

aiazj4mn3#

Row/Column与轴相关联:

  • Row水平
  • Column垂直

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

vjhs03f7

vjhs03f74#

当你使用Row时,它的子元素是水平排列在一行中的。所以Row的主轴是水平的。在Row中使用mainAxisAlignment可以水平对齐行的子元素Row的主轴的横轴是垂直的。所以在Row中使用crossAxisAlignment可以定义它的子级如何垂直对齐。
Column中,情况正好相反。列的子列是垂直排列的,从上到下(默认情况下)。因此它的主轴是垂直的。这意味着,在Column中使用mainAxisAlignment会垂直对齐它的子列(例如顶部、底部),而crossAxisAlignment定义了子列在该列中的水平对齐方式。

ejk8hzay

ejk8hzay5#

取决于您希望如何将内容放在屏幕上。我们需要使用mainAxis和CrossAxis对齐属性。
有关更基本的布局概念:https://flutter.dev/docs/codelabs/layout-basics

i86rm4rw

i86rm4rw6#

  • 垂直居中(或对齐),请使用mainAxisAlignment
  • 若要水平置中(或对齐),请使用crossAxisAlignment

中,

  • 要使水平居中(或对齐),请使用mainAxisAlignment
  • 垂直居中(或对齐),请使用crossAxisAlignment
xghobddn

xghobddn7#

中,主轴对齐水平运行,横轴对齐垂直运行。在中,主轴对齐垂直运行,横轴对齐水平运行。

相关问题