flutter - 如何使用 ListView 显示来自 Bloc 的列表流

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的包流 Controller ，例如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);
}

现在在您的列表 View 上使用streambuilder

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

   }

希望这可以帮助。