如何在 Streambuilder 中将行转换为 GridView

Question

我目前有一个 StreamBuilder 嵌套在 SingleChildScrollView 中，returns 一行小部件，可沿水平轴滚动。我想将其更改为 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
                  }),
            ),

Answer 1

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]), 
      ),
    );
   },
  ),
);

Answer 2

问题解决了！解决方法如下：

我刚刚将行更改为 GridView.count 小部件：

return GridView.count(
                  physics: NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  crossAxisCount: 2,
                  crossAxisSpacing: 10.0,
                  mainAxisSpacing: 10.0,
                  children: recipeWidgets,
                );

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

如何在 Streambuilder 中将行转换为 GridView

How to convert a Row to a GridView in Streambuilder

flutter

dart

gridview

stream-builder

singlechildscrollview