Flutter中Firebase获取非当前用户时SwipableStack重复显示问题

问题原因分析 #

• Firestore分页逻辑失效：原查询使用startAfterDocument(lastDoc)但未指定排序规则，Firestore的分页依赖固定排序逻辑，无排序时startAfter无法正确定位下一批数据，导致重复获取同一用户。
• 随机用户获取逻辑缺陷：仅靠limit(1)+startAfter无法实现真正的随机用户获取，没有随机排序机制支撑，容易出现重复结果。

修复步骤 #

1. 重写随机用户查询逻辑 #

给Firestore查询添加随机排序机制（需先给用户集合新增random字段，存储0-1之间的随机数，可通过Firebase控制台批量生成），确保每次获取不同的随机用户：

Future<DocumentSnapshot?> getRandomUser2() async {
  try {
    final currentUser = FirebaseAuth.instance.currentUser;
    final currentUserId = currentUser?.uid;

    if (currentUserId == null || currentUserId.isEmpty) {
      print("Error: 当前用户ID为空");
      return null;
    }

    // 生成随机值，配合orderBy实现随机取数
    final randomValue = Random().nextDouble();
    
    Query query = FirebaseFirestore.instance
        .collection('Users')
        .where('uid', isNotEqualTo: currentUserId)
        .orderBy('random')
        .startAt([randomValue])
        .limit(1);

    QuerySnapshot querySnapshot = await query.get();

    // 若当前随机值后无用户，从集合开头取
    if (querySnapshot.docs.isEmpty) {
      query = FirebaseFirestore.instance
          .collection('Users')
          .where('uid', isNotEqualTo: currentUserId)
          .orderBy('random')
          .limit(1);
      querySnapshot = await query.get();
    }

    if (querySnapshot.docs.isNotEmpty) {
      DocumentSnapshot randomUser = querySnapshot.docs.first;
      setState(() {
        lastFetchedUser = randomUser;
      });

      String imageUrl = "";
      List<String> tempUrls = [];

      if (randomUser['uid'] != null && randomUser['uid'].isNotEmpty) {
        Reference storageRef = FirebaseStorage.instance
            .ref()
            .child('user_images')
            .child('${randomUser['uid']}.jpg');

        try {
          imageUrl = await storageRef.getDownloadURL();
          print('获取到图片URL: $imageUrl');
          tempUrls.add(imageUrl);
        } catch (e) {
          print('获取用户${randomUser['uid']}图片失败: $e');
        }
      } else {
        print('用户UID无效或缺失');
      }

      setState(() {
        imageUrlList = tempUrls;
        currentIndexImage = 0;
        isLoading = false;
      });

      return randomUser;
    }
  } catch (e) {
    print('获取用户失败: $e');
  }

  return null;
}

2. 优化SwipableStack状态更新 #

简化图片索引逻辑，避免冗余变量，同时确保图片缓存更新：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: [
        if (isLoading)
          const Center(child: CircularProgressIndicator())
        else if (imageUrlList.isNotEmpty)
          SwipableStack(
            itemCount: 1,
            builder: (context, properties) {
              final imageUrl = imageUrlList[0];
              print('显示图片: $imageUrl');

              return ClipRRect(
                borderRadius: BorderRadius.circular(60.0),
                child: Transform.scale(
                  scale: 0.95,
                  child: CachedNetworkImage(
                    imageUrl: imageUrl,
                    cacheKey: imageUrl, // 强制更新缓存
                    progressIndicatorBuilder: (context, url, downloadProgress) =>
                        CircularProgressIndicator(value: downloadProgress.progress),
                    errorWidget: (context, url, error) => const Icon(Icons.error),
                  ),
                ),
              );
            },
            onSwipeCompleted: (index, direction) async {
              setState(() {
                isLoading = true;
              });
              print('滑动方向: $direction');
              await getRandomUser2();
              setState(() {
                isLoading = false;
              });
            },
          )
      ],
    ),
  );
}

3. 额外注意事项 #

• 确保Firestore用户集合中uid字段正确，排除当前用户的逻辑生效。
• 若不想新增random字段，可改用orderBy('uid')配合随机生成的UID前缀实现随机取数，但稳定性略差。
• 检查Firebase Storage中用户头像路径是否正确，确保uid.jpg格式的文件存在。

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