无法将元素类型"List <widget>"分配给列表类型"Widget"

Question

我试图在gridview中使用for循环添加数据,但它显示出一些错误.这是我的组件代码

return new GridView.count(
    crossAxisCount: 2,
    padding: const EdgeInsets.all(10.0),
    crossAxisSpacing: 10.0,
    mainAxisSpacing: 10.0,
    children: <Widget>[getList()],
);

getList()代码

List<Widget> getList() {
  List<Widget> childs = [];
  for (var i = 0; i < 10; i++) {
    childs.add(new ListItem('abcd ' + $i));
  }
  return childs;
}

但它显示编译时错误.

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

Answer 1

在这里,您将列表包装为列表

children: <Widget>[getList()],

这应该是

children: getList(),

Answer 2

使用展开运算符是解决此问题的一种方法。但还有另一种涉及toList()方法的使用。

children属性需要小部件列表。但是，在您的情况下，它会变成以下内容：

return new GridView.count(
    crossAxisCount: 2,
    padding: const EdgeInsets.all(10.0),
    crossAxisSpacing: 10.0,
    mainAxisSpacing: 10.0,
    children: [
      [
        ListItem('abcd 0'),
        ListItem('abcd 1'),
        ...
      ]
    ],
);

所以，

解决方案1

包装应该是children: getList(),

解决方案2（扩展运算符）

children: <Widget>[...getList()],

附带说明一下，当您尝试使用map()方法之类的东西时，您可能会遇到此问题。在这种情况下，方法的使用toList()就派上用场了。例如，

children: someListOfObjects.map((el) => Text(el)).toList(),

Answer 3

只需使用扩展运算符：

return new GridView.count(
    crossAxisCount: 2,
    padding: const EdgeInsets.all(10.0),
    crossAxisSpacing: 10.0,
    mainAxisSpacing: 10.0,
    children: <Widget>[...getList()],
);

Answer 4

由于答案对我来说并不令人满意，所以我找到了另一个解决方案。

Flutter 使您可以在图形中的单行上编写条件，因此您可以在单行上插入一个循环，然后插入其他不同的小部件。这是回答主要问题的一个实际例子：

 Column(
    children: <Widget>
      [
        for (int i = 0;
        i < workouts.series.length;
        i++)
          "//CREATE N YOUR WIDGETS//",
          new Text(
          "${workouts.series.length} x ${exerciseWorkout.repsToDo} ",
          style: TextStyle(
          color: Colors.black87,
          fontSize: 16,
          fontWeight: FontWeight.bold),
          )
      ],
     )

Answer 5

我发现有两种方法有效。

方法 1 - 简单

最新版本支持此方法 flutter

var list = ["one", "two", "three", "four"]; 

child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
          for(var item in list ) Text(item)
      ],
),

方法 2 - 有点复杂

在Flutter 1.12.13+hotfix.7and 中测试Dart 2.7.0，我们可以迭代对象列表，如下所示：

迭代对象列表

...data.map((f) => paragraph(f.title, f.description)).toList(),

自定义小部件

Column paragraph(String title, String description) {
  return new Column(
    children: <Widget>[
      Container(
        child: Text(title),
      ),
      Container(
        child: Text(description),
      ),
    ],
  );
}

数据：对象列表

List<AboutUsData> data = [
    new AboutUsData(
      title: 'Our Vision',
      description:
          'OUR VISION',
    ),
    new AboutUsData(
      title: 'Our Mission',
      description:
          'OUR MISSION',
    ),
    new AboutUsData(
      title: 'Our Values',
      description:
          'As we grow as a company',
    ),
  ];