如何解决如何在Streambuilder中将行转换为GridView
我目前有一个嵌套在SingleChildScrollView内的StreamBuilder,它返回一行小部件,这些小部件可沿水平轴滚动。我想将其更改为带有crossAxisCount: 2
的GridView,它可以沿垂直轴滚动。请问有关如何执行此操作的任何想法?
这是我当前的代码:
SingleChildScrollView(
scrollDirection: Axis.horizontal,child: StreamBuilder<QuerySnapshot> (
stream: _firestore
.collection('recipes')
.where('favouritedBy',arrayContains: widget.userEmail)
.snapshots(),builder: (context,snapshot) {
if (snapshot.hasError) {
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.lightBlueAccent,),);
}
if (snapshot.data == null) {
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.lightBlueAccent,);
}
final recipes = snapshot.data.documents;
List<Widget> recipeWidgets = [];
for (var recipe in recipes) {
final recipeTitle = recipe.data['recipeTitle'];
final ingredients = recipe.data['ingredients'];
final videoID = recipe.data['videoID'];
final youtubeURL = recipe.data['youtubeURL'];
final method = recipe.data['method'];
final thumbnail = recipe.data['thumbnail'];
final recipeID = recipe.data['recipeID'];
final favouritedBy = recipe.data['favouritedBy'];
final recipeWidget = FavouritesRecipeCard(
recipeTitle: recipeTitle,videoID: videoID,youtubeURL: youtubeURL,recipeID: recipeID,favouritedBy: favouritedBy,method: method,ingredients: ingredients,thumbnail: thumbnail,);
recipeWidgets.add(recipeWidget);
}
return Row(
children: recipeWidgets,); //This is the Row I would like to change to be a GridView instead
}),
解决方法
return Row(
GridView.builder(
itemCount: snapshot.data.length,gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3),itemBuilder: (BuildContext context,int index) {
return new Card(
child: new GridTile(
footer: new Text(snapshot.data.documentsp[index].data()[key]),child: new Text(snapshot.data.documentsp[index].data()[key]),),);
},);
,
问题解决了!解决方法如下:
我刚刚将Row更改为GridView.count小部件:
return GridView.count(
physics: NeverScrollableScrollPhysics(),shrinkWrap: true,crossAxisCount: 2,crossAxisSpacing: 10.0,mainAxisSpacing: 10.0,children: recipeWidgets,);
希望这对以后的人有帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。