Flutter crossAxisAlignment 与 mainAxisAlignment

Question

我对 crossAxisAlignment 和 mainAxisAlignment 感到困惑。谁能用简单的话解释一下？

Answer 1

Row/Column 关联到一个轴：

水平 Row
垂直 Column

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

Answer 2

当您使用 Row 时，它的子元素会水平排列成一行。所以 Row 的主轴是水平的。在 Row 中使用 mainAxisAlignment 可让您水平对齐行的子项（例如左对齐、右对齐）。 Row 的主轴的交叉轴是垂直的。因此，在 Row 中使用 crossAxisAlignment 可以让您定义其子项如何垂直对齐。

在Column中，情况正好相反。列的子项从上到下垂直放置（默认情况下）。所以它的主轴是垂直的。这意味着，在 Column 中使用 mainAxisAlignment 会垂直对齐其子项（例如顶部、底部），而 crossAxisAlignment 定义子项在该列中的水平对齐方式。

Answer 3

对于行：

mainAxisAlignment = 水平轴
crossAxisAlignment = 垂直轴

对于列：

mainAxisAlignment = 垂直轴
crossAxisAlignment = 水平轴

Image source

Answer 4

这两张图很清楚MainAxisAlignment和CrossAxisAlignment的含义。

(Pictures are from Network)

Answer 5

在列中，

居中（或对齐）垂直，使用mainAxisAlignment。
居中（或对齐）水平，使用crossAxisAlignment。

在第行中，

居中（或对齐）水平，使用mainAxisAlignment。
居中（或对齐）垂直，使用crossAxisAlignment。

Answer 6

mainAxisAlignment 属性

当 mainAxisSize 设置为 MainAxisSize.max 时，Row 和 Column 可能会用额外的 space 布局他们的 children。 mainAxisAlignment 属性确定行和列如何将它们的 children 放置在额外的 space 中。 mainAxisAlignment 有六个可能的值：

示例：修改主轴对齐方式

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        BlueBox(),
        BlueBox(),
        BlueBox(),
      ],
    );
  }
}

class BlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}

crossAxisAlignment 属性

crossAxisAlignment 属性决定了 Row 和 Column 如何将它们的 children 定位在它们的交叉轴上。 Row 的横轴是垂直的，Column 的横轴是水平的。 crossAxisAlignment 属性有五个可能的值：

示例：修改横轴对齐方式

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        BlueBox(),
        BiggerBlueBox(),
        BlueBox(),
      ],
    );
  }
}

class BlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}

class BiggerBlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}

Answer 7

取决于您希望如何将内容显示在屏幕上。我们需要使用 main Axis 和 CrossAxisalignment 属性。

更多基本布局概念：https://flutter.dev/docs/codelabs/layout-basics

Flutter crossAxisAlignment 与 mainAxisAlignment

Flutter crossAxisAlignment vs mainAxisAlignment

flutter

flutter-layout