颤振 crossAxisAlignment 与 mainAxisAlignment答案

【问题标题】：Flutter crossAxisAlignment vs mainAxisAlignment颤振 crossAxisAlignment 与 mainAxisAlignment
【发布时间】：2019-05-19 21:09:28
【问题描述】：

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

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

Row/Column 与轴相关联：

水平为Row
Column 垂直

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

对于行：

mainAxisAlignment = 水平轴
crossAxisAlignment = 垂直轴

对于列：

mainAxisAlignment = 垂直轴
crossAxisAlignment = 水平轴

Image source

【讨论】：

【解决方案4】：

这两张图清楚地说明了MainAxisAlignment和CrossAxisAlignment的含义。

(Pictures are from Network)

【讨论】：

【解决方案5】：

在列中，

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

在一行，

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

【讨论】：

【解决方案6】：

mainAxisAlignment属性

当 mainAxisSize 设置为 MainAxisSize.max 时，Row 和 Column 可能会为他们的孩子布置额外的空间。 mainAxisAlignment 属性确定 Row 和 Column 如何将它们的子级定位在该额外空间中。 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 如何将其子级定位在其交叉轴上。 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(),
      ),
    );
  }
}

【讨论】：

【解决方案7】：

取决于您希望如何将内容显示在屏幕上。我们需要使用 mainAxis 和 CrossAxis 对齐属性。

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

【讨论】：