Flutter无需GridView实现带间距多列跨列组件的方案求助

问题根源 #

你当前的实现问题在于：跨n列的组件预期宽度应为「n倍单列宽度 + (n-1)倍列间距」，但直接给Expanded设置flex: rowSpan仅分配到了n倍单列宽度的空间，缺少了(n-1)个间距的宽度份额，所以会出现跨列越多宽度差越大的问题。

最优实现方案 #

因为你需要支持动态高度，优先使用LayoutBuilder + Wrap组合实现，完全不需要依赖GridView的固定高度约束：

import 'package:flutter/material.dart';

class MultiSpanLayout extends StatelessWidget {
  // 总列数
  final int totalColumns;
  // 列间距
  final double gap;
  // 组件列表，每个元素包含跨列数和子组件
  final List<(int span, Widget child)> items;

  const MultiSpanLayout({
    super.key,
    required this.totalColumns,
    required this.gap,
    required this.items,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 计算单列宽度：总可用宽度减去所有列间距后除以总列数
        final singleColumnWidth = (constraints.maxWidth - (totalColumns - 1) * gap) / totalColumns;

        return Wrap(
          spacing: gap,
          runSpacing: gap,
          children: items.map((item) {
            final span = item.$1;
            // 计算跨列组件的实际宽度
            final width = span * singleColumnWidth + (span - 1) * gap;
            return SizedBox(
              width: width,
              child: item.$2,
            );
          }).toList(),
        );
      },
    );
  }
}

// 使用示例
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: MultiSpanLayout(
          totalColumns: 4,
          gap: 8.0,
          items: [
            (2, Container(color: Colors.red, height: 100, child: const Center(child: Text('跨2列')))),
            (1, Container(color: Colors.blue, height: 80, child: const Center(child: Text('跨1列')))),
            (1, Container(color: Colors.green, height: 90, child: const Center(child: Text('跨1列')))),
            (3, Container(color: Colors.yellow, height: 120, child: const Center(child: Text('跨3列')))),
            (1, Container(color: Colors.purple, height: 110, child: const Center(child: Text('跨1列')))),
          ],
        ),
      ),
    ),
  ));
}

方案说明 #

• 用LayoutBuilder拿到父容器的最大可用宽度，自动适配不同屏幕尺寸，不需要硬编码宽度
• 跨列宽度直接按公式计算，完全匹配预期效果，不会出现宽度缺失问题
• Wrap的spacing和runSpacing属性统一控制列间距和行间距，无需额外添加占位组件
• 所有子组件高度可自定义，Wrap会自动根据当前行最高的组件撑开行高，完美适配动态高度需求

兼容Row+Expanded方案 #

如果坚持使用原有Row + Expanded技术栈，可以按以下规则修正flex计算逻辑：

• 提前确定总列数totalColumns、固定列间距gap
• 计算单列基础宽度：singleColumnWidth = (父容器总宽度 - (totalColumns - 1) * gap) / totalColumns
• 跨k列的组件的flex值设置为：(k * singleColumnWidth + (k - 1) * gap) * 1000 ~/ 1（乘以1000放大数值避免小数精度误差）
• 每行组件之间手动添加SizedBox(width: gap)作为列间距

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