如何使用StreamBuilder实现排行榜：展示前100名及未上榜用户自身排名

算力阿峰

2026-10-1

实现方案

1. 调整数据查询逻辑

同时发起两个数据查询请求：
- 第一个请求按你设定的排行规则排序，拉取前100条的排行榜文档数据
- 第二个请求单独查询当前登录用户的全局排名、对应展示字段（如积分、昵称等）

2. StreamBuilder 内部数据拼接逻辑

在StreamBuilder的builder回调中按业务要求处理数据拼接：

Widget build(BuildContext context) {
  return StreamBuilder(
    // 用CombineLatestStream合并两个数据流
    stream: CombineLatestStream.list([
      top100RankStream, // 前100条排行榜的数据流
      currentUserRankStream, // 当前用户排行数据的数据流
    ]),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        List<RankItem> top100List = snapshot.data[0] as List<RankItem>;
        RankItem? currentUserItem = snapshot.data[1] as RankItem?;
        
        // 校验当前用户是否在top100范围内
        bool userInTop100 = top100List.any((item) => item.uid == currentUserItem?.uid);
        List<RankItem> finalShowList = List.from(top100List);
        
        // 不在范围内则追加用户数据到列表末尾
        if (!userInTop100 && currentUserItem != null) {
          finalShowList.add(currentUserItem);
        }
        
        return ListView.builder(
          itemCount: finalShowList.length,
          itemBuilder: (context, index) {
            // 给额外追加的用户条目加特殊样式区分
            bool isExtraUserItem = !userInTop100 && index == finalShowList.length - 1;
            return RankRowWidget(
              item: finalShowList[index],
              isHighlight: isExtraUserItem,
            );
          },
        );
      }
      // 其他加载、错误状态自行补充
      return const CircularProgressIndicator();
    },
  );
}