Flutter ListView嵌套GridView报RenderBox was not laid out hasSize错误求助

报错根因 #

可滚动组件嵌套时，内层的GridView默认会尝试占满父容器的最大高度，而外层的ListView本身高度是无限的，导致框架无法计算GridView的尺寸，触发hasSize断言报错。

解决方案 #

• 给GridView添加shrinkWrap: true属性：让GridView根据子元素总高度自适应自身尺寸，不会无限撑开
• 给GridView添加physics: const NeverScrollableScrollPhysics()属性：禁用GridView自身的滚动能力，让整个页面的滚动逻辑统一由外层ListView处理
• 要添加category等前置内容，直接在外层ListView的children数组最前面插入对应的组件即可

修复后完整代码 #

class HomeTab extends StatelessWidget {
  final CollectionReference _productsRef =
      FirebaseFirestore.instance.collection("Products");

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          FutureBuilder<QuerySnapshot>(
            future: _productsRef.get(),
            builder: (context, snapshot) {
              if (snapshot.hasError) {
                return Scaffold(
                  body: Center(
                    child: Text("Error: ${snapshot.error}"),
                  ),
                );
              }

         
              if (snapshot.connectionState == ConnectionState.done) {
                // Display the data inside a list view
                return ListView(children: [
                  // 这里添加你需要的category等前置内容，可自行替换为实际的分类组件
                  Container(
                    height: 100,
                    margin: EdgeInsets.only(top: 20, left: 10, right: 10),
                    child: Text("分类模块内容", style: TextStyle(fontSize: 20)),
                  ),
                  Container(
                    width: 500,
                    child: GridView.count(
                      // 新增核心修复属性
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      crossAxisCount: 2,
                      childAspectRatio: .52,
                      mainAxisSpacing: 8.0,
                      crossAxisSpacing: 10,
                      padding: EdgeInsets.only(
                          top: 20.0, bottom: 12.0, left: 5, right: 5), // 原top:130可根据实际布局调整，避免空白过多
                      children: snapshot.data.docs.map((document) {
                        final dynamic data = document.data();
                        return ProductCard(
                          price: "\$${data['price']}",
                          productId: document.id,
                        );
                      }).toList(),
                    ),
                  ),
                ]);
              }

              // Loading State
              return Scaffold(
                body: Center(
                  child: CircularProgressIndicator(),
                ),
              );
            },
          ),
        
        ],
      ),
    );
  }
}

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