GridView.builder()中每個專案的Flutter-Renderflex溢位錯誤

在我的專案中，我需要顯示一個產品網格，每行 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),
              ],
            ),
          )
        ],
      ),
    );
  }
}

uj5u.com熱心網友回復：

問題“應該”在于：

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

uj5u.com熱心網友回復：

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

您可以使用childAspectRatio:width/height. 或者，您可以按照@Maurizio Mancini 的回答。

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

uj5u.com熱心網友回復：

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

• 主要問題與 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訪問作業源代碼。

標籤：扑 镖 网格视图 颤振布局

上一篇：如何將多行與ResponsiveDatatable一起使用？

下一篇：Flutter：點擊圖示上的鏈接