Flutter 如何使用listview显示来自bloc的列表流
我正在开发一个即时消息应用程序,我需要用户实时发送和接收消息。我使用Firebase作为应用程序后端,Flutter 如何使用listview显示来自bloc的列表流,flutter,dart,stream,bloc,Flutter,Dart,Stream,Bloc,我正在开发一个即时消息应用程序,我需要用户实时发送和接收消息。我使用Firebase作为应用程序后端,flatter\u bloc包来管理状态,并使用流实时发送和接收消息 我已经成功实现了发送消息功能,并且我能够从Cloud Firestore成功检索消息,但是当用户发送消息时,它不会加载到聊天消息列表视图中 这是在ChatBloc中调用的ChatProvidergetCurrentChatMessages()方法的实现 流getCurrentChatMessages(){ 返回此.messag
flatter\u bloc
包来管理状态,并使用流实时发送和接收消息
我已经成功实现了发送消息功能,并且我能够从Cloud Firestore成功检索消息,但是当用户发送消息时,它不会加载到聊天消息列表视图中
这是在ChatBloc
中调用的ChatProvider
getCurrentChatMessages()
方法的实现
流getCurrentChatMessages(){
返回此.messagesRef.orderBy('timestamp',降序:true)
.快照()
.map((查询快照快照){
返回snapshot.documents.map((DocumentSnapshot snapshot)=>ChatMessage.fromFirestore(snapshot)).toList();
});
}
在ChatProvider中,这些是将聊天消息列表传播到UI的方法
流映射FetchCurrentChatMessageSeventState(FetchCurrentChatMessagesEvent事件)异步*{
产生FetchingCurrentChatMessagesState();
final bool chatExists=等待_chatProvider.chatExists;
//如果聊天室不存在,请创建聊天室。
如果(!chat存在){
等待_chatProvider.createChat();
}
_chatProvider.getCurrentChatMessages().listen((列出chatMessages){
打印('聊天信息长度:${chatMessages.length}');
分派(获取当前ChatMessageSevent(chatMessages));
});
}
流映射FetchedCurrentChatMessageSeventToState(FetchedCurrentChatMessagesEvent事件)异步*{
最终列表chatMessages=event.chatMessages;
产生FetchedCurrentChatMessagesState(chatMessages);
}
这是显示聊天信息的列表视图
class ChatMessagesList扩展了StatefulWidget{
@凌驾
_ChatMessagesListState createState()=>\u ChatMessagesListState();
}
类\u ChatMessagesListState扩展状态{
列表_chatMessages=List();
@凌驾
小部件构建(构建上下文){
扩大回报(
孩子:BlocBuilder(
条件:(ChatState oldState,ChatState newState)=>oldState.hashCode!=newState.hashCode,
生成器:(BuildContext上下文,ChatState){
if(状态为FetchingCurrentChatMessagesState){
返回中心(
子对象:CircularProgressIndicator(),
);
}
if(状态为FetchedCurrentChatMessagesState){
_chatMessages=state.chatMessages;
}
如果(_chatMessages.length==0){
返回容器();
}
打印('聊天信息:\n$_chatMessages');
返回ListView.builder(
相反:是的,
itemCount:\u chatMessages.length,
itemBuilder:(构建上下文,int索引){
final ChatMessage ChatMessage=_chatMessages[index];
返回聊天信息互动程序(
chatMessage:chatMessage,
);
},
);
},
),
);
}
}
每当发送消息时,ChatBloc
会将更新的聊天消息列表发送到chatmesslist
小部件,但小部件无法相应更新。它只显示\u chatMessages
列表中的第一个元素,直到我弹出
和推送
路线时才显示,也就是当我看到更新的列表时
我希望当用户单击“发送消息”按钮时,聊天消息列表将更新为已发送消息。使用rxdart的软件包流控制器,例如,您可以使用您的列表
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);
}
final_list=behavior subject()//私有变量
可观察的get list=>\u list.stream//公开暴露变量
exampleMethod(){
//准备好列表,准备好后使用sink加载流
_list.sink.add(readylist);
}
现在在listview上使用streambuilder
Widget _listView(){
return StreamBuilder(){
stream: blocProvider.list
builder: (context, AsyncSnapshot<List<ChatMessage>> listSnapShot){
//custom build your UI now with data in listSnapshot.data.
}
Widget\u listView(){
返回StreamBuilder(){
流:blocProvider.list
生成器:(上下文,异步快照列表快照){
//现在使用listSnapshot.data中的数据自定义构建UI。
}
希望这有帮助。您好,谢谢您的回复。集团实际上填充了列表。但问题在于当我想在列表视图中显示它时,它会一直显示列表中的第一个元素,直到我弹出
,然后推送路径,也就是当我在显示列表。您好,我已尝试了您的解决方案,但问题仍然存在,ChatBloc
将聊天消息发送到ChatListWidget
,但ListView
无法使用新的聊天消息更新其子代。