Flutter：解决可灵活排列的列组成的Row组件溢出问题

核心思路 #

要保证组件始终为正方形且不溢出，需要同时考虑水平方向的Row可用宽度和垂直方向的Flexible分配高度，取两者的最小值作为正方形的边长，避免单一维度的约束导致溢出。

步骤1：修改MyWidget结构 #

移除内部的Expanded，改用LayoutBuilder获取父级约束，计算最大正方形边长：

Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      // 减去左右padding的总宽度（各8），避免内边距挤占空间导致溢出
      final maxSquareSide = min(constraints.maxWidth, constraints.maxHeight) - 16;
      return Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // 保留你的其他子组件...
          SizedBox(
            width: maxSquareSide,
            height: maxSquareSide,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                width: double.infinity,
                height: double.infinity,
                // 你的容器样式、子组件等
              ),
            ),
          ),
        ],
      );
    },
  );
}

步骤2：调整外层Row布局 #

将Row内的每个MyWidget用Flexible(flex:1)包裹，让它们平分Row的水平空间：

Column(
  children: [
    Flexible(
      flex: 3,
      fit: FlexFit.tight,
      child: Row(
        children: [
          Flexible(flex:1, child: MyWidget()),
          Flexible(flex:1, child: MyWidget()),
          // 根据数量添加更多组件
        ],
      ),
    ),
  ],
)

为什么原来的结构会溢出 #

你之前的MyWidget内部用了Expanded(flex:1)，在Row中会强制平分水平空间，但AspectRatio(1.0)会让容器高度等于宽度。当垂直方向由Flexible(flex:3)分配的高度小于水平分配的宽度时，容器高度会超出垂直约束，最终导致溢出。

通过LayoutBuilder获取父级的宽高约束，取最小值作为正方形边长，就能同时满足水平和垂直方向的空间限制，彻底避免溢出问题。

内容的提问来源于stack exchange，提问作者Sas Matras