底部溢出 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,
                          ),
                        ),
                      ),
                    ],
                  ),
                )