如何在Flutter中点击GridView元素后正常展示base64格式图片

云原生阿岚

2026-9-27

问题根因

点击无响应的核心问题是GestureDetector的onTap回调中仅返回了新页面的Widget，没有调用Flutter的路由跳转API将页面推入路由栈，系统不会主动渲染未入栈的页面，因此点击后无任何变化。
代码中存在多处重复对images数组做base64转图片的操作，不仅有不必要的性能损耗，也增加了空指针异常的出现概率。

修正方案

提前预处理图片数组避免重复转换，同时修正路由跳转逻辑即可：

提前做一次图片转换缓存：

// 建议在initState或者首次获取到images数据时执行一次转换即可，无需每次渲染都重复处理
late List<ImageProvider> imageProviders;

// 拿到images数据后执行转换
if (images != null) {
  imageProviders = images!.map((photo) => Utility.imageFromBase64String(photo.photo_name).image as ImageProvider).toList();
}

修正GridView的点击逻辑：

return GridView.builder(
  itemCount: imageProviders.length,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2
  ),
  itemBuilder: (BuildContext context, int index) {
    return GestureDetector(
      onTap: () {
        // 核心修正：调用路由跳转API将大图页推入路由栈
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => kj(index))
        );
      },
      child: Image(image: imageProviders[index], fit: BoxFit.cover)
    );
  }
);

简化大图页的实现：

Widget kj(int i) {
  return Scaffold(
    appBar: AppBar(
      title: const Text("查看大图"),
    ),
    body: PhotoView(
      imageProvider: imageProviders[i],
    ),
  );
}