如何在颤动中访问地图元素并将它们显示为按钮？

Question

我在尝试学习 Flutter 课程时遇到错误。

有效的是它显示问题。 我正在努力寻找答案。它应该从我创建的地图中选择答案。

错误说： 元素类型“Iterable”不能分配给列表类型“Widget”。

这是我的 main.dart：

import 'package:flutter/material.dart';
import 'package:quizapp/answer.dart';
import 'package:quizapp/question.dart';

void main() {
  runApp(MyApp());
}

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

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

  // increases the state of questionIndex by 1
  void _answerQuestion() {
    setState(() {
      _questionIndex = _questionIndex + 1;
    });
    print(_questionIndex);
  }

  var questions = [
    {
      'questionText': 'Question 1',
      'answers': ['Answer 1', 'Answer 2', 'Answer 3', 'Answer 4']
    },
    {
      'questionText': 'Question 2',
      'answers': ['Answer 1', 'Answer 2', 'Answer 3', 'Answer 4']
    },
  ];

  @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(),
            ),
            questions.map((question) {
              return Answer(question);
            })
          ],
        ),
      ),
    );
  }
}

这是我的回答。飞镖：

import 'package:flutter/material.dart';

class Answer extends StatelessWidget {
  final void Function() selectHandler;

  Answer(this.selectHandler);

  @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('Antwort 1'),
        onPressed: selectHandler,
      ),
    );
  }
}

感谢您的帮助

所以我更加关注课程。现在在 Flutter 应用程序中出现了错误： “String”类型不是类型转换中“List”类型的子类型

这是我在 main.dart 中的代码

import 'package:flutter/material.dart';
import 'package:notizapp/answer.dart';
import 'package:notizapp/question.dart';

void main() {
  runApp(MyApp());
}

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

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

  // increases the state of questionIndex by 1
  void _answerQuestion() {
    setState(() {
      _questionIndex = _questionIndex + 1;
    });
    print(_questionIndex);
  }

  var questions = [
    {
      'questionText': 'Question 1',
      'answers': ['Answer 1', 'Answer 2', 'Answer 3', 'Answer 4']
    },
    {
      'questionText': 'Question 2',
      'answers': ['Answer 1', 'Answer 2', 'Answer 3', 'Answer 4']
    },
  ];

  @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(),
            ),
            ...(questions[_questionIndex]['questionText'] as List<String>)
                .map((answer) {
              return Answer(_answerQuestion, answer);
            }).toList()
          ],
        ),
      ),
    );
  }
}

Answer 1

    ListView.builder(
      shrinkWrap:true,
      itemCount:questions.length,
      itemBuilder:(c,i){
        return ElevatedButton(
      onPressed:(){
     //todo handle click event
      },
      child: Text(questions[i]['questionText']),
     );
    }
   )

Answer 2

这是导致您的问题的原因：

body: Column(
  // The column accepts a list of Widget's.
  children: <Widget>[
    // This is a Widget so it is accepted.
    Question(
      questions[_questionIndex]['questionText'].toString(),
    ),
    // This is not a widget but, the result of a map function.
    questions.map((question) {
      return Answer(question);
    })
  ],
),

1. 您应该使用扩展运算符来指示必须添加多个小部件。

...questions.map((question) {
  return Answer(question);
}),

1. 并将可迭代对象转换为列表，因为 Column 小部件只接受小部件列表。

...questions.map((question) {
  return Answer(question);
}).toList(),