flutter - 使用 Grid.count 列出时，底部在列内溢出

Question

我的列有问题，在列内我有 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));
                                                }
                                              });
                                        }),
                                      )),

标签： fluttergridviewoverflow

Answer 1

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

只需要在GridView.count里面写这行代码

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