Flutter基础（前端教程①⑦-Column竖直-Row水平-Warp包裹-Stack堆叠）
MainAxisAlignment 是一个枚举类，用于控制主轴（Main Axis） 方向上子组件的排列和对齐方式。
MainAxisAlignment 的常用取值及效果：
MainAxisAlignment.start
子组件沿主轴的起点对齐（Row 左对齐，Column 顶部对齐）MainAxisAlignment.end
子组件沿主轴的终点对齐（Row 右对齐，Column 底部对齐）MainAxisAlignment.center
子组件在主轴方向上居中对齐MainAxisAlignment.spaceBetween
子组件之间均匀分配剩余空间，首尾组件贴近边缘（无额外间距）MainAxisAlignment.spaceAround
子组件两侧分配相等空间，首尾组件到边缘的距离是组件间距的一半MainAxisAlignment.spaceEvenly
子组件之间及与边缘的距离完全相等
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, // 水平方向均匀分布children: [Container(width: 50, height: 50, color: Colors.red),Container(width: 50, height: 50, color: Colors.green),Container(width: 50, height: 50, color: Colors.blue),],
)| 属性 | 功能描述 | 取值示例 |
|---|---|---|
mainAxisSize | 决定容器在主轴方向上的空间大小： - max：尽可能占满父容器的空间- min：仅包裹子组件，不额外占空间 | MainAxisSize.max（默认）、MainAxisSize.min |
mainAxisAlignment | 决定子组件在容器的主轴空间内如何排列（如对齐方式、间距分配） | start、center、spaceBetween 等 |
情况 1：mainAxisSize: max（容器占满空间）
Row(mainAxisSize: MainAxisSize.max, // 容器宽度=屏幕宽度mainAxisAlignment: MainAxisAlignment.spaceBetween, // 子组件分散在整个宽度上children: [Container(width: 50, height: 50, color: Colors.red),Container(width: 50, height: 50, color: Colors.green),],
)效果：两个色块分别靠向屏幕左右边缘，中间有大量空隙（利用了容器的全部宽度）。
情况 2：mainAxisSize: min（容器仅包裹子组件）
Row(mainAxisSize: MainAxisSize.min, // 容器宽度=两个色块宽度之和（100）mainAxisAlignment: MainAxisAlignment.spaceBetween, // 无效果（没有额外空间）children: [Container(width: 50, height: 50, color: Colors.red),Container(width: 50, height: 50, color: Colors.green),],
)效果：两个色块紧挨着（总宽度 100），spaceBetween 无法产生间距（因为容器没有多余空间）。
CrossAxisAlignment
Warp
在 Flutter 中，Wrap 是一个布局组件，用于在子组件超出父容器边界时自动换行（或换列），类似于文本换行的效果。它解决了 Row/Column 中子组件超出界溢出的问题，是处理动态数量子组件布局的常用选择。
常用属性：
direction：指定主轴方向（默认水平）Axis.horizontal：水平方向排列，空间不足时换行（默认）Axis.vertical：垂直方向排列，空间不足时换列
spacing：主轴方向上子组件之间的间距runSpacing：行与行（或列与列）之间的间距alignment：主轴方向上的对齐方式（类似mainAxisAlignment）crossAxisAlignment：交叉轴方向上的对齐方式（类似CrossAxisAlignment）
示例代码：
下面是一个水平方向的 Wrap 示例，包含多个按钮，当屏幕宽度不足时会自动换行：
Wrap(direction: Axis.horizontal, // 水平方向排列（默认）spacing: 8.0, // 按钮之间的水平间距runSpacing: 8.0, // 行之间的垂直间距alignment: WrapAlignment.start, // 每行左对齐children: [ElevatedButton(onPressed: () {}, child: Text("按钮1")),ElevatedButton(onPressed: () {}, child: Text("按钮2")),ElevatedButton(onPressed: () {}, child: Text("按钮3")),ElevatedButton(onPressed: () {}, child: Text("按钮4")),ElevatedButton(onPressed: () {}, child: Text("按钮5")),ElevatedButton(onPressed: () {}, child: Text("按钮6")),],
)1. Stack（堆叠容器）
Stack 是一个容器组件，用于将子组件按顺序堆叠在一起，后面的子组件会覆盖在前面的子组件之上（类似 CSS 中的 position: absolute 堆叠效果）。
核心特点：
- 子组件默认左上角对齐（可以通过
alignment属性修改默认对齐方式）。 - 本身不限制大小，默认会根据子组件中最大的尺寸来调整自身大小（也可通过
fit属性控制）。
2. Positioned（定位组件）
Positioned 只能作为 Stack 的直接子组件，用于精确控制子组件在 Stack 中的位置，通过设置与 Stack 边缘的距离来定位。
常用属性（用于定位）：
left：距离Stack左边缘的距离right：距离Stack右边缘的距离top：距离Stack上边缘的距离bottom：距离Stack下边缘的距离width/height：固定子组件的宽高（可选，不设置则由子组件自身大小决定）
示例：图片上叠加文字和图标
下面的代码实现了 “背景图 + 顶部标题 + 右下角图标” 的层叠效果：
Stack(// 未使用 Positioned 的子组件会默认左上角对齐（可通过 alignment 修改）alignment: Alignment.center, // 未定位子组件的默认对齐方式（这里无效，因为所有子组件都用了 Positioned）children: [// 底层：背景图片（占满 Stack）Positioned.fill( // 快捷方式：让子组件填满整个 Stackchild: Image.network('https://picsum.photos/400/300',fit: BoxFit.cover, // 图片铺满容器alt: "示例背景图",),),// 中层：顶部标题（距离顶部 16 像素，水平居中）Positioned(top: 16,left: 0,right: 0, // left 和 right 都设为 0 可让组件水平占满，配合 textAlign 居中child: Text("风景照片",style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),textAlign: TextAlign.center,),),// 上层：右下角图标（距离右和下各 16 像素）Positioned(right: 16,bottom: 16,child: Icon(Icons.favorite, color: Colors.red, size: 30),),],
)