用Grid.count列出时,底部在列内溢出

时间:2020-06-13 15:02:51

标签: flutter gridview overflow

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

1 个答案:

答案 0 :(得分:1)

此帖子的最终解决方案 Give a height to the child of GridView

只需在GridView.count内编写此行代码

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