Flutter中Wrap组件实现子元素最小尺寸与多设备适配布局

问题分析 #

当前使用Wrap+ConstrainedBox的布局方式，因未结合屏幕宽度动态调整字段排列逻辑，无法实现小屏单行、中屏两字段同排+第三字段单行、大屏三字段同排的适配需求。此外flex_list包因TextField不支持computeDryLayout方法无法直接使用，需换更可靠的实现方式。

核心解决方案：基于LayoutBuilder的动态布局 #

通过LayoutBuilder获取父容器可用宽度，结合预设的字段最小宽度和间距阈值，动态切换布局结构，同时封装通用组件避免重复代码。

1. 封装通用响应式表单行组件 #

class ResponsiveFormRow extends StatelessWidget {
  final List<Widget> fields;
  final double minFieldWidth;
  final double spacing;

  const ResponsiveFormRow({
    super.key,
    required this.fields,
    this.minFieldWidth = 100,
    this.spacing = 4,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final int fieldCount = fields.length;
        if (fieldCount == 0) return const SizedBox();

        // 计算N个字段同排所需的最小总宽度（含间距）
        double calculateMinTotalWidth(int columnCount) {
          return columnCount * minFieldWidth + (columnCount - 1) * spacing;
        }

        // 从最多同排数量往下匹配，找到当前宽度支持的最大列数
        int targetColumns = 1;
        for (int i = fieldCount; i >= 1; i--) {
          if (constraints.maxWidth >= calculateMinTotalWidth(i)) {
            targetColumns = i;
            break;
          }
        }

        return _buildLayout(targetColumns);
      },
    );
  }

  // 根据目标列数构建布局
  Widget _buildLayout(int columns) {
    final List<Widget> layoutChildren = [];

    for (int i = 0; i < fields.length; i += columns) {
      // 截取当前行的字段
      final List<Widget> rowFields = fields.sublist(
        i,
        min(i + columns, fields.length),
      );

      // 构建当前行：字段均分宽度，添加间距
      layoutChildren.add(
        Row(
          children: rowFields.asMap().entries.map((entry) {
            final field = entry.value;
            final isLastInRow = entry.key == rowFields.length - 1;
            return Expanded(
              child: isLastInRow 
                  ? field 
                  : Padding(
                      padding: EdgeInsets.only(right: spacing),
                      child: field,
                    ),
            );
          }).toList(),
        ),
      );

      // 行之间添加垂直间距（最后一行不添加）
      if (i + columns < fields.length) {
        layoutChildren.add(SizedBox(height: spacing));
      }
    }

    return Column(children: layoutChildren);
  }
}

2. 使用通用组件重构表单布局 #

替换原来的Wrap结构，直接传入表单字段即可：

ResponsiveFormRow(
  minFieldWidth: 100,
  spacing: 4,
  fields: [
    createTextField(
      context,
      'Ref. Company (Insurer)',
      'reference_company',
      initialValue: widget.form.referenceCompany ?? '',
      onChange: (val) => widget.form.referenceCompany = val,
      enabled: bo.insurerInfo.insurer.isNullOrEmpty(),
    ),
    createTextField(
      context,
      'Community Id',
      'community_id',
      initialValue: widget.form.communityId ?? '',
      onChange: (val) => widget.form.communityId = val,
    ),
    createTextField(
      context,
      'Community Name',
      'community_name',
      initialValue: widget.form.communityName ?? '',
      onChange: (val) => widget.form.communityName = val,
    ),
  ],
)

适配逻辑说明 #

• 小屏设备：可用宽度不足两个字段最小宽度+间距，所有字段单独成行并铺满宽度
• 中等设备：可用宽度满足两个字段最小宽度+间距，但不足三个，前两个字段同排均分宽度，第三个单独成行
• 大屏设备：可用宽度满足三个字段最小宽度+间距，三个字段同排均分宽度

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