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

kuarbcqp  于 2023-05-08  发布在  Flutter
关注(0)|答案(7)|浏览(146)

我试图在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'
relj7zay

relj7zay1#

在这里,您将列表 Package 为列表

children: <Widget>[getList()],

这应该是

children: getList(),
sq1bmfud

sq1bmfud2#

使用spread operator:

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

yqkkidmi3#

使用扩展操作符是解决这个问题的一种方法。但是还有一个涉及使用toList()方法。
children属性需要Widget列表。但是,在您的情况下,它将变为以下内容:

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

因此,我们认为,

方案一

Package 应为children: getList(),

解2(扩展算子)

children: <Widget>[...getList()],
附带说明一下,当您尝试使用类似map()方法时,可能会遇到此问题。在这种情况下,toList()方法的使用就派上用场了。比如说
children: someListOfObjects.map((el) => Text(el)).toList(),

roqulrg3

roqulrg34#

我发现有两种方法有效。

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

au9on6nz5#

既然答案不令我满意,所以我找到了另一个解决办法。
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),
          )
      ],
     )
kh212irz

kh212irz6#

我也有同样的问题,我有一个列表:

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

我希望它在一个返回list<Widget>的列中显示它们,所以我跟sad @Günter Zöchbauer一样:我创建了一个函数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;
  }

然后我把它分配给Column

body: Container(
 child: Column(
   children: getList()
))

对我很有效:)

yws3nbqq

yws3nbqq7#

修复此错误

The element type 'T' can't be assigned to the list type 'Object'.dartlist_element_type_not_assignable

你可以在Equatable包@override List<Object?> get props => [value];

相关问题