我正在尝试从名为“posts”的 Firestore 集合中检索帖子,其中包含 帖子创建者的 userID 和帖子描述,这可以通过使用 StreamBuilder 和 FutureBuilder 来实现(不太可取,因为它只获取一次快照,并且当字段更改时不会更新)。
但是,我想使用 帖子创建者的 userID 查询另一个名为“users”的集合,并检索与 userId 匹配的文档。
这是我的第一个方法:
StreamBuilder<QuerySnapshot>(
stream:Firestore.instance.collection("posts").snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) {
return Center(
child: _showProgressBar,
);
}
List<DocumentSnapshot> reversedDocuments = snapshot.data.documents.reversed.toList();
return ListView.builder(
itemCount: reversedDocuments.length,
itemBuilder: (BuildContext context, int index){
String postAuthorID = reversedDocuments[index].data["postAuthorID"].toString();
String postAuthorName = '';
Firestore.instance.collection("users")
.where("userID", isEqualTo: postAuthorID).snapshots().listen((dataSnapshot) {
print(postAuthorName = dataSnapshot.documents[0].data["username"]);
setState(() {
postAuthorName = dataSnapshot.documents[0].data["username"];
});
});
String desc = reversedDocuments[index].data["post_desc"].toString();
return new ListTile(
title: Container(
child: Row(
children: <Widget>[
Expanded(
child: Card(
child: new Column(
children: <Widget>[
ListTile(
title: Text(postAuthorName, //Here, the value is not changed, it holds empty space.
style: TextStyle(
fontSize: 20.0,
),
),
subtitle: Text(desc),
),
)
了解ListView.builder()只能根据DocumentSnapshot列表渲染项目,无法处理构建器内部的查询。
经过多次研究: 我尝试了很多替代方法,例如尝试在 initState() 中构建列表,尝试使用嵌套流生成器:
return StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection('posts').snapshots(),
builder: (context, snapshot1){
return StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection("users").snapshots(),
builder: (context, snapshot2){
return ListView.builder(
itemCount: snapshot1.data.documents.length,
itemBuilder: (context, index){
String desc = snapshot1.data.documents[index].data['post_description'].toString();
String taskAuthorID = snapshot1.data.documents[index].data['post_authorID'].toString();
var usersMap = snapshot2.data.documents.asMap();
String authorName;
username.forEach((len, snap){
print("Position: $len, Data: ${snap.data["username"]}");
if(snap.documentID == post_AuthorID){
authorName = snap.data["username"].toString();
}
});
return ListTile(
title: Text(desc),
subtitle: Text(authorName), //Crashes here...
);
},
);
}
);
}
);
尝试使用 Stream Group,但无法找到完成此操作的方法,因为它只是组合了两个流,但我希望通过第一个流中的值获取第二个流。
这是我的 Firebase Collection 屏幕截图:
我知道这是一件非常简单的事情,但仍然找不到任何教程或文章来实现这一点。
为将来的人发帖,因为我花了几个小时试图弄清楚这一点 - 希望它可以拯救其他人。
首先,我建议阅读
Stream
:https://www.dartlang.org/tutorials/language/streams
这会有一点帮助,而且读起来很短
自然的想法是在外部
StreamBuilder
内部嵌套一个 StreamBuilder
,如果 ListView
的大小不会因内部 StreamBuilder
接收数据而改变,那就没问题了。当没有数据时,您可以创建一个固定大小的容器,然后在准备好时渲染数据丰富的小部件。就我而言,我想为“外部”集合和“内部”集合中的每个文档创建一个 Card
。例如,我有一个组集合,每个组都有用户。我想要这样的景色:
[
Group_A header card,
Group_A's User_1 card,
Group_A's User_2 card,
Group_B header card,
Group_B's User_1 card,
Group_B's User_2 card,
]
嵌套的
StreamBuilder
方法渲染了数据,但滚动 ListView.builder
是一个问题。滚动时,我猜测高度的计算公式为 (group_header_card_height
+ inner_listview_no_data_height
)。当内部 ListView
接收到数据时,它会扩展列表高度以适应滚动和滚动。这是不可接受的用户体验。
解决方案要点:
StreamBuilder
执行builder
之前获取。这意味着您的 Stream
需要包含来自两个集合的数据Stream
可以容纳多个物品,但您需要一个 Stream<List<MyCompoundObject>>
。对此答案的评论(https://stackoverflow.com/a/53903960/608347)有帮助我采取的方法基本上是
创建组到用户列表对的流
a.群组查询
b.对于每个组,获取适当的用户列表
c.返回包装每对的自定义对象的列表
StreamBuilder
照常,但在组到用户列表对象上而不是 QuerySnapshot
s它可能是什么样子
复合辅助对象:
class GroupWithUsers {
final Group group;
final List<User> users;
GroupWithUsers(this.group, this.users);
}
StreamBuilder
Stream<List<GroupWithUsers>> stream = Firestore.instance
.collection(GROUP_COLLECTION_NAME)
.orderBy('createdAt', descending: true)
.snapshots()
.asyncMap((QuerySnapshot groupSnap) => groupsToPairs(groupSnap));
return StreamBuilder(
stream: stream,
builder: (BuildContext c, AsyncSnapshot<List<GroupWithUsers>> snapshot) {
// build whatever
});
本质上,“对于每个组,创建一对”处理所有类型的转换
Future<List<GroupWithUsers>> groupsToPairs(QuerySnapshot groupSnap) {
return Future.wait(groupSnap.documents.map((DocumentSnapshot groupDoc) async {
return await groupToPair(groupDoc);
}).toList());
}
最后,实际的内部查询来获取
User
并构建我们的助手
Future<GroupWithUsers> groupToPair(DocumentSnapshot groupDoc) {
return Firestore.instance
.collection(USER_COLLECTION_NAME)
.where('groupId', isEqualTo: groupDoc.documentID)
.orderBy('createdAt', descending: false)
.getDocuments()
.then((usersSnap) {
List<User> users = [];
for (var doc in usersSnap.documents) {
users.add(User.from(doc));
}
return GroupWithUser(Group.from(groupDoc), users);
});
}
我发布了一个类似的问题,后来找到了解决方案:使 itemBuilder 返回的小部件有状态并在其中使用 FutureBuilder。
StreamBuilder 中每个 DocumentSnapshot 的附加查询
这是我的代码。在您的情况下,您可能希望使用新的 Stateful 小部件而不是 ListTile,因此您可以添加 FutureBuilder 来调用异步函数。
StreamBuilder(
stream: Firestore.instance
.collection("messages").snapshots(),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
case ConnectionState.waiting:
return Center(
child: PlatformProgressIndicator(),
);
default:
return ListView.builder(
reverse: true,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
List rev = snapshot.data.documents.reversed.toList();
ChatMessageModel message = ChatMessageModel.fromSnapshot(rev[index]);
return ChatMessage(message);
},
);
}
},
)
class ChatMessage extends StatefulWidget {
final ChatMessageModel _message;
ChatMessage(this._message);
@override
_ChatMessageState createState() => _ChatMessageState(_message);
}
class _ChatMessageState extends State<ChatMessage> {
final ChatMessageModel _message;
_ChatMessageState(this._message);
Future<ChatMessageModel> _load() async {
await _message.loadUser();
return _message;
}
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: FutureBuilder(
future: _load(),
builder: (context, AsyncSnapshot<ChatMessageModel>message) {
if (!message.hasData)
return Container();
return Row(
children: <Widget>[
Container(
margin: const EdgeInsets.only(right: 16.0),
child: GestureDetector(
child: CircleAvatar(
backgroundImage: NetworkImage(message.data.user.pictureUrl),
),
onTap: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) =>
ProfileScreen(message.data.user)));
},
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
message.data.user.name,
style: Theme.of(context).textTheme.subhead,
),
Container(
margin: const EdgeInsets.only(top: 5.0),
child: _message.mediaUrl != null
? Image.network(_message.mediaUrl, width: 250.0)
: Text(_message.text))
],
),
)
],
);
},
),
);
}
}
class ChatMessageModel {
String id;
String userId;
String text;
String mediaUrl;
int createdAt;
String replyId;
UserModel user;
ChatMessageModel({String text, String mediaUrl, String userId}) {
this.text = text;
this.mediaUrl = mediaUrl;
this.userId = userId;
}
ChatMessageModel.fromSnapshot(DocumentSnapshot snapshot) {
this.id = snapshot.documentID;
this.text = snapshot.data["text"];
this.mediaUrl = snapshot.data["mediaUrl"];
this.createdAt = snapshot.data["createdAt"];
this.replyId = snapshot.data["replyId"];
this.userId = snapshot.data["userId"];
}
Map toMap() {
Map<String, dynamic> map = {
"text": this.text,
"mediaUrl": this.mediaUrl,
"userId": this.userId,
"createdAt": this.createdAt
};
return map;
}
Future<void> loadUser() async {
DocumentSnapshot ds = await Firestore.instance
.collection("users").document(this.userId).get();
if (ds != null)
this.user = UserModel.fromSnapshot(ds);
}
}
有同样的问题并通过使用嵌套 StreamBuilder 解决了它。如果您不希望用户数据发生很大变化并且只需获取一次即可,那么您可以将内部 StreamBuilder 替换为 FutureBuilder:
class PostList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance.collection('posts').snapshots(),
builder: (context, postSnapshot) {
if (postSnapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator(); // Loading indicator while waiting for post data
}
if (postSnapshot.hasError) {
return Text('Error: ${postSnapshot.error}');
}
// Process the post data and build your UI
List<PostWidget> postWidgets = postSnapshot.data!.docs.map((postDoc) {
// Access post data
String postText = postDoc['text'];
// Access user reference from the post
DocumentReference userRef = postDoc['post_creator_id'];
// Using FutureBuilder for fetching user data once
return FutureBuilder<DocumentSnapshot>(
future: userRef.get(),
builder: (context, userSnapshot) {
if (userSnapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator(); // Loading indicator while waiting for user data
}
if (userSnapshot.hasError) {
return Text('Error: ${userSnapshot.error}');
}
// Access user data
Map<String, dynamic> userData = userSnapshot.data!.data() as Map<String, dynamic>;
return PostWidget(postText: postText, userData: userData);
},
);
}).toList();
return ListView(
children: postWidgets,
);
},
);
}
}