Flutter GridView报List<Widget>非Widget子类型错误：双集合单GridView渲染咨询

GridView.count的children参数接收的是一维的Widget列表，你当前的代码是把两个map生成的List<Widget>直接作为列表元素传入，最终生成的是嵌套的二维列表结构[List<Widget>, List<Widget>]，每个列表位置要求放置单个Widget，实际传入的是Widget集合，自然会抛出type 'List<Widget>' is not a subtype of type 'Widget'的类型不兼容错误。

不需要在外层套多层GridView，只要把两个子集合生成的组件列表做扁平化合并即可，两种常用实现方式：

方式1：用扩展操作符直接展开子列表 #

在GridView的children列表里，用Dart的扩展操作符...把每个map生成的Widget列表摊平，合并成单一层级的组件列表：

return GridView.count(
  restorationId: 'dashboardGridView',
  crossAxisCount: 2,
  mainAxisSpacing: 8,
  crossAxisSpacing: 8,
  padding: const EdgeInsets.all(8),
  childAspectRatio: 1,
  children: <Widget>[
    // 展开subColl1生成的所有Item组件
    ...snapshot.data[0].docs.map<Widget>((document) {
      return _DashboardGridViewItem(document: document);
    }).toList(),
    // 展开subColl2生成的所有Item组件
    ...snapshot.data[1].docs.map<Widget>((document) {
      return _DashboardGridViewItem(document: document);
    }).toList(),
  ],
);

方式2：预先合并所有文档源，统一生成组件 #

如果后续需要接入更多子集合，或者需要给两个集合的数据加统一的排序、过滤逻辑，可以先把所有文档对象汇总成统一列表，再一次性映射成GridView的子组件：

// 合并两个集合的所有文档
final allDocuments = [
  ...snapshot.data[0].docs,
  ...snapshot.data[1].docs,
];
// 按统一规则生成GridView组件列表
final gridItems = allDocuments.map<Widget>((doc) {
  return _DashboardGridViewItem(document: doc);
}).toList();

return GridView.count(
  restorationId: 'dashboardGridView',
  crossAxisCount: 2,
  mainAxisSpacing: 8,
  crossAxisSpacing: 8,
  padding: const EdgeInsets.all(8),
  childAspectRatio: 1,
  children: gridItems,
);

• 上述两种方式生成的都是单实例GridView组件，所有子格子会按照配置的跨轴数量、间距参数连续排布，不会出现多层GridView导致的滚动割裂、间距错位问题。
• 当合并后的文档量超过200条时，建议替换为GridView.builder实现懒加载渲染，避免一次性构造所有Item组件带来的性能损耗。
• 可以给Future.wait补全泛型标注，将返回类型显式声明为Future.wait<QuerySnapshot>([...])，消除dynamic类型带来的隐式转换问题，获得更完善的IDE类型提示。

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