Flutter中如何访问Map元素并渲染为按钮？遇到类型报错如何解决

第一次报错原因（Iterable无法分配给Widget列表） #

• 你直接把questions.map()返回的Iterable对象塞进了Column的children列表里，children要求的是List类型，且map遍历的是整个题目列表，不是当前题目的答案列表，还传了错误的参数给Answer组件。
• 同时原来的Answer组件只接收点击回调，没有预留展示答案文本的参数。

第二次报错原因（String不是List的子类型） #

• 你把map遍历的对象写错了：本来要取当前题目的answers字段，结果写成了questionText字段，后者是字符串类型，强制转List自然报错。
• 同时调整后的代码给Answer传了两个参数，但你原来的Answer组件只定义了一个入参，也会触发参数不匹配报错。

完整修复步骤 #

1. 先修改answer.dart #

新增答案文本参数，替换按钮上的固定文本：

import 'package:flutter/material.dart';

class Answer extends StatelessWidget {
  final void Function() selectHandler;
  // 新增答案文本参数
  final String answerText;

  // 调整构造方法，接收两个参数
  Answer(this.selectHandler, this.answerText);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width / 1.2,
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          primary: Colors.red,
          onPrimary: Colors.white,
        ),
        // 替换固定文本为传入的答案
        child: Text(answerText),
        onPressed: selectHandler,
      ),
    );
  }
}

2. 再修改main.dart的build方法 #

修正遍历对象为当前题目的answers字段，展开到children列表：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Meine erste App'),
      ),
      body: Column(
        children: <Widget>[
          Question(
            questions[_questionIndex]['questionText'].toString(),
          ),
          // 修正为取当前题目的answers列表遍历，不是questionText
          ...(questions[_questionIndex]['answers'] as List<String>)
              .map((answer) {
            return Answer(_answerQuestion, answer);
          }).toList()
        ],
      ),
    ),
  );
}

额外优化点 #

题目切换到最后一题后再点击答案会触发下标越界，建议在_answerQuestion方法里加下标判断，避免崩溃：

void _answerQuestion() {
  if(_questionIndex < questions.length - 1) {
    setState(() {
      _questionIndex = _questionIndex + 1;
    });
  }
  print(_questionIndex);
}

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