测验结束后显示消息时出错，颤振

Question

Image

我的应用程序中目前有 3 个问题，根据我的代码，在我的所有问题一一回答后，屏幕上应该会出现一个小部件，它完全填满了屏幕，应该说"你做到了"。但不幸的是，我一直在尝试很多，但仍然找不到解决方案。

下面是 main.dart 的代码

import 'package:flutter/material.dart';
import './quiz.dart';
import './result.dart'; 

//void main(){
//runApp(MyApp());
//}
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
final _questions = const [
{
'questionText': 'What's is your favourite color? ',
'answers': ['Black', 'Red', 'Green', 'white'],
},
{
'questionText': 'What's is your favourite animal?',
'answers': ['Snake', 'Elephant', 'Lion'],
},
{
'questionText': 'Who is your favourite instructor? ',
'answers': ['Max', 'Max', 'Max', 'Max'],
},
];
var _questionIndex = 0;
void _answerQuestion() {
// var aBool= true;
// aBool = false;
setState(() {
_questionIndex = _questionIndex;
});
print(_questionIndex);
if (_questionIndex < _questions.length) {
print('We have more questions!');
} else {
print('No more questions!');
}
}
@override
Widget build(BuildContext context) {
// var dummy =  ['Hello'];
// dummy.add('Max');
// print(dummy);
// dummy = [];
// questions = [];  
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My First App'),
),
body : _questionIndex <= 2
? Quiz(
answerQuestion: _answerQuestion,
questionIndex: _questionIndex,
questions: _questions,

)
: Result(),
),
);
} 
}

下面是问题的代码.dart。

import 'package:flutter/material.dart';
class Question extends StatelessWidget {
final String questionText;
Question(this.questionText);
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
margin: EdgeInsets.all(10),
child: Text(
questionText,
style: TextStyle(fontSize: 28),
textAlign: TextAlign.center,
),
);
}
}`

以下 ID 代码用于 Answer.dart

import 'package:flutter/material.dart';
class Answer extends StatelessWidget {
final Function selectHandler;
final String answerText;
Answer(this.selectHandler, this.answerText);
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
child:  RaisedButton(
color: Colors.blue,
textColor: Colors.white,
child: Text(answerText),
onPressed: selectHandler,
), 
);
}
}

下面是测验的代码。

import 'package:flutter/material.dart';
import './question.dart';
import './answer.dart';
class Quiz extends StatelessWidget {
final List<Map<String, Object>>questions;
final int questionIndex;
final Function answerQuestion;
Quiz({
@required this.questions, 
@required this.answerQuestion, 
@required this.questionIndex,
});


Widget build(BuildContext context) {
return Column(
children: [
Question(
questions[questionIndex]['questionText'],
),
...(questions[questionIndex]['answers'] as List<String>)
.map((answer) {
return Answer(answerQuestion, answer);
}).toList()
],
);
}
}

下面是 result.dart 的代码

import 'package:flutter/material.dart';

class Result extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('You did it!'),
);
}
}

Answer 1

当我修复以下行时，您的应用程序开始按照您的描述工作。浏览每个问题，然后显示"你做到了！"文本。

setState(() {
_questionIndex++;
});

您之前只是在做_questionIndex = _questionIndex，这不会改变任何值。

Answer 2

我没有收到您提到的错误，

在这里我做了什么，

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final _questions = const [
{
'questionText': 'What's is your favourite color? ',
'answers': ['Black', 'Red', 'Green', 'white'],
},
{
'questionText': 'What's is your favourite animal?',
'answers': ['Snake', 'Elephant', 'Lion'],
},
{
'questionText': 'Who is your favourite instructor? ',
'answers': ['Max', 'Max', 'Max', 'Max'],
},
];
var _questionIndex = 0;
void _answerQuestion(String question, String selectedAnswer) {
print("==============================================");
print("QUESTION: $question");
print("SELECTED ANSWER: $selectedAnswer");
print("==============================================");
setState(() {
_questionIndex++;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My First App'),
),
body: _questionIndex < _questions.length //TODO:
? Quiz(
quizQuestion: _questions[_questionIndex]["questionText"],
quizOptions: _questions[_questionIndex]["answers"],
onAnswerSelect: _answerQuestion,
)
: Result(),
),
);
}
}
class Quiz extends StatelessWidget {
final String quizQuestion;
final List<String> quizOptions;
final void Function(String, String) onAnswerSelect;
Quiz({
@required this.quizQuestion,
@required this.quizOptions,
@required this.onAnswerSelect,
});
Widget build(BuildContext context) {
return Column(
children: [
Question(quizQuestion),
...quizOptions.map(
(option) => Answer(
answerText: option,
selectHandler: () => onAnswerSelect(quizQuestion, option),
),
),
],
);
}
}
class Question extends StatelessWidget {
final String questionText;
Question(this.questionText);
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
margin: EdgeInsets.all(10),
child: Text(
questionText,
style: TextStyle(fontSize: 28),
textAlign: TextAlign.center,
),
);
}
}
class Answer extends StatelessWidget {
final String answerText;
final VoidCallback selectHandler;
Answer({this.answerText, this.selectHandler});
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
child: RaisedButton(
color: Colors.blue,
textColor: Colors.white,
child: Text(answerText),
onPressed: selectHandler,
),
);
}
}
class Result extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('You did it!'),
);
}
}