Flutter GridView循环添加组件报错：List<Widget>无法赋值给Widget

嘿，我来帮你搞定这个编译错误！先看看你遇到的报错：

The element type 'List' can't be assigned to the list type 'Widget'

这个问题其实很好理解：你给GridView.count的children传了[getList()]，但getList()本身就返回一个List<Widget>，这就相当于你把一个列表塞进了另一个列表里，变成了嵌套列表（List<List<Widget>>），可GridView的children需要的是直接的Widget集合，类型当然不匹配啦！

另外你的getList()方法里还有个小语法错误：字符串拼接时'abcd ' + $i是不对的，Dart里字符串插值得用'abcd $i'，或者把数字转成字符串再拼接。

两种快速解决方法 #

方法1：直接传入返回的列表（最推荐）

既然getList()已经返回了我们需要的List<Widget>，那直接把它传给children就行，不用再套一层中括号：

return GridView.count(
  crossAxisCount: 2,
  padding: const EdgeInsets.all(10.0),
  crossAxisSpacing: 10.0,
  mainAxisSpacing: 10.0,
  children: getList(), // 直接用返回的列表
);

方法2：用展开运算符（适合需要混合其他组件的场景）

如果你之后想在列表里再加一些单独的Widget，可以用Dart的展开运算符...把getList()返回的列表“拆”开，和其他Widget放在同一个列表里：

return GridView.count(
  crossAxisCount: 2,
  padding: const EdgeInsets.all(10.0),
  crossAxisSpacing: 10.0,
  mainAxisSpacing: 10.0,
  children: <Widget>[
    ...getList(), // 展开列表，把里面的Widget逐个放进来
    // 这里还能加其他单个Widget，比如Text('额外组件')
  ],
);

修正后的getList()方法 #

别忘了把字符串拼接的错误也改了：

List<Widget> getList() {
  List<Widget> childs = [];
  for (var i = 0; i < 10; i++) {
    childs.add(ListItem('abcd $i')); // 正确的字符串插值写法
    // 或者用 childs.add(ListItem('abcd ' + i.toString())); 也可以
  }
  return childs;
}

这样调整完，编译错误就会消失，你的GridView就能正常渲染10个ListItem啦！

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