Flutter中Unsplash随机URL多组件显示同图问题排查

核心原因 #

所有组件显示同一张图片的问题，本质是Flutter的图片缓存机制导致的：

• Image.network组件会以请求的完整URL作为缓存标识，当多个组件请求完全相同的https://source.unsplash.com/random/时，Flutter只会发起一次网络请求，后续所有组件直接复用缓存中的结果，所以显示的都是同一张图。
• 另外，Unsplash的随机图接口在收到带有缓存标记的重复请求时，也可能返回相同的图片，进一步强化了这个问题。

解决办法 #

给每个图片URL添加唯一的查询参数，让每个组件的请求URL都具备唯一性，这样缓存标识就会被区分开，每个组件都会独立请求不同的随机图片。

修改后的代码示例：

SingleChildScrollView(
  child: Row(
    children: List.generate(lengthOfDocuments, (index) {
      // 方式1：用列表索引作为唯一参数
      final uniqueImageUrl = "${documentsList[index]["image_path"]}?unique=${index}";
      // 方式2：用Firestore文档ID作为唯一参数（更稳定，避免索引变化导致图片变更）
      // final uniqueImageUrl = "${documentsList[index]["image_path"]}?docId=${documentsList[index].id}";
      return ImageBox(uniqueImageUrl);
    }),
  ),
);

添加的查询参数不会影响Unsplash接口返回随机图片的逻辑，只是让每个请求的URL唯一，从而绕过Flutter的缓存复用机制。

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