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

我正在开发即时消息传递应用程序,我需要用户实时发送和接收消息。我正在使用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列表中的第一个元素,直到我poppush路线时才显示,即当我看到更新后的列表时。

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

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

使用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.

   }

希望这会有所帮助。

本文链接:https://www.f2er.com/3127702.html

大家都在问