Flutter RenderBox未布局：（StaggeredGridView小部件）

我犯了一个错误，上面说

RenderBox was not laid out: RenderViewport#b889d NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1702 pos 12: 'hasSize'

下面是错误的描述

The following assertion was thrown during performResize():
Vertical viewport was given unbounded height.
Viewports expand in the scrolling direction to fill their container. In this case, a vertical
viewport was given an unlimited amount of vertical space in which to expand. This situation
typically happens when a scrollable widget is nested inside another scrollable widget.
If this widget is always nested in a scrollable widget there is no need to use a viewport because
there will always be enough vertical space for the children. In this case, consider using a Column
instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
the height of the viewport to the sum of the heights of its children.
The relevant error-causing widget was:
  StaggeredGridView 

正如错误描述中明确提到的，问题在于StaggedGridView。我在使用ListView时遇到了类似的错误，但可以通过使用Expanded将其包装来修复。如何克服此错误

这是我的密码

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:transparent_image/transparent_image.dart';

class Food extends StatefulWidget {
  static const routeName = '/food';

  @override
  _FoodState createState() => _FoodState();
}

class _FoodState extends State<Food> {
  List<String> imageList = [
    "assets/images/food.jpg",
    "assets/images/food.jpg",
    "assets/images/food.jpg",
    "assets/images/food.jpg",
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(244, 243, 243, 1),
      appBar: AppBar(
        title: Text("Food"),
        elevation: 0,
        brightness: Brightness.light,
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.white,
                ),
                padding: EdgeInsets.all(20.00),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "Find your favourite",
                      style: TextStyle(
                        color: Colors.black87,
                        fontSize: 25,
                      ),
                    ),
                    SizedBox(
                      height: 3,
                    ),
                    Text(
                      "Food",
                      style: TextStyle(
                        color: Colors.black87,
                        fontSize: 40,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Container(
                      margin: EdgeInsets.all(12),
                      child: Expanded(
                        child: new StaggeredGridView.countBuilder(
                          crossAxisCount: 2,
                          crossAxisSpacing: 12.0,
                          mainAxisSpacing: 12.0,
                          itemBuilder: (context, index) {
                            return Container(
                                decoration: BoxDecoration(
                                  color: Colors.transparent,
                                  borderRadius: BorderRadius.circular(20),
                                ),
                                child: ClipRRect(
                                  borderRadius: BorderRadius.circular(20),
                                  child: FadeInImage.memoryNetwork(
                                    placeholder: kTransparentImage,
                                    image: imageList[index],
                                  ),
                                ));
                          },
                          staggeredTileBuilder: (index) {
                            return new StaggeredTile.count(
                                1, index.isEven ? 1.2 : 1.0);
                          },
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“包：颤振交错网格视图/颤振交错网格视图.省道”；
导入“package:transparent_image/transparent_image.dart”；
类食品扩展了StatefulWidget{
静态常量routeName='/food'；
@凌驾
_FoodState createState（）；
}
类_FoodState扩展状态{
列表图像列表=[
“assets/images/food.jpg”，
“assets/images/food.jpg”，
“assets/images/food.jpg”，
“assets/images/food.jpg”，
];
@凌驾
小部件构建（构建上下文）{
返回脚手架(
背景颜色：颜色。来自RGBO（2442432431），
appBar:appBar(
标题：文本（“食品”），
海拔：0，
亮度：亮度，亮度，
),
正文：安全区(
子：SingleChildScrollView(
子：列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
容器(
宽度：double.infinity，
装饰：盒子装饰(
颜色：颜色，白色，
),
填充：所有边缘设置（20.00），
子：列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
正文(
“找到你最喜欢的”，
样式：TextStyle(
颜色：颜色。黑色87，
尺寸：25，
),
),
大小盒子(
身高：3，
),
正文(
“食物”，
样式：TextStyle(
颜色：颜色。黑色87，
尺寸：40，
fontWeight:fontWeight.bold，
),
),
大小盒子(
身高：20，
),
容器(
保证金：所有（12），
儿童：扩大(
子项：新建EdgridView.countBuilder(
交叉轴计数：2，
横轴间距：12.0，
主轴间距：12.0，
itemBuilder：（上下文，索引）{
返回容器(
装饰：盒子装饰(
颜色：颜色。透明，
边界半径：边界半径。圆形（20），
),
孩子：ClipRRect(
边界半径：边界半径。圆形（20），
子项：FadeInImage.memoryNetwork(
占位符：K透明图像，
图像：图像列表[索引]，
),
));
},
交错文件生成器：（索引）{
返回新的交错文件.count(
1，指数为1.2:1.0）；
},
),
),
)
],
),
),
],
),
),
),
);
}
}

---

提前谢谢你

从错误中可以看出，您可以在GridView中使用

shrinkwrap

属性：

shrinkwrap:true

您将不得不使用切片。使用CustomScrollView、SliverToBoxAdapter和SliverStaggeredGrid.CountBuilder从错误中可以使用GridView中的

shrinkwrap

属性：

shrinkwrap:true

您将不得不使用片段。使用CustomScrollView、SliverToBoxAdapter和SliverTaggeredGrid.countBuilder