Flutter结合Firebase在ListView中展示广告对应用户头像的实现问题

• 你定义了全局共享的carUserId、usersImg状态变量，ListView的itemBuilder在渲染每个条目时会同时修改这个全局变量，异步请求头像返回后调用setState会刷新所有列表项，所有条目的头像都会绑定最新返回的usersImg值，因此出现头像反复跳转的异常。
• 异步请求没有做缓存，相同用户发布的多个广告会重复拉取头像，浪费请求资源，也会加重刷新紊乱的问题。
• 直接对usersImg!做强制解引用，当头像还没请求完成时会触发空指针异常，导致应用崩溃。

步骤1：新增头像缓存变量 #

在_HomeScreenState类中新增缓存Map，存储已经拉取过的用户头像，删除原有全局的carUserId、usersImg变量：

class _HomeScreenState extends State<HomeScreen> {
  // 原有其他变量保留
  QuerySnapshot? cars;
  CarMethods carobj = CarMethods();
  // 新增头像缓存，key为用户ID，value为头像URL
  Map<String, String> userAvatarCache = {};
  // 原有其他代码...
}

步骤2：使用FutureBuilder单独渲染每个条目的头像 #

删除itemBuilder中原有的getimage()调用逻辑，使用FutureBuilder让每个条目单独发起自己的头像请求，不共享全局状态，请求成功后存入缓存：

itemBuilder: (context,index) {
  Map carData = cars!.docs[index].data() as Map;
  String adUserId = carData['uId'];
  return Card(
    child: Column(
      children: [
        ListTile(
          leading: GestureDetector(
            onTap: (){},
            child: Container(
              width: 60,
              height:60,
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
              ),
              child: FutureBuilder(
                // 缓存存在就直接返回缓存值，否则发起请求
                future: userAvatarCache.containsKey(adUserId) 
                  ? Future.value(userAvatarCache[adUserId])
                  : carobj.getAdData(adUserId).then((res){
                      String avatar = (res.data() as Map)['imgPro'].toString();
                      userAvatarCache[adUserId] = avatar;
                      return avatar;
                    }),
                builder: (context, AsyncSnapshot<String> snapshot) {
                  // 请求完成，显示头像
                  if (snapshot.connectionState == ConnectionState.done && snapshot.hasData) {
                    return CircleAvatar(
                      backgroundImage: NetworkImage(snapshot.data!),
                      fit: BoxFit.fill,
                    );
                  }
                  // 加载中/出错显示占位图
                  return const Icon(Icons.account_circle, size: 60, color: Colors.grey);
                },
              ),
            ),
          ),
          // 原有title、subtitle等其他逻辑保持不变
        )
      ],
    ),
  );
}

优化建议 #

可以在用户发布广告的时候，直接把当前用户的头像URL同步写入cars表的对应字段中，这样列表渲染时不需要二次查询users表，性能更高，也不需要处理异步请求的逻辑。

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