我正在我的移动应用程序中集成聊天功能,并决定使用Firebase实时数据库作为FiRestore的后端安装作为一种降低成本的机制.然而,我遇到了一个问题.关于如何使用Realtime Database
而不是Firestore
的数据创建无限滚动的文档似乎非常稀少.
下面是我的聊天消息的组织方式.这是我要使用的查询:
FirebaseDatabase.instance
.ref("messages/${widget.placeID}")
.orderByChild("timeStamp")
这是我想 for each 结果返回的小部件:
MessageWidget(
message: message.text,
id: message.uid,
name: message.name,
lastSender: message.lastSender,
date: message.timeStamp,
profilePicture: message.profilePicture,
);
Here is the database structure
查询可以工作,并且我已经根据查询的JSON响应编写了MessageWidget.我所需要的就是在查询到达滚动顶部时调用它,并加载更多的MessageWdiget
.还要注意的是,这是一个聊天应用程序,用户可以在上面滚动,加载较旧的消息,添加到以前的消息之上.
谢谢!
EDIT:以下是我目前拥有的代码:
Flexible(
child: StreamBuilder(
stream: FirebaseDatabase.instance
.ref("messages/${widget.placeID}")
.orderByChild("timeStamp")
.limitToLast(20)
.onValue,
builder:
(context, AsyncSnapshot<DatabaseEvent> snapshot) {
if (!snapshot.hasData) {
return const CircularProgressIndicator();
} else {
Map<dynamic, dynamic> map =
snapshot.data!.snapshot.value as dynamic;
List<dynamic> list = [];
list.clear();
list = map.values.toList();
return Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(bottom: 20),
child: ListView.builder(
controller: _scrollController,
// shrinkWrap: true,
itemCount: list.length,
itemBuilder: (context, index) {
final json = list[index]
as Map<dynamic, dynamic>;
final message = Message.fromJson(json);
return MessageWidget(
message: message.text,
id: message.uid,
name: message.name,
lastSender: message.lastSender,
date: message.timeStamp,
profilePicture:
message.profilePicture,
);
}),
),
);
}
},
),
),
我的initState
void initState() {
super.initState();
_scrollController.addListener(() {
if (_scrollController.position.atEdge) {
bool isTop = _scrollController.position.pixels == 0;
if (isTop) {
//add more messages
} else {
print('At the bottom');
}
}
});
}