如何修复Flutter应用中RenderBox未布局的Widget渲染错误

错误信息 #

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

错误原因 #

1. 子Widget高度超出父容器约束：ProductItem中的图片Container设置了height:250，但外层承载产品列表的Container同样设置了height:250，再加上ProductItem内部的ListTile和Divider，整体高度超过父容器的垂直约束，导致布局计算失败。
2. ListView配置冲突：水平滚动的ListView设置了shrinkWrap: true（让ListView自适应子项大小）和NeverScrollableScrollPhysics()（禁用滚动），前者与父容器的固定高度冲突，后者违背了水平滚动的需求。

修复方案 #

1. 调整ProductItem的高度约束 #

修改ProductItem中图片容器的高度，确保整体Widget高度适配父容器的250限制：

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(
          mainAxisSize: MainAxisSize.min, // 让Column仅占用子项所需空间
          children: [
            Container(
              alignment: Alignment.center,
              child: Image.network(
                images.first,
                fit: BoxFit.cover,
                errorBuilder: (context, error, stackTrace) => Icon(Icons.error), // 添加错误占位图
              ),
              height: 160, // 减小图片容器高度，留出ListTile和Divider的空间
            ),
            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),
          ],
        ),
      ),
    );
  }
}

2. 修正水平ListView的配置 #

移除冲突的配置，恢复水平滚动的正常行为：

// 原错误位置的Container代码修改
Container(
  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(
              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]
                );
              });
    },
  ),
),

内容的提问来源于stack exchange，提问作者HaKim