Flutter最新版flutter_staggered_grid_view实现动态CrossAxisCount的GridView问题

直接上适配后的完整代码，结合FutureBuilder从API拉取数据，同时按你要求的条件控制每行显示1个或2个item：

FutureBuilder<List<YourItemModel>>(
  future: fetchItemsFromApi(), // 替换成你的API请求方法
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    }
    if (snapshot.hasError) {
      return Center(child: Text('加载失败: ${snapshot.error}'));
    }
    final items = snapshot.data ?? [];
    return StaggeredGridView.countBuilder(
      crossAxisCount: 2, // 基础跨轴数量设为2
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      padding: const EdgeInsets.all(8),
      itemCount: items.length,
      itemBuilder: (context, index) {
        return Container(
          width: 187,
          height: 210,
          color: Colors.red,
          child: Text(
            '$index - ${items[index].id} - ${items[index].idCategory}',
            style: const TextStyle(color: Colors.white, fontSize: 20),
          ),
        );
      },
      staggeredTileBuilder: (index) {
        // 处理你指定的条件：判断上一个item的分类是否不同，且当前item满足isOdd
        final previousItem = index > 0 ? items[index - 1] : null;
        if (previousItem != null && 
            items[index].idCategory != previousItem.idCategory && 
            items[index].isOdd) { // 若实际是判断索引奇偶，替换为`index.isOdd`即可
          return const StaggeredTile.count(2, 1); // 占满2列，整行显示1个item
        } else {
          return const StaggeredTile.count(1, 1); // 占1列，每行显示2个item
        }
      },
    );
  },
);

关键说明 #

1. 新版库适配：0.6.x版本的flutter_staggered_grid_view保留了StaggeredGridView.countBuilder和StaggeredTile.count方法，无需降级即可复用你的核心逻辑，通过staggeredTileBuilder控制每个item的跨轴占比。
2. 条件逻辑落地：严格按你给出的规则判断，获取上一个item后对比分类ID，结合指定的isOdd条件决定是否让当前item占满整行。
3. 数据状态处理：用FutureBuilder覆盖API请求的加载、错误、成功三种状态，确保数据就绪后再渲染网格。
4. 性能提示：700条数据量较大，若嵌套在滚动组件内可添加shrinkWrap: true，也可配合组件缓存机制避免卡顿。

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