Flutter 弹性布局核心：Flex 算法原理与 Flexible、Expanded 详解

Flex布局算法核心流程

Flex组件是Flutter弹性布局的基石。要准确控制子Widget的位置和大小，必须遵循以下六个步骤：

1. 处理固定子元素：先布局flex为0或null的child。在主轴上它们受到unbounded（无界）约束；若crossAxisAlignment为stretch，则在交叉轴受tight约束，否则为loose。
2. 申请弹性空间：为flex不为0的子元素申请空间，数值越大占比越多。
3. 分配弹性空间：根据申请的总空间和fit参数（FlexFit.tight或loose）确定每个子元素的最终主轴尺寸。
4. 确定交叉轴尺寸：高度需包裹所有child且不超过最大约束。
5. 确定主轴尺寸：取决于mainAxisSize（max取最大约束，min则包裹内容）。
6. 定位摆放：确认自身与子元素尺寸后，根据mainAxisAlignment和crossAxisAlignment进行排列。

非弹性组件的主轴约束示例

当Flex未指定主轴方向的最大约束时（默认情况下），主轴方向被视为unbounded。这意味着子元素可以无限扩展，甚至超出屏幕范围并触发警告。

Flex(
      direction: Axis.horizontal,
      children: [
        Container(
          width: 1000,
          height: 100,
          color: Colors.red[200],
        ),
      ],
    )

上述代码中，Container宽度设为1000。由于外层Flex在水平方向未限制最大宽度，该Container将渲染出1000像素宽，超出设备屏幕宽度。

Flexible组件：fit参数与空间竞争

Flexible允许子元素在主轴方向灵活调整大小。flex值决定“能分到多少”，而fit参数决定“能不能用完”。

实例分析：flex与fit的配合

Flex(
      direction: Axis.horizontal,
      children: [
        // flex=2, fit=loose (默认)
        Flexible(flex:2 ,child: Container(width: 50,height: 80,color: Colors.green,),),
        // flex=1, fit=loose (默认)
        Flexible(flex:1, child: Container(width: 100,height: 50,color: Colors.blue[300],),),
        // 固定宽度，不参与弹性分配
        Container(width: 50,height: 100,color: Colors.red[200]),
      ],
    )

假设可用总宽度为200像素，布局过程如下：

• 第一步：红色容器宽度固定为50，剩余空间 = 150。
• 第二步：绿色(flex:2)与蓝色(flex:1)瓜分这150。按权重比例，绿色应得100，蓝色应得50。
• 第三步 (关键差异)：
  • green 的 fit 默认为 FlexFit.loose。它不强制占满分配的100像素，而是保留其设定的width: 50。
  • blue 的 fit 默认为 FlexFit.loose，但因其设定的width(100)大于分配值(50)，Flex会强制将其裁剪为50。

若将绿色块的fit改为 FlexFit.tight，它将忽略自身的width设置，强行占满分配的100像素空间。

Flexible的作用

Flexible 本质上是为Child添加父数据（ParentData），记录flex和fit信息，指导Flex进行后续的尺寸计算。

Expanded 组件详解

Expanded 是 Flexible 的特例，它在构造时将 fit 参数硬编码为 FlexFit.tight。

class Expanded extends Flexible {
  const Expanded({
    super.key,
    super.flex,
    required super.child,
  }) : super(fit: FlexFit.tight);
}

虽然直接使用 Flexible(fit: FlexFit.tight) 效果相同，但 Expanded 提供了更好的语义可读性，明确表示该子元素应尽可能填满剩余空间。

Spacer 组件详解

Spacer 是用于快速插入空白区域的便捷组件，它是 Expanded 的包装器。

class Spacer extends StatelessWidget {
  const Spacer({super.key, this.flex = 1})
    : assert(flex != null),
      assert(flex > 0);
  final int flex;
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: flex,
      child: const SizedBox.shrink(),
    );
  }
}

其内部是一个空的 SizedBox.shrink()。通过指定 flex 参数，可以轻松实现多行布局中的等间距分布或特定比例的留白。

总结

掌握 Flex 的算法逻辑与 Flexible、Expanded 的行为差异，就掌握了 Flutter 中 Row 和 Column 的本质。Row 只是水平方向的 Flex，Column 则是垂直方向的 Flex。建议在实际开发中，优先使用 Semantic 更强的 Expanded 和 Spacer，并对复杂场景仔细审查 fit 参数的影响。

以上就是Flutter 弹性布局核心Flex算法原理与Flexible、Expanded详解的详细内容，更多关于Flutter弹性布局Row与Column技巧的资料请关注本站其它相关文章！