如何在 GridView 中增加卡片大小答案

【问题标题】：How to increase Card size inside GridView如何在 GridView 中增加卡片大小
【发布时间】：2020-06-24 19:34:15
【问题描述】：

这是我的代码：

 GridView.count(
              padding: EdgeInsets.only(left: 10.0, right: 10.0),
              crossAxisCount: 3,

              crossAxisSpacing: 4.0,
              mainAxisSpacing: 4.0,
              primary: false,
              shrinkWrap: true,
              children: tempSearchStore.map((element) {
                return  InkWell(
                  onTap: (){
                    print(element['ID'].toString());
                    
                    Navigator.push(context, MaterialPageRoute(
                      builder: (context) => SearchResultScreen(ID: element['ID'],Pin:widget.pin),
                    ));

                  },
                  
                  child: Container(
                    height: 20,
                    child: Card(
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
                        elevation: 5.0,
                        child: Container(
                          height: 20,
                            child: Center(
                                child: Text(element['Name'],
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    color: Colors.black,
                                    fontSize: 20.0,
                                  ),
                                )
                            )
                        )
                    ),
                  ),
                );
              }).toList()
          )

我想改变卡片的高度和宽度，但我不能这样做，即使我也尝试将卡片包装到容器中并给出高度和宽度但失败了。只有我能够通过更改 GridView 中 CrossAxisCount 的值来进行更改，并且它也会根据自身进行更改。

这是我的图片：

我希望它的高度更大，宽度也可以。

【问题讨论】：

尝试 shrinkwrap = false 然后增加你的容器高度
您尝试过使用MediaQuery 吗？它使您能够设置给定的数据（大小）。如果没有，您可以简单地从 GridView.count 分配 childAspectRatio
@R7G，出现此错误“RenderBox 未布置：RenderViewport#d138c NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE”“断言失败：第 1687 行 pos 12：'hasSize' "
@vinipx，谢谢伙计，这成功了。

标签： flutter dart flutter-layout

【解决方案1】：

关键是childAspectRatio。此值用于确定 GridView 中的布局。为了获得所需的方面，您必须将其设置为 (itemWidth / itemHeight)。

GridView.count(
              padding: EdgeInsets.only(left: 10.0, right: 10.0),
              crossAxisCount: 3,
              childAspectRatio: (itemWidth / itemHeight),
              crossAxisSpacing: 4.0,
              mainAxisSpacing: 4.0,
              primary: false,
              shrinkWrap: true,
              children: tempSearchStore.map((element) {
                return  InkWell(
                  onTap: (){
                    print(element['ID'].toString());
                    
                    Navigator.push(context, MaterialPageRoute(
                      builder: (context) => SearchResultScreen(ID: element['ID'],Pin:widget.pin),
                    ));

                  },
                  
                  child: Container(
                    height: 20,
                    child: Card(
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
                        elevation: 5.0,
                        child: Container(
                          height: 20,
                            child: Center(
                                child: Text(element['Name'],
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    color: Colors.black,
                                    fontSize: 20.0,
                                  ),
                                )
                            )
                        )
                    ),
                  ),
                );
              }).toList()
          )

如果这对你不起作用，请查看这个包：https://pub.dartlang.org/packages/flutter_staggered_grid_view

【讨论】：