Flutter主轴（Main Axis）和交叉轴（Cross Axis）的概念理解

在Flutter中，主轴（Main Axis）和交叉轴（Cross Axis）的概念是用来描述布局方向的。

举例

想象一下，有一排横向排列的书架，书架的排列方向就像是一条线，这条线就是主轴。在这个例子中，如果书架是水平排列的，那么主轴就是水平方向的。书架之间的间隔就是主轴间距。

交叉轴则垂直于主轴。在同样的书架例子中，如果您想把一些装饰品放在书架的顶部或者底部，那么这个垂直于书架排列方向的就是交叉轴。书架之间上下的间隔就是交叉轴间距。

在网格布局中，如果主轴是水平方向的，那么交叉轴就是垂直方向的；如果主轴是垂直方向的，那么交叉轴就是水平方向的。在您的代码中，GridView.builder默认的主轴方向是垂直的，也就是说，列表会从上到下排列，而每一行则是交叉轴方向，从左到右排列。

看到这里，你可能会懵逼。

心里想：也就是说主轴就是横，交叉轴就是列？

不完全是这样。主轴和交叉轴的方向取决于布局的排列方向，而不是固定的横或列。

在Flutter布局中：

• 如果布局是垂直排列的（例如，一个垂直的列表），那么主轴（Main Axis）是垂直方向的，交叉轴（Cross Axis）是水平方向的。
• 如果布局是水平排列的（例如，一个水平的列表），那么主轴（Main Axis）是水平方向的，交叉轴（Cross Axis）是垂直方向的。

所以，主轴和交叉轴的概念是相对的，取决于你的布局方向。在您的GridView.builder例子中，因为它默认是垂直排列的网格，所以主轴是垂直方向的（从上到下），交叉轴是水平方向的（从左到右）。

想象一下您在看一张纸：

• 当您将这张纸竖直拿着时，纸的长边是从上到下的，这就像是主轴（Main Axis）是垂直的情况。此时，纸的宽边，也就是从左到右的边，就是交叉轴（Cross Axis）。
• 当您将这张纸水平放在桌子上时，纸的长边是从左到右的，这就像是主轴（Main Axis）是水平的情况。此时，纸的宽边，也就是从上到下的边，就是交叉轴（Cross Axis）。

在Flutter的GridView中，如果我们把它想象成一系列的小方块（或者卡片）排列成的网格，那么：

• 主轴方向（Main Axis）决定了这些方块是如何在垂直方向（默认）或水平方向上排列的。
• 交叉轴方向（Cross Axis）则是垂直于主轴方向，决定了方块在另一个方向上是如何排列的。

下面来一段代码让你好好的理解一下

运行效果图：

 总体代码我就不贴了为了简洁，只要是GiridView.builder布局

代码 ：

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      itemCount: 4,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        // 设置网格视图的交叉轴数量为 4 列。
        crossAxisCount: crossAxisCount,
        mainAxisSpacing: defaultPadding,
        crossAxisSpacing: defaultPadding,
        childAspectRatio: childAspectRatio,
      ),
      itemBuilder: (context, index) => FileInfoCard(
        info: demoMyFiels[index],
      ),
    );
  }

 

在这段代码中，我们使用GridView.builder来创建一个网格视图。这个网格视图的布局和排列是基于主轴（Main Axis）和交叉轴（Cross Axis）的概念。让我们结合这段代码来解释：

• 主轴（Main Axis）：在这个GridView.builder的默认情况下，主轴是垂直方向的。这意味着网格的内容（在这个例子中是FileInfoCard）会沿着屏幕的上下方向排列。

• 交叉轴（Cross Axis）：与主轴垂直，这里是水平方向。crossAxisCount属性定义了交叉轴上有多少列。在这个例子中，crossAxisCount被设置为一个变量crossAxisCount，它应该是一个整数，表示网格视图中每行的列数。

• mainAxisSpacing和crossAxisSpacing分别控制主轴和交叉轴方向上项目之间的间距。在这个例子中，它们都被设置为defaultPadding，这意味着无论是垂直方向还是水平方向，项目之间的间距都是相同的。

• childAspectRatio用于控制每个网格项的大小比例。这个比例是网格项的宽度除以高度的值。

• itemBuilder函数用于构建每个网格项。在这个例子中，它返回了一个FileInfoCard组件，这个组件接收demoMyFiels[index]作为参数。demoMyFiels应该是一个包含文件信息的列表，index是当前网格项的索引。

在这段代码中，网格视图的排列和布局是这样的：网格沿着屏幕的垂直方向（主轴）展开，每行包含crossAxisCount指定数量的列（交叉轴方向），每个网格项（FileInfoCard）根据childAspectRatio的设置保持一定的宽高比。
 

知识点总结：

1. 主轴（Main Axis）：

   • 主轴是布局中的主要方向，可以是垂直或水平。
   • 在列布局（Column）中，主轴是垂直的。
   • 在行布局（Row）中，主轴是水平的。
   • 在网格布局（GridView）中，默认情况下主轴是垂直的，但也可以通过网格方向属性（如scrollDirection）进行调整。
   • 主轴控制着子元素在这个方向上的排列。

2. 交叉轴（Cross Axis）：

   • 交叉轴垂直于主轴。
   • 在列布局（Column）中，交叉轴是水平的。
   • 在行布局（Row）中，交叉轴是垂直的。
   • 在网格布局（GridView）中，交叉轴通常是水平的，但如果主轴方向改变，交叉轴也会相应地改变。
   • 交叉轴控制着子元素在垂直于主轴方向上的排列和对齐。

3. 主轴和交叉轴的属性：

   • mainAxisSize：在主轴方向上，可以控制布局占用的空间大小。
   • mainAxisAlignment：在主轴方向上，可以控制子元素的排列方式（如居中、两端对齐、等间距排列等）。
   • crossAxisAlignment：在交叉轴方向上，可以控制子元素的对齐方式（如居中、拉伸填满等）。
   • mainAxisSpacing和crossAxisSpacing：在网格布局中，分别控制主轴和交叉轴方向上子元素之间的间距。