如何在Flutter中实现示例图样式的自定义GridView布局

你当前使用GridView.builder配合SliverGridDelegateWithFixedCrossAxisCount无法达到预期效果的核心原因是：这个delegate会强制每个item的宽度为(屏幕宽度 - 内边距)/crossAxisCount，手动设置SizedBox.width不会生效。下面提供两种可行的实现思路：

方案一：使用第三方包 flutter_staggered_grid_view（推荐） #

这个包专门用于实现不规则网格布局，用法简单直接：

1. 先在pubspec.yaml中添加依赖：

dependencies:
  flutter_staggered_grid_view: ^0.7.0 # 可替换为最新版本

2. 实现布局代码：

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

// ...

StaggeredGridView.countBuilder(
  crossAxisCount: 3, // 总列数
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      color: Colors.grey[200],
      alignment: Alignment.center,
      child: Text(items[index].title),
    );
  },
  staggeredTileBuilder: (int index) {
    // 第5、10、15...个item（即(index+1)%5==0）占2列1行
    if ((index + 1) % 5 == 0) {
      return StaggeredTile.count(2, 1);
    }
    // 其余item占1列1行
    return StaggeredTile.count(1, 1);
  },
  mainAxisSpacing: 8, // 垂直间距
  crossAxisSpacing: 8, // 水平间距
)

方案二：原生Wrap组件实现 #

如果不想依赖第三方包，可使用Wrap组件手动控制每个item的宽度：

Padding(
  padding: const EdgeInsets.all(8.0), // 整体内边距
  child: Wrap(
    spacing: 8, // item之间的水平间距
    runSpacing: 8, // item之间的垂直间距
    children: List.generate(items.length, (index) {
      final isDoubleWidth = (index + 1) % 5 == 0;
      final screenWidth = MediaQuery.of(context).size.width;
      // 计算item宽度：总宽度减去内边距和间距后分配
      final totalAvailableWidth = screenWidth - 8 * 2; // 左右各8的padding
      final itemWidth = isDoubleWidth
          ? (totalAvailableWidth / 3) * 2 - 8 // 减8是因为和左边item的间距
          : totalAvailableWidth / 3;

      return SizedBox(
        width: itemWidth,
        height: itemWidth, // 保持正方形，可根据需求调整
        child: Container(
          color: Colors.grey[200],
          alignment: Alignment.center,
          child: Text(items[index].title),
        ),
      );
    }),
  ),
)

方案三：原生自定义SliverGridDelegate（进阶） #

如果需要用原生GridView实现，需自定义SliverGridDelegate来控制每个item的布局逻辑，但实现相对复杂，适合有自定义布局需求的场景。核心思路是重写getLayout方法，根据item的index计算其占用的行列数和位置。

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