Question

<块引用>

我尝试使用 SingleChildScrollView，因为它是在颤振文档，我无法让错误消失，我试过了一切都没有发生，我该如何解决这个错误？

错误文本：

<块引用>

右侧的 RenderFlex 溢出了 99889 像素。有关的导致错误的小部件是 GridTileBar

图像错误：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:shop/providers/cart.dart';
import '../providers/product.dart';
import 'package:shop/utils/app_routes.dart';

class ProductItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Product product = Provider.of<Product>(context, listen: false);
    final Cart cart = Provider.of<Cart>(context, listen: false);

    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: GridTile(
        child: GestureDetector(
          onTap: () {
            Navigator.of(context).pushNamed(
              AppRoutes.PRODUCT_DETAIL,
              arguments: product,
            );
          },
          child: Image.network(
            product.imageUrl,
            fit: BoxFit.cover,
          ),
        ),
        footer: SingleChildScrollView(
          child: Flexible(
            child: GridTileBar(
              backgroundColor: Colors.black87,
              leading: Consumer(
                builder: (ctx, product, _) => IconButton(
                  icon: Icon(product.isFavorite
                      ? Icons.favorite
                      : Icons.favorite_border),
                  color: Theme.of(context).accentColor,
                  onPressed: () {
                    product.toggleFavorite();
                  },
                ),
              ),
              title: Text(
                product.title,
                textAlign: TextAlign.center,
              ),
              trailing: IconButton(
                icon: Icon(Icons.shopping_cart),
                color: Theme.of(context).accentColor,
                onPressed: () {
                  cart.addItem(product);
                  print(cart.itemCount);
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

如果你进一步阅读你的错误，你很可能会看到一条注释，提到“领先”占据了它的最大空间。改成这样：

leading: SizedBox(width:MediaQuery.of(context).size.width *.020, 
          child: Consumer(
                builder: (ctx, product, _) => IconButton(
                  icon: Icon(product.isFavorite
                      ? Icons.favorite
                      : Icons.favorite_border),
                  color: Theme.of(context).accentColor,
                  onPressed: () {
                    product.toggleFavorite();
                  },
                ),
              ),
             ),

如何修复右侧 99889 像素溢出的 RenderFlex？

1 个答案: