如何使用列表视图显示来自集团的列表流

Question

我正在开发一个即时消息应用程序，我需要用户实时发送和接收消息。我正在使用Firebase作为应用程序后端，使用flutter_bloc包来管理状态，并使用流来实时发送和接收消息。

我已经成功实现了发送消息功能，并且能够从Cloud Firestore成功检索消息，但是当用户发送消息时，它不会加载到聊天消息ListView中。

这是在ChatProvider中调用的getCurrentChatMessages() ChatBloc方法的实现。

  Stream<List<ChatMessage>> getCurrentChatMessages() {
    return this.messagesRef.orderBy('timestamp', descending: true)
    .snapshots()
    .map((QuerySnapshot snapshot) {
      return snapshot.documents.map<ChatMessage>((DocumentSnapshot snapshot) => ChatMessage.fromFirestore(snapshot)).toList();
    });
  }

在ChatProvider中，这些是将聊天消息列表传播到UI的方法

  Stream<ChatState> mapFetchCurrentChatMessagesEventToState(FetchCurrentChatMessagesEvent event) async* {
    yield FetchingCurrentChatMessagesState();
    final bool chatExists = await _chatProvider.chatExists;
    // If chat does not exists create chat.
    if (!chatExists) {
      await _chatProvider.createChat();
    }
    _chatProvider.getCurrentChatMessages().listen((List<ChatMessage> chatMessages) {
      print('Chat messages length: ${chatMessages.length}');
      dispatch(FetchedCurrentChatMessagesEvent(chatMessages));
    });
  }

  Stream<ChatState> mapFetchedCurrentChatMessagesEventToState(FetchedCurrentChatMessagesEvent event) async* {
    final List<ChatMessage> chatMessages = event.chatMessages;
    yield FetchedCurrentChatMessagesState(chatMessages);
  }

这是显示聊天消息的ListView。

class ChatMessagesList extends StatefulWidget {
  @override
  _ChatMessagesListState createState() => _ChatMessagesListState();
}

class _ChatMessagesListState extends State<ChatMessagesList> {
  List<ChatMessage> _chatMessages = List<ChatMessage>();

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: BlocBuilder<ChatBloc, ChatState>(
        condition: (ChatState oldState, ChatState newState) => oldState.hashCode != newState.hashCode,
        builder: (BuildContext context, ChatState state) {
          if (state is FetchingCurrentChatMessagesState) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }

          if (state is FetchedCurrentChatMessagesState) {
            _chatMessages = state.chatMessages;
          }

          if (_chatMessages.length == 0) {
            return Container();
          }

          print('Chat Messages:\n$_chatMessages');

          return ListView.builder(
            reverse: true,
            itemCount: _chatMessages.length,
            itemBuilder: (BuildContext context, int index) {
              final ChatMessage chatMessage = _chatMessages[index];
              return ChatMessageTile(
                chatMessage: chatMessage,
              );
            },
          );
        },
      ),
    );
  }
}

[无论何时发送消息，ChatBloc都会将更新的聊天消息列表发送到ChatMessagesList小部件，但是该小部件无法相应地更新。它只显示_chatMessages列表中的第一个元素，直到我pop和push路线时才显示，即当我看到更新列表时。

当用户单击发送消息按钮时，我希望用发送的消息来更新聊天消息列表。

Answer 1

使用rxdart的包流控制器，例如BehaviourSubject，您可以使用列表bloc类中的示例：

final _list = BehaviourSubject<List<ChatMessage>>(); //private variable
Observable<List<ChatMessage>> get list => _list.stream; //exposesvariable_publicly

exampleMethod(){ 
//prepare your list and when ready load the stream using sink
_list.sink.add(readylist);
}

现在在您的列表视图上使用streambuilder

Widget _listView(){
 return StreamBuilder(){
   stream: blocProvider.list
   builder: (context, AsyncSnapshot<List<ChatMessage>> listSnapShot){
     //custom build your UI now with data in listSnapshot.data.

   }

希望这会有所帮助。