能否向GridView传入Widget列表渲染？自定义实现后GridView空白如何解决

可按照以下几个常见原因依次排查解决：

• 父容器无明确尺寸约束
  GridView默认是无限滚动布局，如果将它放在Column、Row等无边界约束的父组件中，布局系统无法计算GridView的渲染尺寸，最终会显示为空白。
  解决方法：
  1. 若GridView内容较少不需要独立滚动，给GridView添加shrinkWrap: true属性，让其自适应内容高度
  2. 若需要GridView滚动，将其放在Expanded组件中，或者外层套SizedBox指定明确高度
     示例修改代码：

  GridView menuGrid(BuildContext context, List<MaterialPageRoute> lista) {
    return GridView.count(
      shrinkWrap: true, // 新增自适应高度属性
      crossAxisCount: 3,
      padding: const EdgeInsets.all(5),
      crossAxisSpacing: 5,
      mainAxisSpacing: 5,
      children: _listado(context, lista),
    );
  }
  

• 传入的路由列表为空
  如果上层传入的lista数组长度为0，_listado方法返回的子组件列表为空，GridView自然无内容显示。
  解决方法：在_listado方法入口添加打印语句，确认lista.length是否大于0，若为空排查上层路由列表的生成逻辑即可。
• 子组件无明确渲染尺寸
  你代码中子组件的内容是图片，如果Image组件没有指定宽高，默认会尝试匹配父容器大小，父容器无约束时就会显示为0尺寸。
  解决方法：给存放图片的Container或者直接给Image组件添加明确的宽高参数，示例修改代码：

  List<Widget> _listado(BuildContext context, List<MaterialPageRoute> lista) {
    List<Widget> _listaWidget = [];
    lista.forEach((element) {
      _listaWidget.add(GestureDetector(
        onTap: () {
          Navigator.push(context, element);
        },
        child: Container(
          padding: const EdgeInsets.all(5),
          width: 80,
          height: 80, // 给容器指定固定尺寸
          child: getImageWidgetByMaterialPageRoute(element) is Image
              ? getImageWidget(getKeyByMaterialPageRoute(element))
              : getImageWidgetByMaterialPageRoute(element),
        ),
      ));
    });
    return _listaWidget;
  }
  

• 图片获取逻辑出错
  你代码中做了类型判断，类型匹配时调用getImageWidget获取图片，否则直接使用getImageWidgetByMaterialPageRoute的返回值。如果getKeyByMaterialPageRoute返回的key无效，或者getImageWidget逻辑出错返回了空/透明组件，也会导致页面空白。
  解决方法：先注释掉类型判断逻辑，统一直接返回getImageWidgetByMaterialPageRoute(element)，验证判断逻辑是否是问题根源，再对应修复即可。

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