使用 Grid.count 列出时底部溢出列内

Bottom overflowed inside column while listing with Grid.count

提问人:Rock 提问时间:6/13/2020 最后编辑:Rock 更新时间:6/14/2020 访问量:6576

问:

enter image description here

我的列有问题,在列内我有 3 个容器。第一个里面有图片,另外两个有文字。例如,对于第一个容器,我想应用 100 这样的高度。但是我可以应用的最大值是 60,然后它给底部溢出。我正在使用 Grid.count 制作网格视图并使用 List.genarate 列出它们。 PS:加大包装影响第一个容器高度,容器没有固定高度 这是我的代码:

Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                height: 90,
                decoration: BoxDecoration(
                  color: Theme.of(context).primaryColor,
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  boxShadow: [
                    BoxShadow(
                        color: Theme.of(context).focusColor.withOpacity(0.9),
                        blurRadius: 4,
                        offset: Offset(0, 2)),
                  ],
                ),
                width: 90,
                child: Hero(
                  tag: widget.heroTag + widget.product.id,
                  child: Padding(
                    padding: const EdgeInsets.all(6.0),
                    child: CachedNetworkImage(
                      height: 90,
                      fit: BoxFit.fill,
                      imageUrl: this.widget.product.imageUrl,
                      placeholder: (context, url) => Image.asset(
                        'assets/img/loading.gif',
                        fit: BoxFit.cover,
                        height: 150,
                      ),
                      errorWidget: (context, url, error) => Icon(Icons.error),
                    ),
                  ),
                ),
              ),
              Center(
                child: Container(
                  width: 90,
                  child: Text(
                    widget.product.name,
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 11, fontWeight: FontWeight.bold),
                    overflow: TextOverflow.ellipsis,
                    maxLines: 2,
                  ),
                ),
              ),
              Center(
                child: Container(
                  child: Text(
                    " ${widget.product.salePrice.toString()} Ft ",
                    style: TextStyle(
                        color: Colors.blue[800],
                        fontSize: 13,
                        fontWeight: FontWeight.bold),
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              )
            ],
          ),

在这里,我用grid.count和list.genearte列出它们:

                            GridView.count(
                                        scrollDirection: Axis.vertical,
                                        shrinkWrap: true,
                                        primary: false,
                                        mainAxisSpacing: 15.0,
                                        //   crossAxisSpacing: 4.0,
                                        padding: EdgeInsets.symmetric(
                                            vertical: 15),
                                        crossAxisCount:
                                            MediaQuery.of(context)
                                                        .orientation ==
                                                    Orientation.portrait
                                                ? 3
                                                : 3,
                                        children: List.generate(
                                            _con.subCategories
                                                .elementAt(0)
                                                .products
                                                .length, (index) {
                                          return ProductGridItemWidget(
                                              heroTag: 'product-grid' +
                                                  0.toString() +
                                                  index.toString(),
                                              product: _con.subCategories
                                                  .elementAt(0)
                                                  .products
                                                  .elementAt(index),
                                              onPressed: () {
                                                {
                                                  _con.addToCart(_con
                                                      .subCategories
                                                      .elementAt(0)
                                                      .products
                                                      .elementAt(index));
                                                }
                                              });
                                        }),
                                      )),
Flutter GridView 溢出

评论

0赞 Jitesh Mohite 6/13/2020
在 Gridview 上添加扩展小部件,然后选中
1赞 Rock 6/13/2020
尝试不工作。我不明白在列内它溢出

答:

9赞 Rock 6/14/2020 #1

终于从这篇文章中找到了解决方案:给 GridView 的孩子一个高度

只需要在 GridView.count 中编写这一行代码即可

childAspectRatio: MediaQuery.of(context).size.width /
              (MediaQuery.of(context).size.height / 4),

评论

0赞 Raymond Holmboe 6/19/2023
我不得不拆除高度分隔器,然后一切正常。有趣的是,您必须在任何小部件上显式设置纵横比