Android 颤振：如何修复；像素溢出的RenderFlex“；错误？

我在我的

flatter

应用程序中使用

GridView

来显示图像及其标题。请检查下面的代码

import 'package:flutter/material.dart';

import '../common_ui/search_bar.dart';

class PurchaseProductsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return PurchaseProductsUI();
  }
}

class PurchaseProductsUI extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _PurchaseProductUIState();
  }
}

class _PurchaseProductUIState extends State<PurchaseProductsUI> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[
        Container(
          margin: EdgeInsets.all(20),
          child: SearchBar(),
        ),
        Container(
            margin: EdgeInsets.all(20),
            child: GridView.builder(
                physics: ScrollPhysics(), // to disable GridView's scrolling
                shrinkWrap: true,
                itemCount: 20,
                gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2),
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                      padding: EdgeInsets.all(5), child: _buildImageBoxes());
                })),
      ],
    );
  }

  Widget _buildImageBoxes() {
    return 
   Column(
      children: <Widget>[
        Container(
          child: Image.network("https://picsum.photos/200/300/?random"),
        ),
        Container(
          padding: EdgeInsets.all(10),
          child:  Text("Text"),        )
      ],
    );

  }
}

导入“包装：颤振/材料.省道”；
导入“../common_ui/search_bar.dart”；
类PurchaseProductsPage扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
//TODO:实现构建
返回PurchaseProductsUI（）；
}
}
类PurchaseProductsUI扩展StatefulWidget{
@凌驾
状态createState（）{
//TODO:实现createState
返回_PurchaseProductUIState（）；
}
}
类_PurchaseProductUIState扩展状态{
@凌驾
小部件构建（构建上下文）{
//TODO:实现构建
返回列表视图(
儿童：[
容器(
保证金：全部（20），
子项：搜索栏（），
),
容器(
保证金：全部（20），
子项：GridView.builder(
物理：ScrollPhysics（），//禁用GridView的滚动
收缩膜：对，
物品计数：20，
gridDelegate:新SliverGridDelegateWithFixedCrossAxisCount(
交叉轴计数：2），
itemBuilder:（构建上下文，int索引）{
返回容器(
填充：EdgeInsets.all（5），子项：_buildImageBox（））；
})),
],
);
}
小部件_buildImageBox（）{
返回
纵队(
儿童：[
容器(
子项：Image.network（“https://picsum.photos/200/300/?random"),
),
容器(
填充：边缘设置。全部（10），
子项：文本（“文本”），）
],
);
}
}

当我运行上述代码时，我得到以下错误和UI

I/flutter ( 2743): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 2743): The following message was thrown during layout:
I/flutter ( 2743): A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter ( 2743): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 2743): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter ( 2743): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter ( 2743): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter ( 2743): This is considered an error condition because it indicates that there is content that cannot be
I/flutter ( 2743): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter ( 2743): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter ( 2743): like a ListView.
I/flutter ( 2743): The specific RenderFlex in question is:
I/flutter ( 2743):   RenderFlex#4a1bb OVERFLOWING
I/flutter ( 2743):   creator: Column ← Padding ← Container ← RepaintBoundary-[<14>] ← IndexedSemantics ←
I/flutter ( 2743):   NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← SliverGrid ←
I/flutter ( 2743):   MediaQuery ← SliverPadding ← ShrinkWrappingViewport ← ⋯
I/flutter ( 2743):   parentData: offset=Offset(5.0, 5.0) (can use size)
I/flutter ( 2743):   constraints: BoxConstraints(w=150.0, h=150.0)
I/flutter ( 2743):   size: Size(150.0, 150.0)
I/flutter ( 2743):   direction: vertical
I/flutter ( 2743):   mainAxisAlignment: start
I/flutter ( 2743):   mainAxisSize: max
I/flutter ( 2743):   crossAxisAlignment: center
I/flutter ( 2743):   verticalDirection: down
I/flutter ( 2743): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter ( 2743): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom.
Reloaded 0 of 446 libraries in 1,179ms.

I/颤振（2743）：══╡ 呈现库捕获到异常╞═════════════════════════════════════════════════════════
I/flatter（2743）：在布局过程中抛出以下消息：
I/flatter（2743）：底部的RenderFlex溢出111个像素。
I/颤振（2743）：溢出的RenderFlex具有轴垂直方向。
I/flatter（2743）：溢出的RenderFlex的边缘在渲染中已用黄色和黄色标记
I/flatter（2743）：黑色条纹图案。这通常是由于RenderFlex的内容太大造成的。
I/flflt（2743）：考虑应用Flex因子（例如使用扩展小部件）来强迫孩子们
I/颤振（2743）：RenderFlex适合可用空间，而不是按照其自然大小进行调整。
I/flatter（2743）：这被认为是一种错误情况，因为它表明存在无法删除的内容
I/颤振（2743）：已看到。如果内容合法地大于可用空间，考虑将其剪辑为
I/flatter（2743）：将ClipRect小部件放入flex或使用可滚动容器而不是flex之前，
I/flatter（2743）：像一个列表视图。
I/颤振（2743）：所讨论的特定RenderFlex是：
I/颤振（2743）：RenderFlex#4a1bb溢出
I/flatter（2743）：创建者：列← 衬垫← 容器← 重新绘制边界-[]← 指数符号学←
I/颤振（2743）：NotificationListener← 保持活力← 自动开机← 银栅←
I/flatter（2743）：MediaQuery← 填缝料← 收缩包装可视端口← ⋯
I/颤振（2743）：父数据：偏移=偏移（5.0，5.0）（可以使用大小）
I/颤振（2743）：约束：箱约束（w=150.0，h=150.0）
I/颤振（2743）：尺寸：尺寸（150.0150.0）
I/颤振（2743）：方向：垂直
I/颤振（2743）：主轴对准：开始
I/颤振（2743）：主轴尺寸：最大
I/颤振（2743）：横轴对齐：中心
I/颤振（2743）：垂直方向：向下
I/颤振（2743）：◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/颤振（2743）：════════════════════════════════════════════════════════════════════════════════════════════════════
I/flatter（2743）：引发了另一个异常：底部的RenderFlex溢出了111个像素。
I/flatter（2743）：引发了另一个异常：底部的RenderFlex溢出了111个像素。
I/flatter（2743）：引发了另一个异常：底部的RenderFlex溢出了111个像素。
I/flatter（2743）：引发了另一个异常：底部的RenderFlex溢出了111个像素。
I/flatter（2743）：引发了另一个异常：底部的RenderFlex溢出了111个像素。
I/flatter（2743）：引发了另一个异常：底部的RenderFlex溢出了111个像素。
I/flatter（2743）：引发了另一个异常：底部的RenderFlex溢出了111个像素。
I/flatter（2743）：引发了另一个异常：底部的RenderFlex溢出了111个像素。
I/flatter（2743）：引发了另一个异常：底部的RenderFlex溢出了111个像素。
I/flatter（2743）：引发了另一个异常：底部的RenderFlex溢出了111个像素。
I/flatter（2743）：引发了另一个异常：底部的RenderFlex溢出了111个像素。
I/flatter（2743）：引发了另一个异常：底部的RenderFlex溢出了111个像素。
I/flatter（2743）：引发了另一个异常：底部的RenderFlex溢出了111个像素。
I/flatter（2743）：引发了另一个异常：RenderFlex溢出了11
  Widget _buildImageBoxes() {
    return Column(
      children: <Widget>[
        Expanded(
          child: Image.network("https://picsum.photos/500/500/?random"),
        ),
        Container(
          padding: EdgeInsets.all(10),
          child: Text("Text"),
        )
      ],
    );
  }

Widget build(BuildContext context) {

    final _screenSize = MediaQuery.of(context).size;

    return Container(
      height: _screenSize.height * 0.2,);
}                                                                                     

Space 400
  Column
    Image 150
    Image 150
    Image 150

Space 400
  Column
    Expanded 133
      → Image ←
    Expanded 133
      → Image ←
    Expanded 133
      → Image ←