Flutter基础（前端教程①⑦-Column竖直-Row水平-Warp包裹-Stack堆叠）

MainAxisAlignment 是一个枚举类，用于控制主轴（Main Axis） 方向上子组件的排列和对齐方式。

MainAxisAlignment 的常用取值及效果：

1. MainAxisAlignment.start
   子组件沿主轴的起点对齐（Row 左对齐，Column 顶部对齐）

2. MainAxisAlignment.end
   子组件沿主轴的终点对齐（Row 右对齐，Column 底部对齐）

3. MainAxisAlignment.center
   子组件在主轴方向上居中对齐

4. MainAxisAlignment.spaceBetween
   子组件之间均匀分配剩余空间，首尾组件贴近边缘（无额外间距）

5. MainAxisAlignment.spaceAround
   子组件两侧分配相等空间，首尾组件到边缘的距离是组件间距的一半

6. 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),
  ],
)

情况 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 中子组件超出界溢出的问题，是处理动态数量子组件布局的常用选择。

常用属性：

1. direction：指定主轴方向（默认水平）

   • Axis.horizontal：水平方向排列，空间不足时换行（默认）
   • Axis.vertical：垂直方向排列，空间不足时换列

2. spacing：主轴方向上子组件之间的间距

3. runSpacing：行与行（或列与列）之间的间距

4. alignment：主轴方向上的对齐方式（类似 mainAxisAlignment）

5. 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( // 快捷方式：让子组件填满整个 Stack
      child: 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),
    ),
  ],
)