Dart/Flutter多Widget自适应换行求助：固定尺寸组件排版异常

要实现4个固定尺寸Widget按「4同行→2×2两行→单列4个」的逻辑自适应换行，核心是避免嵌套Wrap和Row时的约束冲突，同时精准控制不同宽度下的布局分组。以下是可行的实现方案：

核心思路 #

通过LayoutBuilder实时获取父容器的可用宽度，结合固定Widget的尺寸和间距，判断当前应该采用哪种布局模式：

1. 当宽度足够容纳4个Widget（含间距）时，用Wrap直接排列4个组件；
2. 当宽度只能容纳2个Widget时，将组件分成两组，每组用Row（设置mainAxisSize: MainAxisSize.min避免占满宽度）包裹，再放入Wrap中实现两行布局；
3. 当宽度连1个Widget都无法稳定容纳时，切换为Column单列布局。

代码实现 #

import 'package:flutter/material.dart';

class AdaptiveWidgetLayout extends StatelessWidget {
  // 定义固定尺寸和间距
  final double widgetSize = 100.0;
  final double spacing = 8.0;

  // 替换成你的自定义Widget
  Widget _buildItem(int index) {
    return Container(
      width: widgetSize,
      height: widgetSize,
      color: Colors.blue[100 * (index + 1)],
      alignment: Alignment.center,
      child: Text('Item $index'),
    );
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 计算单个组件+间距的总宽度
        final itemTotalWidth = widgetSize + spacing;
        // 计算一行最多能放几个组件（取整数）
        final maxPerRow = (constraints.maxWidth / itemTotalWidth).floor();

        if (maxPerRow >= 4) {
          // 模式1：4个组件同行
          return Wrap(
            spacing: spacing,
            runSpacing: spacing,
            alignment: WrapAlignment.center,
            children: List.generate(4, (index) => _buildItem(index)),
          );
        } else if (maxPerRow >= 2) {
          // 模式2：两行各2个组件
          return Wrap(
            spacing: spacing,
            runSpacing: spacing,
            alignment: WrapAlignment.center,
            children: [
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  _buildItem(0),
                  SizedBox(width: spacing),
                  _buildItem(1),
                ],
              ),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  _buildItem(2),
                  SizedBox(width: spacing),
                  _buildItem(3),
                ],
              ),
            ],
          );
        } else {
          // 模式3：单列4个组件
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: List.generate(4, (index) {
              return Padding(
                padding: EdgeInsets.only(bottom: spacing),
                child: _buildItem(index),
              );
            }),
          );
        }
      },
    );
  }
}

关键细节说明 #

• LayoutBuilder：直接获取父容器的约束，避免依赖MediaQuery可能带来的屏幕尺寸偏差；
• Row设置mainAxisSize: MainAxisSize.min：确保Row仅包裹内部两个Widget，不会强制占满父容器宽度，解决Wrap嵌套Row时的间距异常问题；
• 固定尺寸的Widget：全程通过Container/SizedBox锁定宽高，避免布局约束导致尺寸变形。

内容的提问来源于stack exchange，提问作者Евгений Осокин