Flutter Firestore StreamBuilder分页异常：滚动无加载/筛选后指示器常驻

问题1：初始加载全量数据、滚动无加载指示器 #

原因 #

1. ListView的最后一个item返回空容器，未显示加载组件；
2. _getquestions重复监听Firestore实时快照，导致数据被多次添加；
3. 滚动触发逻辑未判断isLoading状态，会重复发起请求。

修复代码 #

• 调整ListView的itemBuilder，根据状态显示加载指示器：

itemBuilder: (ctx, index) {
  if (index < questionDocs.length) {
    final questionData = questionDocs[index].data() as Map<String, dynamic>;
    return PostQuestion(
      snap: questionData,
      user: userController.getuser?.uid,
    );
  } else {
    // 仅在还有更多数据且正在加载时显示指示器
    return _hasMoreData && isLoading 
        ? const Padding(
            padding: EdgeInsets.symmetric(vertical: 16),
            child: Center(child: CircularProgressIndicator()),
          )
        : const SizedBox();
  }
},

• 优化滚动监听逻辑，避免重复加载：

scrollController.addListener(() {
  if (scrollController.offset >= scrollController.position.maxScrollExtent &&
      !scrollController.position.outOfRange &&
      !isLoading &&
      _hasMoreData) {
    _getquestions(questionContr.filter);
  }
});

• 管理Firestore快照订阅，避免重复监听：

StreamSubscription? _firestoreSubscription;

void _getquestions(String filter) {
  // 取消旧订阅
  _firestoreSubscription?.cancel();
  
  // 原有查询逻辑...
  
  _firestoreSubscription = pagechatQuery.snapshots().listen((snapshot) {
    // 原有数据处理逻辑...
  });
}

@override
void dispose() {
  _firestoreSubscription?.cancel();
  questionController.close();
  scrollController.dispose();
  super.dispose();
}

问题2：切换筛选后持续显示加载指示器 #

原因 #

1. 切换筛选时未重置分页状态（游标、已加载数据列表、是否有更多数据标记）；
2. _getquestions未接收筛选参数，查询条件未更新；
3. 未处理Stream的错误和空数据场景，导致StreamBuilder一直处于等待状态。

修复代码 #

• 修改updateQuestions，重置所有分页状态：

void updateQuestions(String filter) {
  _firestoreSubscription?.cancel();
  questionController.close();
  
  // 重置分页状态
  _lastDocument = null;
  allPagedResults = [<DocumentSnapshot>[]];
  _hasMoreData = true;
  isLoading = false;
  
  questionController = StreamController<List<DocumentSnapshot>>.broadcast();
  _getquestions(filter);
}

• 让_getquestions支持筛选参数，并处理空数据和错误：

void _getquestions(String filter) {
  final Query questionCollectionReference = FirebaseFirestore.instance.collection('posts');
  
  var pagechatQuery = questionCollectionReference
      .where('status', isEqualTo: filter) // 替换为你的实际筛选字段
      .orderBy('posteddate', descending: true)
      .limit(questionLimit);

  if (_lastDocument != null) {
    pagechatQuery = pagechatQuery.startAfterDocument(_lastDocument!);
  }

  if (!_hasMoreData) return;
  setState(() => isLoading = true);
  
  _firestoreSubscription?.cancel();
  _firestoreSubscription = pagechatQuery.snapshots().listen((snapshot) {
    if (snapshot.docs.isNotEmpty) {
      // 原有数据合并逻辑...
      questionController.add(allquestions);
      setState(() => isLoading = false);
      _lastDocument = snapshot.docs.last;
      _hasMoreData = snapshot.docs.length == questionLimit;
    } else {
      setState(() {
        isLoading = false;
        _hasMoreData = false;
      });
      questionController.add([]);
    }
  }, onError: (error) {
    setState(() => isLoading = false);
    questionController.addError(error);
  });
}

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