column容器内子元素在垂直方向上的排列

### Column 容器中子元素的垂直排列 在 Flutter 的 `Column` 容器中，通过设置 `mainAxisAlignment` 属性可以控制子元素沿主轴（即垂直方向）的排列方式。默认情况下，`Column` 的主轴是垂直方向，因此这里的排列指的是上下方向的变化。 #### 使用 MainAxisAlignment 设置子元素间距 不同的 `MainAxisAlignment` 枚举值提供了多种排列选项： - **start**: 将所有子组件放置在容器顶部[^3]。 - **end**: 将所有子组件放置在容器底部[^3]。 - **center**: 让所有子组件居中显示于容器内[^5]。 - **spaceBetween**: 首个和最后一个子组件分别贴紧容器顶端和底端，其余子组件均匀分布其间。 - **spaceAround**: 每个子组件周围留有相等的空间，首尾两个子组件距离容器边缘的距离为其他相邻子组件之间距离的一半。 - **spaceEvenly**: 所有的子组件之间的间隔相同，并且这些间隔也等于第一个子组件到容器顶部以及最后一个子组件到底部的距离[^2]。 下面是一个简单的例子展示如何应用上述属性之一——`MainAxisAlignment.spaceEvenly`: ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Column Example')), body: Center( child: Container( height: 200, color: Colors.grey.shade300, padding: EdgeInsets.all(8), child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 子项平均分配整个可用空间 children: [ Icon(Icons.star, size: 50, color: Colors.redAccent), Icon(Icons.favorite, size: 50, color: Colors.purpleAccent), Icon(Icons.face, size: 50, color: Colors.blueAccent), ], ), ), ), ), ); } } ``` 此代码片段创建了一个高度固定的灰色背景区域，在其中定义了一个 `Column` 列表并设置了 `mainAxisAlignment: MainAxisAlignment.spaceEvenly` ，使得三个图标在其内部被均匀地隔开。