Flutter中为何必须使用传播运算符(...)？编译报错解惑

报错信息 #

The element type 'Iterable' can't be assigned to the list type 'Widget'.dartlist_element_type_not_assignable.

出错代码 #

import 'package:flutter/material.dart';

import './question.dart';
import './answer.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  var _questionIndex = 0;

  void _answerQuestion() {
    setState(() {
      _questionIndex = _questionIndex + 1;
      print(_questionIndex);
    });
  }

  @override
  Widget build(BuildContext context) {
    var questions = [
      {
        'question': 'what is your favourite color',
        'answers': ['Black', 'Red', 'Green', 'white']
      },
      {
        'question': 'what is your favourite song',
        'answers': ['Thunderstorm', 'AC/DC', 'Mama mia', 'Burriqio']
      },
      {
        'question': 'what is your favourite food',
        'answers': ['Macarrones', 'Salmorejo', 'Albondigas', 'Chorizo']
      }
    ];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First App'),
        ),
        body: Column(
          children: [
            Question(
              questions[_questionIndex]['question'],
            ),
            ...(questions[_questionIndex]['answers'] as List<String>).map((answer) {
              return Answer(_answerQuestion, answer);
            })
          ],
        ),
      ),
    );
  }
}

用户疑问 #

我不理解为何必须使用传播运算符(...)才能将内容加入列表，因为map方法不是用于生成包含映射后元素的新列表吗？

解答 #

核心原因：map()返回的是Iterable，不是List #

Dart里的map()方法返回的是Iterable对象，并非你以为的List类型。而Flutter中Column.children参数要求的是List<Widget>类型，直接把Iterable赋值给List类型的参数，必然触发类型不匹配的报错。

传播运算符(...)的作用 #

...是Dart的展开运算符，它的作用是把Iterable中的每个元素逐个“拆解”出来，添加到当前的List中。举个简单例子：

var list = [1, 2, ...[3,4,5]];
// 最终list是 [1,2,3,4,5]

放到你的代码里，就是把map返回的Iterable里的每个Answer组件，逐个加入到children这个List中，这样类型就完全匹配了。

替代方案：用toList()转成List #

如果你不想用展开运算符，也可以调用Iterable的.toList()方法，把它转换成真正的List，同样能解决问题：

(questions[_questionIndex]['answers'] as List<String>).map((answer) {
  return Answer(_answerQuestion, answer);
}).toList()

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