如何将延迟加载添加到此列表中？

Question

这就是我从 firebase firestore 获取 postList 中的帖子的方式，我需要一个可以在滚动上获取更多帖子的函数。下一组帖子必须在此初始列表中显示的最后一个帖子之后开始，并在用户滚动时添加到此列表中，只要 Firestore 中有帖子。

class _FeedScreenState extends State<FeedScreen> {
  List<Post> _posts = [];
   ScrollController _controller = ScrollController();

  @override
  void initState() {
    super.initState();
    _setupFeed();
     _controller.addListener(_scrollListener);
  }

_scrollListener() {
    setState(() {
      if (_controller.position.atEdge) {
        if (_controller.position.pixels == 0) {


        } else {
          _getMore();

        }
      }
    });
  }
  _setupFeed() async {
    List<Post> posts = await DatabaseService.getFeedPosts(widget.currentUserId);
    setState(() {
      _posts = posts;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          'New List',
          style: TextStyle(
            color: Colors.black,
            fontSize: 35.0,
          ),
        ),
      ),
      body: RefreshIndicator(
        onRefresh: () => _setupFeed(),
        child: ListView.builder(
          controller: _controller,
          itemCount: _posts.length,
          itemBuilder: (BuildContext context, int index) {
            Post post = _posts[index];
            return FutureBuilder(
              future: DatabaseService.getUserWithId(post.authorId),
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                if (!snapshot.hasData) {
                  return SizedBox.shrink();
                }
                User author = snapshot.data;
                return PostView(
                  currentUserId: widget.currentUserId,
                  post: post,
                  author: author,
                );
              },
            );
          },
        ),
      ),
    );
  }
}

这就是我获取帖子列表的方式

static Future<List<Post>> getFeedPosts(String userId) async {
    QuerySnapshot feedSnapshot = await feedsRef
        .document(userId)
        .collection('userFeed')
        .orderBy('timestamp', descending: true)
        .limit(30)
        .getDocuments();
    List<Post> posts =
        feedSnapshot.documents.map((doc) => Post.fromDoc(doc)).toList();
    return posts;
  }

Answer 1

na2axl 的答案几乎是正确的。我将在这里添加一个解释和示例，说明如何使用startAfter()

如果您检查documentation on pagination，您将看到您需要使用startAfter() 引用您使用的任何过滤器。在您的情况下，您使用timestamp 进行订购，因此您的下一个查询应如下所示：

static Future<List<Post>> getNextFeedPosts(String userId, TimeStamp timestamp) async {
    QuerySnapshot feedSnapshot = await feedsRef
        .document(userId)
        .collection('userFeed')
        .orderBy('timestamp', descending: true)
        //Here you need to let Firebase know which is the last document you fetched
        //using its timesTamp
        .startAfter(timestamp)
        .limit(30)
        .getDocuments();
    List<Post> posts =
        feedSnapshot.documents.map((doc) => Post.fromDoc(doc)).toList();
    return posts;
  }

这意味着您的下一个查询仍将按timestamp 排序，但检索到的第一个文档将在startAfter 上的timestamp 之后

我希望这会有所帮助，但是，您可以查看文档，因为还有其他示例！

Answer 2

我认为这样做可以解决您的问题：

您必须编辑您的 getFeedPosts 以收集从给定索引开始的帖子：

我对 FireStore 不熟悉，我在 docs 上找到了 startAt() 方法

编辑：我误解了 Firestore 的概念，所以我按照 Francisco Javier Snchez 的建议将 startAt() 更改为 startAfter()

static Future<List<Post>> getFeedPosts(String userId, TimeStamp start) async {
  QuerySnapshot feedSnapshot = await feedsRef
      .document(userId)
      .collection('userFeed')
      .orderBy('timestamp', descending: true)
      .startAfter(start)
      .limit(30)
      .getDocuments();
  List<Post> posts =
      feedSnapshot.documents.map((doc) => Post.fromDoc(doc)).toList();
  return posts;
}

现在可以这样查询了：

_getMore() async {
  // You have to give the timestamp of the last post here
  // Change this line by the right way...
  List<Post> posts = await DatabaseService.getFeedPosts(widget.currentUserId, _posts[_posts.length - 1].timestamp);
  setState(() {
    // Do += instead of =, += will add fetched posts to the current list, = will overwrite the whole list
    _posts += posts;
  });
}

希望这会有所帮助！