Flutter Firestore 分页（添加/删除项目）答案

【问题标题】：Flutter Firestore Pagination (add/remove items)Flutter Firestore 分页（添加/删除项目）
【发布时间】：2021-04-08 01:09:50
【问题描述】：

我正在努力完成这项工作，两天后我决定向你们寻求帮助。我使用 Mobx 作为状态管理，问题与在列表中添加/删除项目有关，例如如果我根据限制检索每个 5 个项目的两个查询，然后从第一个查询中删除一个项目，第二个查询中的第一个项目是重复的，如果我添加一个新项目，则第二个查询中的第一个项目被隐藏。我还为 ListView.builder 设置了一个 scrollListener 以获取列表底部并调用更多项目。

提前致谢，

@override
  Stream<QuerySnapshot> teste(DocumentSnapshot lastDoc) {
    if (lastDoc == null) {
      return firestore.collection('teste')
      .orderBy('name')
      .limit(5)
      .snapshots();
    } else {
      return firestore.collection('teste')
      .orderBy('name')
      .limit(5)
      .startAfterDocument(lastDoc)
      .snapshots();
    }
  }

  @observable
  ObservableList<List<TesteModel>> allPagedResults = ObservableList<List<TesteModel>>();

  @observable
  ObservableList<TesteModel> listTeste = ObservableList<TesteModel>();

  @observable
  DocumentSnapshot lastDoc;

  @observable
  bool hasMoreItem;

  @action
  void teste() {
    var _currentRequestIndex = allPagedResults.length;
    
    primaryRepository.teste(lastDoc).listen((query) {
      if (query.docs.isNotEmpty) {
        var _query = query.docs.map((doc) => TesteModel.fromFirestore(doc))
        .toList();

        var _pageExists = _currentRequestIndex < allPagedResults.length;

        if (_pageExists) allPagedResults[_currentRequestIndex] = _query;
        else allPagedResults.add(_query);

        listTeste = allPagedResults.fold<List<TesteModel>>(<TesteModel>[],
          (initialValue, pageItems) => initialValue..addAll(pageItems)).asObservable();

        if (_currentRequestIndex == allPagedResults.length - 1) lastDoc = query.docs.last;
        
        hasMoreItem = _query.length == 5;
      }
    });
  }

【问题讨论】：

如果您正在分页并显示两个“页面已满”的数据，您需要同时监听两个流 - 或者是页面大小两倍的单个流。否则，您确实会遇到重叠/间隙问题。但是第一页和第二页的侦听器仍然处于活动状态，它们都应该在您描述的这种情况下触发。如果您没有遇到这种情况，您能否以我们也可以查看的方式显示问题 - 例如，通过打印 ID 并在您的问题中包含代码和输出？
嗨，我已经添加了代码，输出只是一个列表，例如第一个查询/页面 [1,2,3,4,5]，当我检索第二个查询时，我将有 [1,2,3,4,5,6,7,8,9,10] 如果我从第一个查询/页面中删除一个项目，例如输出的第一个项目将是 [2,3,4,5,6,6,7,8,9,10]。对不起，我不知道它是否清楚.. thx

标签： flutter google-cloud-firestore pagination mobx

【解决方案1】：

这个问题好运吗？

要添加新项目并拥有多个页面，您可以执行以下操作：

if (allPagedResults.contains(allPagedResults[0].last) == false) {
   allPagedResults.last.add(allPagedResults[0].last);
   allPagedResults.last.remove(allPagedResults[0].first);
}

【讨论】：