【问题标题】:Flutter/Firestore - Streambuilder and Firestore with realtime listenerFlutter/Firestore - 带有实时监听器的 Streambuilder 和 Firestore
【发布时间】:2019-10-28 07:34:00
【问题描述】:

我正在尝试在流构建器中设置 Firestore 流,就像它们在文档中显示的那样,但是当我更新文档或删除文档时,它不会反映在屏幕上。日志会更新,但不会更新实际屏幕。

代码:

// Chats API file
Stream<List<Message>> messagesStream({String chatID, String orderBy, bool descending, List<dynamic> startAfter, int limit}) {
  return this
      .collection
      .document(chatID)
      .collection(Config.messages)
      .orderBy(orderBy, descending: descending)
      .startAfter(startAfter)
      .limit(limit)
      .snapshots()
      .map((event) => event.documents.map((documentSnapshot) => Message().model(id: documentSnapshot.documentID, map: documentSnapshot.data)).toList().reversed.toList());
}


// Chat file
Widget _streamBuilderWidget;

@override
void initState() {
  super.initState();

  this._streamBuilder();
  if (Platform.isIOS) {
    this._scrollController.addListener(() {
      if (this._scrollController.position.pixels <= -135.0) {
        this._checkForOldMessages();
      }
    });
  }
}

@override
Widget build(BuildContext context) {
    …
    Expanded(child: this._streamBuilderWidget),
    …
}

Widget _streamBuilder() {
  return this._streamBuilderWidget = StreamBuilder<List<Message>>(
      initialData: this._messages,
      stream: APIs().chats.messagesStream(chatID: widget.chat.chatID, orderBy: 'createdAt', descending: true, startAfter: this._startAfter, limit: this._messagesLimit),
      builder: (context, snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            {
              return PAIndicator();
            }
          default:
            {
              if (snapshot.data.length < this._messagesLimit) {
                this._hasMoreMessages = false;
              } else {
                this._hasMoreMessages = true;
              }

              snapshot.data.forEach((m) {
                print(m.message); // Prints 10 values even when 1 file is changed
              });

              this._messages.insertAll(0, snapshot.data);

              return Platform.isIOS
                  ? MessagesList(mKey: this._listKey, scrollController: this._scrollController, messages: this._messages, aUser: widget.aUser)
                  : RefreshIndicator(
                      child: MessagesList(mKey: this._listKey, scrollController: this._scrollController, messages: this._messages, aUser: widget.aUser),
                      onRefresh: () async {
                        await Future.delayed(Duration(seconds: 1));

                        this._checkForOldMessages();

                        return null;
                      });
            }
        }
      });
}

另外,当我发送消息时,它没有被添加到列表中,我必须返回并再次进入聊天室才能看到最新消息。

我怎样才能拥有它,以便当我打开聊天室时我可以看到进来的新消息,同时只显示最近的消息以降低成本,我不想显示所有 10000 条消息。只有最新的和用户在聊天室时添加到其中的。

注意:我之所以这样,是因为出于某种原因,每当我输入它时,它都会不断重新加载,而当我滚动数组时,它只会自身相乘,什么不是。这是我在滚动时将旧消息添加到数组中的唯一方法,我知道。

在我重新进入聊天室之前不会显示新消息。

【问题讨论】:

    标签: firebase flutter dart google-cloud-firestore chat


    【解决方案1】:

    关于如何仅显示最新消息,您应该实现分页查询并在某个滚动点后延迟加载较旧的消息。

    https://firebase.google.com/docs/firestore/query-data/query-cursors

    【讨论】:

    • 当我打开聊天室时,我会看到 10 条最近的消息,当我向上滚动并到达顶部的旧消息时,我会收到更多旧消息,直到没有更多消息为止。但是我的代码设置方式,不确定它是否正确,我看不到正在发送什么新消息,所以基本上是最新消息之后的任何内容。但是侦听器处于活动状态,因为当我在 Firestore 中修改消息时,我在控制台中获得了更新,但在实际屏幕上却没有。而且我不能使用setState(),因为它由于某种原因崩溃了......
    猜你喜欢
    • 2020-10-01
    • 2020-12-02
    • 2019-03-26
    • 2021-06-04
    • 2021-03-03
    • 2021-10-09
    • 2021-10-05
    • 1970-01-01
    • 2020-03-15
    相关资源
    最近更新 更多