如何在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,);

希望这对以后的人有帮助！