GridView.builder() 中每個項目的 Flutter-Renderflex 溢出錯誤

Question

在我的項目中，我需要顯示一個產品網格，每行 2 個。 為此，我使用 GridView.builder() 如下：

@override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text('New Arrivals'),
        const SizedBox(height: 10),
        Expanded(
          child: Consumer<HomeViewModel>(
            builder: (context, model, child) {
              if (model.state == ViewState.idle) {
                if (model.products.isEmpty) {
                  return const Center(
                    child: CircularProgressIndicator(color: Colors.black),
                  );
                }
                return GridView.builder(
                  shrinkWrap: true,
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    mainAxisSpacing: 10,
                    crossAxisSpacing: 10,
                  ),
                  itemBuilder: (context, index) =>
                      ProductItem(product: model.products[index]),
                  itemCount: model.products.length,
                );
              }
              return const Center(
                child: CircularProgressIndicator(color: Colors.black),
              );
            },
          ),
        ),
      ],
    );
  }

但是，這會導致A RenderFlex overflowed by 49 pixels on the bottom. 每個項目的錯誤。 沒有。 溢出的像素對於不同的項目是不同的。我附上了截圖以供參考。 我做錯了什么，我該如何解決？

product_item.dart ：

class ProductItem extends StatelessWidget {
  const ProductItem({Key? key, required this.product}) : super(key: key);
  final Product product;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      color: Colors.white,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: 200,
            height: 150,
            child: Image.network(product.imageUrl!),
          ),
          const SizedBox(height: 13),
          Padding(
            padding: const EdgeInsets.only(left: 8.0),
            child: Text(
              product.category!,
              softWrap: true,
              style: const TextStyle(
                fontSize: 10,
                color: Colors.deepPurple,
                height: 1.5,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 8.0),
            child: Text(
              product.title!,
              softWrap: true,
              style: const TextStyle(
                color: Colors.black54,
                fontSize: 12,
                height: 1.8,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
          const SizedBox(height: 10),
          Padding(
            padding: const EdgeInsets.only(left: 8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '\$ ${product.price!}',
                  style: const TextStyle(
                    color: Colors.black,
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                    height: 2.4,
                  ),
                ),
                Image.asset('assets/icons/cart_icon.png',
                    width: 40, height: 40),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

問題“應該”在於：

      Padding(
        padding: const EdgeInsets.only(left: 8.0),
        child: Text(
          product.title!,
          softWrap: true,
          style: const TextStyle(
            color: Colors.black54,
            fontSize: 12,
            height: 1.8,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),

嘗試使用： AutoSizeText而不是 Text

  Padding(
    padding: const EdgeInsets.only(left: 8.0),
    child: AutoSizeText(
      product.title!,
      softWrap: true,
      maxLines: 1,
      style: const TextStyle(
        color: Colors.black54,
        fontSize: 12,
        height: 1.8,
        fontWeight: FontWeight.w500,
      ),
    ),
  ),

Answer 2

GridView上的默認childAspectRatio為 1。 出現問題是因為它不適合正方形。 項目的大小取決於屏幕寬度。 而寬度是控制高度，=> 縱橫比。

您可以使用childAspectRatio:width/height來調整網格項的大小。 或者，您可以按照@Maurizio Mancini 的回答。

gridDelegate:
    SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 2,
  childAspectRatio: 3 / 4,//this
),

Answer 3

我已經使用你的代碼重現了這個問題。 如果我理解您的需求正確，這里是修復：

• 主要問題與 childAspectRatio 有關。

   return GridView.builder( shrinkWrap: true, gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, mainAxisSpacing: 10, crossAxisSpacing: 10, childAspectRatio: 0.75, ), itemBuilder: (context, index) => ProductItem(product: model.products[index]), itemCount: model.products.length, );

• 所以你需要設置與此類似的縱橫比來解決問題。

您可以通過GitHub訪問工作源代碼。