Flutter动态网格布局实现求助：首图单列，超5张显示计数

需求说明：

• 首图单独占一列（垂直方向占2个单位高度）
• 后续图片在右侧区域每行显示2张
• 当图片总数超过5张时，在最后一个图片上叠加显示剩余图片的计数

布局参考图：

用户尝试的代码（存在布局异常问题）：

Expanded(
  child: GridView.builder(
    itemCount: imageUrls.length > 5 ? 6 : imageUrls.length,
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3, 
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      childAspectRatio: (index == 0) ? 3 : 1, // 此处错误：gridDelegate无法访问item的index
    ),
    itemBuilder: (context, index) {
      if (index == 0) {
        
        return GridTile(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(8),
            child: CachedNetworkImage(
              imageUrl: imageUrls[index],
              fit: BoxFit.cover,
              placeholder: (context, url) => CircularProgressIndicator(),
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
          ),
        );
      } else if (index == 5 && imageUrls.length > 6) {
        
        return Stack(
          children: [
            Container(
              decoration: BoxDecoration(
                color: Colors.grey[300],
                borderRadius: BorderRadius.circular(8),
              ),
              child: Center(
                child: Text(
                  "+${imageUrls.length - 6}",
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
            Positioned.fill(
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.black.withOpacity(0.5),
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
            ),
          ],
        );
      } else {
        
        return ClipRRect(
          borderRadius: BorderRadius.circular(8),
          child: CachedNetworkImage(
            imageUrl: imageUrls[index],
            fit: BoxFit.cover,
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => Icon(Icons.error),
          ),
        );
      }
    },
  ),
),

问题分析 #

原代码的核心错误在于SliverGridDelegateWithFixedCrossAxisCount的childAspectRatio参数无法访问item的index，会导致编译或布局异常；同时该组件无法实现不同item的跨行/跨列布局，无法满足首图占2行的需求。

解决方案 #

使用第三方包flutter_staggered_grid_view实现瀑布流布局，可轻松指定每个item的跨行列数，代码如下：

1. 添加依赖 #

在pubspec.yaml中添加：

dependencies:
  flutter_staggered_grid_view: ^0.7.0

2. 实现代码 #

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:cached_network_image/cached_network_image.dart';

class StaggeredImageGrid extends StatelessWidget {
  final List<String> imageUrls;

  const StaggeredImageGrid({super.key, required this.imageUrls});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: StaggeredGridView.countBuilder(
        crossAxisCount: 3,
        mainAxisSpacing: 4,
        crossAxisSpacing: 4,
        // 最多显示5个item：首图+4个小图，超过则显示计数
        itemCount: imageUrls.length > 5 ? 5 : imageUrls.length,
        itemBuilder: (context, index) {
          if (index == 0) {
            // 首图
            return ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: CachedNetworkImage(
                imageUrl: imageUrls[index],
                fit: BoxFit.cover,
                placeholder: (context, url) => const CircularProgressIndicator(),
                errorWidget: (context, url, error) => const Icon(Icons.error),
              ),
            );
          } else if (index == 4 && imageUrls.length > 5) {
            // 最后一个item，叠加显示剩余计数
            return Stack(
              fit: StackFit.expand,
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(8),
                  child: CachedNetworkImage(
                    imageUrl: imageUrls[index],
                    fit: BoxFit.cover,
                    placeholder: (context, url) => const CircularProgressIndicator(),
                    errorWidget: (context, url, error) => const Icon(Icons.error),
                  ),
                ),
                Container(
                  decoration: BoxDecoration(
                    color: Colors.black.withOpacity(0.5),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Center(
                    child: Text(
                      "+${imageUrls.length - 5}",
                      style: const TextStyle(
                        fontSize: 24,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
              ],
            );
          } else {
            // 普通小图
            return ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: CachedNetworkImage(
                imageUrl: imageUrls[index],
                fit: BoxFit.cover,
                placeholder: (context, url) => const CircularProgressIndicator(),
                errorWidget: (context, url, error) => const Icon(Icons.error),
              ),
            );
          }
        },
        // 指定每个item的跨行列数
        staggeredTileBuilder: (index) {
          return index == 0 
              ? const StaggeredTile.count(1, 2) // 首图占1列2行
              : const StaggeredTile.count(1, 1); // 其他item占1列1行
        },
      ),
    );
  }
}

代码说明 #

• 通过StaggeredTile.count为每个item设置跨列和跨行数，首图占1列2行，完美匹配需求布局。
• 修正计数逻辑：当图片总数超过5张时，在第5个item上叠加显示+剩余数量（剩余数量=总数量-5）。
• 保留了原有的网络图片加载、占位符和错误处理逻辑。

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