如何在Widget（Dart/Flutter）中动态执行list.map

Question

我正在尝试动态地将行添加到小部件中，该小部件会根据数组包含的元素数量而变化。

但是，我在第二个列表运算符（for 循环内的所有内容）上遇到以下错误：

The element type 'Set<_ExerData>' can't be assigned to the list type 'Widget'

有人有办法解决这个问题吗？这是正在执行的代码块：

Flexible(
  child: Column(
    children: [                              
      ...[
        ExerTitle(title, leftEdgeInset, 112),
      ]
        .map((menu) => _ExerTitle(
          title: menu.title,
          leftEdgeInset: menu.leftEdgeInset,
          time: menu.time,
        )),
              
      for (int i = 0; i < exerArr.length; i++) {
      ...[
        ExerData(exerArr[i], setsArr[i], leftEdgeInset),
      ]
        .map((menu) => _ExerData(
          exer: menu.exer,
          sets: menu.sets,
          leftEdgeInset: menu.leftEdgeInset,
        )),
      }
    ],
  ),
),

此代码块位于容器内，应显示 Column() 内“ExerData”每次迭代的数据

Answer 1

您收到的错误是由于您试图将

Set<_ExerData>

“传播”为

List<Widget>

，您收到的错误非常清楚。但不清楚的是

Set

是从哪里来的，因为基本上，你在 Dart 代码中犯了一个“语法”错误。

语法：

[...foo]

用于在用方括号创建的列表中传播集合

foo

的值。

在文字列表中，您还可以使用“for-collection”：

void main() {
  const mySet = {'abc', 'def'};
  final list = ['hi', for (final v in mySet) '\n* $v'];
  print(list.join());
}

打印：

hi
* abc
* def

在你的代码中，你把事情搞混了......首先，你同时使用了展开运算符和collection-for......但你也试图在你的collection-for中收集集合，我相信这是你对collection-fors的误解。

这段代码应该可以说明问题：

void main() {
  print([for (final v in [1, 2, 3]) { v }]);
}

这将打印：

[{1}, {2}, {3}]

列表中的每个值都被包装到

Set

中，因为

collection-for

表达式不占用块，只有 for 循环才占用块！所以集合中的大括号只是字面意思

Set

s。

在上面的示例中，

{1}

是包含元素

Set

的

1

。

我不知道为什么你要映射一个单元素列表，因为假设你只有一个元素，这是没有必要的......但是如果我们保留该映射（假设你将来可能会添加更多项目？？）代码应该如下所示：

  final widgets = [
    ...[
      ExerTitle(title, leftEdgeInset, 112),
    ].map((menu) => _ExerTitle(
          title: menu.title,
          leftEdgeInset: menu.leftEdgeInset,
          time: menu.time,
        )),
    for (int i = 0; i < exerArr.length; i++)
      [
        ExerData(exerArr[i], setsArr[i]),
      ].map((menu) => _ExerData(
            exer: menu.exer,
            sets: menu.sets,
            leftEdgeInset: menu.leftEdgeInset,
          ))
  ];