Flutter循环指定索引执行函数时多帖子数据被覆盖问题求助

你遇到的所有带图帖子数据互相覆盖、跳变的问题，核心原因有两个：

• 你用了类/全局级别的共享变量_resultLengthImage、_userPostImages存储图片查询结果，多个帖子的异步拉取请求返回时，会互相覆盖这些共享变量的值，所有带图帖子都读取同一组共享变量，自然只会展示最后一次请求返回的数据
• 你在Widget的build方法中直接调用异步拉取方法，build会频繁触发重绘，会导致大量重复的异步请求，进一步加剧数据混乱的情况

按以下步骤修改即可解决问题：

1. 改造图片拉取方法，移除全局变量依赖 #

把_getPostImages改成Future类型，直接返回当前传入postId对应的图片列表，全程不修改任何全局共享变量，同时增加缓存避免重复请求：

// 类内新增缓存Map，存储已拉取过的帖子ID对应图片列表
final Map<String, List<String>> _postImageCache = {};

Future<List<String>> _getPostImages(String postId) async {
  // 命中缓存直接返回
  if(_postImageCache.containsKey(postId)) {
    return _postImageCache[postId]!;
  }
  List<String> imgList = [];
  // 这里替换为你原有查询当前postId对应图片的数据库逻辑
  var queryRes = await 你的数据库查询方法(postId);
  if(queryRes.isNotEmpty) {
    int count = queryRes[0].count;
    for(int i =1; i<=count; i++) {
      imgList.add(queryRes[i].postImg);
    }
  }
  // 存入缓存
  _postImageCache[postId] = imgList;
  return imgList;
}

2. 用FutureBuilder包裹带图帖子组件，每个帖子独立维护自己的加载状态 #

修改_postWithImageFunction，直接返回FutureBuilder，每个帖子对应自己的异步请求，互不干扰：

Widget _postWithImageFunction(String postId) {
  return FutureBuilder<List<String>>(
    future: _getPostImages(postId),
    builder: (context, snapshot) {
      // 加载中状态，可替换为你自己的占位组件
      if(snapshot.connectionState == ConnectionState.waiting) {
        return const CircularProgressIndicator();
      }
      // 加载出错/无图片的情况
      if(snapshot.hasError || !snapshot.hasData || snapshot.data!.isEmpty) {
        return _postWithImage(postId, [], false);
      }
      // 加载成功，返回带图组件
      return _postWithImage(postId, snapshot.data!, true);
    },
  );
}

修改完后你原有遍历帖子的代码不需要调整，_postWithImageFunction的调用方式和之前完全一致。

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