底部溢出 125 个像素的 RenderFlex

Question

我正在构建一个用于配送饮料的 Flutter 电子商务应用程序。 我的愿望清单页面有问题。 我收到一个错误，上面写着“Renderflex 在底部溢出了 125 个像素”。 错误是说它是由 Column 小部件引起的。我尝试了不同的方法，包括 Expanded 小部件和 Sizebox 小部件，但没有运气。 请任何人都可以提供帮助。

这表明它在底部溢出了125个像素

这是导致错误的代码：

Container(
                height: 1500.0,
                width: double.infinity,
                child: Column(
                  children: [
                    const Text(
                      'My Favourites',
                      style: TextStyle(fontSize: 40.0),
                    ),
                    GridView.builder(
                      shrinkWrap: true,
                      itemCount: favItems.length,
                      itemBuilder: ((context, index) {
                        return ProductItem(
                            id: favItems[index].id,
                            bottleName: favItems[index].bottleName,
                            imgUrl: favItems[index].image,
                            price: favItems[index].price,
                            bottle: favItems[index]);
                      }),
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        childAspectRatio: itemWidth / itemHeight,
                      ),
                    ),
                  ],
                ),
              ));

Answer 1

使用灵活小部件包装 GridView.builder。 列抛出异常，因为它不知道 GridView 的高度

Container(
  height: 1500.0,
  width: double.infinity,
  child: Column(
    children: [
      const Text(
        'My Favourites',
        style: TextStyle(fontSize: 40.0),
      ),
      Flexible(child: 
        GridView.builder(
          shrinkWrap: true,
          itemCount: favItems.length,
          itemBuilder: ((context, index) {
            return ProductItem(
              id: favItems[index].id,
              bottleName: favItems[index].bottleName,
              imgUrl: favItems[index].image,
              price: favItems[index].price,
              bottle: favItems[index]);
          }),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: itemWidth / itemHeight,
          ),
        )),
    ],
  ),
));

Answer 2

用 Expanded 小部件包装网格视图构建器，它将正常工作

Answer 3

包装你的GridView.builder(与Expanded(它会为你工作。

Container(
                  height: 1500.0,
                  width: double.infinity,
                  child: Column(
                    children: [
                      const Text(
                        'My Favourites',
                        style: TextStyle(fontSize: 40.0),
                      ),
                      Expanded(
                        child: GridView.builder(
                          shrinkWrap: true,
                          itemCount: favItems.length,
                          itemBuilder: ((context, index) {
                            return ProductItem(
                                id: favItems[index].id,
                                bottleName: favItems[index].bottleName,
                                imgUrl: favItems[index].image,
                                price: favItems[index].price,
                                bottle: favItems[index]);
                          }),
                          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 2,
                            childAspectRatio: itemWidth / itemHeight,
                          ),
                        ),
                      ),
                    ],
                  ),
                )