如何修复 flutter 应用程序中的小部件渲染问题

Question

我遇到了那个臭名昭著的错误，我无法解决。

RenderBox was not laid out: RenderRepaintBoundary#03a24 relayoutBoundary=up14 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 2001 pos 12: 'hasSize

我尝试了各种小部件包装。 错误在 Container() 上。 在那个容器中，我试图显示 10 个最新产品，水平滚动，并从 firestore 数据库中获取。 下面，我显示了插座列表，垂直滚动，它们不会造成任何问题，显示类别的水平滚动小部件也不会造成任何问题。

我有一个标签屏幕，在 TabView 中我有这个 class：

class UserHomeMerch extends StatefulWidget {

UserHomeMerch({Key? key}) : super(key: key);
@override
UserHomeMerchState createState() => UserHomeMerchState();
}

Class UserHomeMerchState extends State<UserHomeMerch> {
@override
Widget build(BuildContext context) {
final outletData = Provider.of<OutletData>(context);
return GestureDetector(
  onTap: () {
    FocusScope.of(context).unfocus();
  },
  child: Scaffold(
    body:  Stack(
        children: <Widget>[
    Container(
    decoration: const BoxDecoration(
    image: DecorationImage(image: AssetImage("assets/images/background.jpg"),
    fit: BoxFit.cover,),
),
),
          FutureBuilder(
      future: outletData.getAllOutlets(context),
      builder: (ctx, AsyncSnapshot snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting ||
            snapshot.data == null) {
          return Center(
            child: CircularProgressIndicator(color: color4),
          );
        }
        var sd = snapshot.data;
        return SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Text(
                  Languages.of(context)!.category+':',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 21,
                    color: color1,
                  ),
                ),
              ),
              Categories(),
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Text(
                  Languages.of(context)!.newProducts,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 21,
                    color: color1,
                  ),
                ),
              ),
              Container( =====> this is the error line
                height: 250,
                child: StreamBuilder<QuerySnapshot>(
                  stream: productsRef
                      .orderBy('timestamp', descending: true)
                      .limit(10)
                      .snapshots(),
                  builder: (context, snapshot) {
                    return (snapshot.connectionState == ConnectionState.waiting)
                        ? Center(child: CircularProgressIndicator(color: color4,))
                        : ListView.builder(
                        physics: NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        scrollDirection: Axis.horizontal,
                        itemCount: snapshot.data!.docs.length,
                        itemBuilder: (context, index) {
                          DocumentSnapshot data = snapshot.data!.docs[index];
                          return ProductItem(
                              productId: data[productId],
                              productName: data[productName],
                              productDescription: data[prodDesc],
                              productPrice: data[productPrice],
                              count: data[countInStock],
                              images: data['productImagesUrl'],
                              outletID: data[outletId],
                              merchId: data[merchantId]
                          );
                        });
                  },
                )),
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Text(
                  Languages.of(context)!.producers+':',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 21,
                    color: color1,
                  ),
                ),
              ),
              sd.length == 0
                  ? Center(
                child: Text(Languages.of(context)!.noOrg),
              )
                  : ListView.builder(
                padding: EdgeInsets.zero,
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemBuilder: (ctx, index) {
                  return OutletItem(
                    outletName: sd[index][outletName],
                    id: sd[index][outletId],
                    category: sd[index][category],
                    outletImage: sd[index][outletImg],
                    outletRating: sd[index][outletRating],
                    merchId: sd[index][merchantId],
                  );
                },
                itemCount: sd.length,
              ),
            ],
          ),
        );
      },
    ),
  ]),
));
}
}

我的 productItem 小部件是一张卡片，点击显示 bottomModal，这里是：

class ProductItem extends StatelessWidget {
final String productId;
final String productName;
final String productDescription;
final num productPrice;
final num count;
final List<dynamic> images;
final String outletID, merchId;

ProductItem(
  {required this.productId,
  required this.productName,
  required this.productDescription,
  required this.productPrice,
  required this.count,
  required this.images,
  required this.outletID,
  required this.merchId});

@override
Widget build(BuildContext context) {
return Padding(
  padding: EdgeInsets.symmetric(horizontal: 20),
  child: Card(
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30)),
    elevation: 20,
    color: color2.withOpacity(0.5),
    shadowColor: color2.withOpacity(0.2),
    child: Column(
      children: [
        Container(
          alignment: Alignment.center,
          child: Image.network(
            images.first,
            //height: 500,
            //width: 500,
            fit: BoxFit.cover,
          ),
          height: 250,
          //width: 100,
        ),
        ListTile(
          selectedColor: Colors.white70,
          title: Text(
            productName,
            overflow: TextOverflow.fade,
            softWrap: true,
            style: TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
          subtitle: Text(
            "₮ ${NumberFormat.decimalPattern().format(productPrice)}",
          ),
          trailing: TextButton.icon(
            onPressed: () {
              showModal(context, productId, productName, productDescription, productPrice, images, count, outletID, merchId);
            },
            icon: Icon(
              Icons.add,
              color: Colors.black54,
            ),
            label: Text(
              Languages.of(context)!.seeProf,
            ),
            style: ButtonStyle(
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                  side: BorderSide(
                    color: Colors.black54,
                  ),
                ),
              ),
            ),
          ),
        ),
        Divider(thickness: 2),
      ],
    ),
  ),
);
}
}

请帮我解决这个问题。 非常感谢您！

Answer 1

我认为错误出在第二个列表视图生成器上。 尝试用 Expanded 小部件包装它。 如果不是，并且您 100% 确定它在水平列表视图构建器上，请尝试给容器一个宽度并用扩展小部件包装列表视图构建器。

我希望这有帮助