Flutter中GridView仅显示单张图片 无法遍历所有图片问题

• 传参错误：storePhotos()中每次遍历快照文档时，都只将当前单条文档的图片链接封装为长度为1的列表传给PhotoGrid，即images: [snapshot.data!.docs[index].data()["link"]]，GridView的itemCount始终为1，自然只能展示单张图片。
• 嵌套逻辑错误：原实现通过ListView.builder遍历每条数据，为每一张图单独创建一个高度1000的PhotoGrid组件，而PhotoGrid内部又嵌套了Scaffold、SingleChildScrollView、GridView多层可滚动组件，既会产生滚动冲突，也完全不符合网格组件一次性渲染所有列表项的使用逻辑。
• 附带逻辑bug：原PhotoGrid点击跳转时固定使用传入的单个imageLink和ownerName，即使渲染多图，点击任意项都会跳转到同一张图的详情。

第一步：调整storePhotos()方法 #

去掉多余的ListView嵌套，先将Firebase拉取到的全量图片数据整理完成后，一次性传入单个PhotoGrid组件：

storePhotos() {
  return StreamBuilder(
    stream: imagesSnapshots,
    builder: ((context, AsyncSnapshot snapshot) {
      // 无数据时返回空占位
      if (!snapshot.hasData) return const SizedBox.shrink();
      // 遍历所有快照，整理全量图片、所有者数据
      final List<Map<String, dynamic>> photoData = snapshot.data!.docs
          .map((doc) => {
                "link": doc.data()["link"] as String,
                "owner": doc.data()["owner"] as String,
              })
          .toList();
      final List<String> allImageLinks =
          photoData.map((item) => item["link"] as String).toList();
      // 仅初始化一个PhotoGrid，传入全量数据
      return PhotoGrid(
        photoList: photoData,
        allImages: allImageLinks,
      );
    }),
  );
}

第二步：重构PhotoGrid组件 #

移除内部多余的Scaffold、SingleChildScrollView嵌套，解决滚动冲突，修复点击传参bug：

class PhotoGrid extends StatelessWidget {
  final List<Map<String, dynamic>> photoList;
  final List<String> allImages;

  const PhotoGrid({
    super.key,
    required this.photoList,
    required this.allImages,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
      return Padding(
        padding: const EdgeInsets.only(top: 8),
        child: GridView.builder(
          // 关闭GridView自身滚动，避免和父容器滚动冲突，根据页面外层结构可调整
          physics: const NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            mainAxisSpacing: 2,
            crossAxisSpacing: 2,
          ),
          itemCount: allImages.length,
          itemBuilder: (context, index) {
            final currentPhoto = photoList[index];
            return GestureDetector(
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => RouteTwo(
                      image: currentPhoto["link"],
                      owner: currentPhoto["owner"],
                    ),
                  ),
                );
              },
              child: Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    // 加cover适配避免图片拉伸变形
                    fit: BoxFit.cover,
                    image: NetworkImage(allImages[index]),
                  ),
                ),
              ),
            );
          },
        ),
      );
    });
  }
}

• 不再为单张图片单独创建PhotoGrid实例，全量数据一次性传入单个网格组件，从根源解决单图展示问题
• 移除多层可滚动组件嵌套，通过shrinkWrap: true和NeverScrollableScrollPhysics解决布局异常、滑动冲突问题
• 修复点击跳转传参固定的bug，点击对应网格项时会传入当前项的图片、所有者信息到详情页
• 补充图片适配属性，避免网格内图片拉伸变形

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