arrays - 如何使用 StreamBuilder 显示来自 firestore 文档的数据列表
问题描述
我希望能够从 firestore 数据库中文档内的数组创建列表。
我的数据库是这样的:
我希望能够从videosUrl
数组内的 url 创建一个 streamBuilder 网格。
我尝试了很多东西,但我想最好的方法是这样的:
StreamBuilder <List<DocumentSnapshot>>(
stream: Firestore.instance
.collection('events')
.document('-LeH4rspnPTpeTLdt8hs')
.collection('participants')
.document('-LeL_TSfFDfqKgm-Io9T')
.snapshots().asyncMap((snap) async {
List<String> videosUrlArray = snap.data['videosUrl'];
var videoUrlList = <DocumentSnapshot>[];
for (var videoUrlPath in videosUrlArray) {
videoUrlList.add(await Firestore.instance.document(videoUrlPath).get());
}
print(videoUrlList);
return videoUrlList;
}),
builder: (BuildContext context, AsyncSnapshot<List<DocumentSnapshot>> snapshot) {
if (snapshot.hasError)
return new Text('Error: ${snapshot.error}');
switch (snapshot.connectionState) {
case ConnectionState.waiting: return _showLoading();
default:
return new GridView(
reverse: false,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
children: snapshot.data.map((DocumentSnapshot document) {
return Text('${snapshot.data}');
}).toList(),
);
}
},
)
但我仍然无法访问数据!
解决方案
我用下面的代码解决了这个问题:
Widget buildGridFilesToExport(){
return new StreamBuilder(
stream: Firestore.instance
.collection('users')
.document(dataUserGlobal.userAdminId)
.collection('events')
.document(dataUserGlobal.eventId)
.snapshots(),
builder: (context, snapshot) {
print(snapshot);
if (snapshot.hasError)
return new Text('Error: ${snapshot.error}');
switch (snapshot.connectionState) {
case ConnectionState.waiting: return new Text('Loading...');
default:
List videosList = snapshot.data['thumbnailsUrl'];
return
videosList != null ?
new GridView.count(
crossAxisCount: 2,
childAspectRatio: 1,
children: List.generate(snapshot.data['thumbnailsUrl'].length, (index) {
return Container(
padding: EdgeInsets.all(5.0),
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 2.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
image: DecorationImage(
image: NetworkImage(snapshot.data['thumbnailsUrl'][index]),
fit: BoxFit.cover,
),
),
),
],
)
);
}),
)
:
Center(
child: Container(
width: 300,
child: Text(
'Ancora nessun video!\nVai nella cartella amici e accetta i loro video!',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'acumin-pro',
fontSize: 22,
),
),
)
);
}
},
);
}
推荐阅读
- javascript - JS 控制台 if...else 中的任何选项
- kotlin - Kotlin:使用 Nullability 注释 Java 库时设置默认值
- javascript - Angular如何防止在下拉列表中手动输入?
- python - Python 中位数的中位数不在 O(n) 中运行
- abp - 如何使用 abp.io 禁用注册
- menu - 自定义存档页面的菜单中没有 WPML 语言切换器
- python - 在 matplotlib 中分段更改 x 轴刻度
- python - 单击按钮后如何将输入值(TKinter)传递给其他类中的函数并使用传递的值运行函数
- node.js - 错误:使用 Nestjs + Graphql + Typeorm 时无法确定 GraphQL 输入类型
- python - 正则表达式或不起作用 - 我不知道我的模式有什么问题