元素类型“List<widget>”不能分配给列表类型“Widget”

Posted 2023-02-23

【中文标题】元素类型“List<widget>”不能分配给列表类型“Widget”

【英文标题】：the element type 'List<widget>' can't be assigned to the list type 'Widget'

【发布时间】：2018-10-27 18:58:24

【问题描述】：

我正在尝试在 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'

【参考方案1】：

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

children: <Widget>[getList()],

这应该是

children: getList(),

【参考方案2】：

由于答案对我不满意，所以我找到了另一种解决方案。

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),
          )
      ],
     )

【讨论】：

我测试它。只有第一个小部件将被循环迭代。其他的将在之后添加

【参考方案3】：

我发现有两种方法有效。

方法 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.7 和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',
    ),
  ];

【讨论】：

如何从该 .map 中获取索引？

现在您可以手动计算某个变量的迭代次数，比如说count。设置count = 0，然后根据每次迭代添加count+=1。

【参考方案4】：

只需使用扩展运算符：

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

【讨论】：

谢谢..它工作。但是您能否解释一下展开分隔符会发生什么？

【参考方案5】：

使用扩展运算符是解决此问题的一种方法。但是还有另外一种涉及到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(),

【参考方案6】：

I have the same problem , i have a list of  :
 List<Info> li = [
    Info(name: "oussama", height: 180, date: DateTime.now()),
    Info(name: "mehdy", height: 150, date: DateTime.utc(1997, 05, 14)),
    Info(name: "ahmed", height: 190, date: DateTime.utc(1997, 04, 11)),
    Info(name: "sofiene", height: 160, date: DateTime.utc(1995, 07, 13)),
    Info(name: "mohamed", height: 150, date: DateTime.utc(1994, 01, 17))
  ];

and i want it to display them in a column which return a list<Widget>

so i i followed the same as sad @Günter Zöchbauer : i created a function getList() :
List<Widget> getList() 
    List<Widget> childs = li
        .map((e) => Row(children: <Widget>[
              Text(e.name, style: const TextStyle(fontSize: 25)),
              Text("$e.height", style: const TextStyle(fontSize: 25)),
              Text("$e.date", style: const TextStyle(fontSize: 25))
            ]))
        .toList();
    return childs;
  


then i assigned it to Column : 
 body: Container(
child: Column(
children: getList()
))

Thnx man it worked for me :)