Flutter & Firebase streamBuilder 分页答案

【问题标题】：Flutter & Firebase streamBuilder paginantionFlutter & Firebase streamBuilder 分页
【发布时间】：2020-01-24 14:02:54
【问题描述】：

所以我一直在寻找一种方法将分页添加到我的应用程序“Chat”一个多星期了，现在仍然没有运气:(

这是我的代码

Widget build(BuildContext context) {
return StreamBuilder(
  //TODO add pagination later...

  stream: widget.messageDocRef
      .collection("Chat")
      .orderBy('timestamp', descending: true)
      .limit(15)
      .snapshots(),

  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (!snapshot.hasData) {
      return Center(
        child: circularProgress(),
      );
    }
    final messages = snapshot.data.documents;
    for (int i = 0; i < snapshot.data.documents.length; i++) {
      DocumentSnapshot doc = snapshot.data.documents.elementAt(i);
      print(doc.metadata.isFromCache
          ? "DATA FROM CACHE"
          : "DATA FROM INTERNET");
    }

    List<MessageBubble> messagesBubble = [];
    for (var message in messages) {
      final docId = message.documentID;

      final messageText = message.data['content'];

      final messageSender = message.data['from'];

      final messageType = message.data['type'];

      final messageBubble = MessageBubble(
        messageDocRef: widget.messageDocRef,
        docId: docId,
        type: messageType,
        text: messageText,
        isMe: widget.currentUser.id == messageSender,
      );
      messagesBubble.add(messageBubble);
    }
    return Expanded(
      child: ListView(
        physics: const AlwaysScrollableScrollPhysics(),
        reverse: true,
        controller: this._scrollController,
        padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
        children: messagesBubble,
      ),
    );
  },
);}

我的初始化状态

void initState() {
super.initState();
_scrollController.addListener(() {
  double maxScroll = _scrollController.position.maxScrollExtent;
  double currentScroll = _scrollController.position.pixels;
  if (maxScroll == currentScroll) {
    print("get more products");
  }
});}

MessageBubble 是一个在单独的气泡中显示每条消息的类。

到目前为止，一切都很好！但我需要实现分页并且不会丢失 streamBuilder 实时更新（“显示新消息”、“删除已删除消息”...等）。

我真的不知道我将如何解决这个问题，我尝试使用多个查询仍然没有运气。

我希望用户能够在向上滚动时看到较旧的消息，并在他滚动时看到较新的消息向下。

求助！！！

【问题讨论】：

标签： firebase flutter pagination google-cloud-firestore

【解决方案1】：

您尝试过这个method 还是这个one？

不限制文档，使其可变，每次都可以更新。

【讨论】：

嗨，是的，我看到了第一种方法，但它不起作用，因为我使用的是 streamBuilder 而他使用的是 listView.Builder。我不想失去 StreamBuilder 实时更新能力。

【解决方案2】：

让你的直播变成这样...

int _limit = 20;
...
stream: widget.messageDocRef
      .collection("Chat")
      .orderBy('timestamp', descending: true)
      .limit(_limit)
      .snapshots(),

然后将此监听器添加到您的滚动控制器：

final ScrollController _scrollController = new ScrollController();
...
void initState() {
   _scrollController.addListener(_scrollListener);
}
...
void _scrollListener() {
  if (_scrollController.offset >= _scrollController.position.maxScrollExtent &&
      !_scrollController.position.outOfRange) {
    print("at the end of list");
    setState(() {
        _limit +=20;
    });
  }
}

...
ListView(
   ...
   controller: _scrollController
   ...
)

我仍然不知道如何在屏幕末尾放置进度指示器，但这是我能想到的最好的解决方法。

【讨论】：