如何在 Flutter 的下一页上将计数加一?
How do I increase the count by one on the next page in Flutter?
我正在 Flutter 中创建一个测验应用程序,我试图按该顺序显示问题页面、答案页面和问题页面。我想在页面从答案页过渡到问题页时显示下一个问题,但我无法正确传递增量值。我尝试使用 Navigator.push() 并将以下 setsetState((){}) 作为要转换的页面的参数,但出现错误。你能给我一些建议吗?谢谢。
answer_page.dart:
import 'package:flutter/material.dart';
import '../components/next_question_button.dart';
import '../screens/question_page.dart';
import '../quiz_list.dart';
class CorrectAnswerPage extends StatelessWidget {
CorrectAnswerPage({this.scoreKeeper});
final List<Icon> scoreKeeper;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
child: Center(
child: Text(
'correct',
style: TextStyle(
fontSize: 100,
fontWeight: FontWeight.bold,
color: Colors.red),
),
),
),
Divider(
color: Colors.grey,
indent: 16,
endIndent: 16,
),
Text('EXPLANATION',
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.bold, color: Colors.grey)),
NextQuestionButton(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => QuestionPage(setState: () {
quizList.nextQuestion();
})));
},
),
Row(
children: scoreKeeper,
)
],
);
}
}
question_page.dart:
import 'package:flutter/material.dart';
import '../screens/wrong_answer_page.dart';
import '../components/answer_button.dart';
import '../quiz_list.dart';
import 'correct_answer_page.dart';
QuizList quizList = QuizList();
class QuestionPage extends StatefulWidget {
QuestionPage({@required this.setState});
final setState;
//QuestionPage(void nextQuestion);
// QuestionPage(this.scoreKeeper);
//
// List<Icon> scoreKeeper;
@override
_QuestionPageState createState() => _QuestionPageState();
}
class _QuestionPageState extends State<QuestionPage> {
List<Icon> scoreKeeper = [];
void checkAnswer(String userPickedAnswer) {
String correctAnswer = quizList.getQuestionAnswer();
if (userPickedAnswer == correctAnswer) {
scoreKeeper.add(
Icon(Icons.circle_outlined, color: Colors.red),
);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CorrectAnswerPage(
scoreKeeper: scoreKeeper)));
} else {
scoreKeeper.add(
Icon(Icons.close, color: Colors.blue),
);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => WrongAnswerPage(
scoreKeeper: scoreKeeper)));
}
setState(() {
quizList.nextQuestion();
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 5,
child: Padding(
padding: EdgeInsets.all(10.0),
child: Center(
child: Text(
quizList.getQuestionText(),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25.0,
color: Colors.black,
),
),
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.all(15.0),
child: AnswerButton(
userPickedAnswer: 'a',
onTap: () {
setState(() {
checkAnswer('a');
});
}),
)),
Expanded(
child: Padding(
padding: EdgeInsets.all(15.0),
child: AnswerButton(
userPickedAnswer: 'b',
onTap: () {
setState(() {
checkAnswer('b');
});
}),
)),
Expanded(
child: Padding(
padding: EdgeInsets.all(15.0),
child: AnswerButton(
userPickedAnswer: 'c',
onTap: () {
setState(() {
checkAnswer('c');
});
}),
)),
Expanded(
child: Padding(
padding: EdgeInsets.all(15.0),
child: AnswerButton(
userPickedAnswer: 'd',
onTap: () {
setState(() {
checkAnswer('d');
});
}),
)),
//TODO: Add a Row here as your score keeper
Row(children: this.scoreKeeper)
],
);
}
}
QuestionPage(setState: () {
quizList.nextQuestion();
})));
这里你传递一个函数。使用 () {}
您可以创建一个函数并将其传递到下一页。
简单:
QuestionPage(setState: quizList.nextQuestion());
然后下一个问题将存储在您的 setState
变量中。
开始声明变量的类型,这样你就不会 运行 遇到你试图传递一个对象但你传递了一个函数而 IDE 什么也没说的问题,因为它希望您知道自己在做什么:
final Question setState;
我正在 Flutter 中创建一个测验应用程序,我试图按该顺序显示问题页面、答案页面和问题页面。我想在页面从答案页过渡到问题页时显示下一个问题,但我无法正确传递增量值。我尝试使用 Navigator.push() 并将以下 setsetState((){}) 作为要转换的页面的参数,但出现错误。你能给我一些建议吗?谢谢。
answer_page.dart:
import 'package:flutter/material.dart';
import '../components/next_question_button.dart';
import '../screens/question_page.dart';
import '../quiz_list.dart';
class CorrectAnswerPage extends StatelessWidget {
CorrectAnswerPage({this.scoreKeeper});
final List<Icon> scoreKeeper;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
child: Center(
child: Text(
'correct',
style: TextStyle(
fontSize: 100,
fontWeight: FontWeight.bold,
color: Colors.red),
),
),
),
Divider(
color: Colors.grey,
indent: 16,
endIndent: 16,
),
Text('EXPLANATION',
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.bold, color: Colors.grey)),
NextQuestionButton(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => QuestionPage(setState: () {
quizList.nextQuestion();
})));
},
),
Row(
children: scoreKeeper,
)
],
);
}
}
question_page.dart:
import 'package:flutter/material.dart';
import '../screens/wrong_answer_page.dart';
import '../components/answer_button.dart';
import '../quiz_list.dart';
import 'correct_answer_page.dart';
QuizList quizList = QuizList();
class QuestionPage extends StatefulWidget {
QuestionPage({@required this.setState});
final setState;
//QuestionPage(void nextQuestion);
// QuestionPage(this.scoreKeeper);
//
// List<Icon> scoreKeeper;
@override
_QuestionPageState createState() => _QuestionPageState();
}
class _QuestionPageState extends State<QuestionPage> {
List<Icon> scoreKeeper = [];
void checkAnswer(String userPickedAnswer) {
String correctAnswer = quizList.getQuestionAnswer();
if (userPickedAnswer == correctAnswer) {
scoreKeeper.add(
Icon(Icons.circle_outlined, color: Colors.red),
);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CorrectAnswerPage(
scoreKeeper: scoreKeeper)));
} else {
scoreKeeper.add(
Icon(Icons.close, color: Colors.blue),
);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => WrongAnswerPage(
scoreKeeper: scoreKeeper)));
}
setState(() {
quizList.nextQuestion();
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 5,
child: Padding(
padding: EdgeInsets.all(10.0),
child: Center(
child: Text(
quizList.getQuestionText(),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25.0,
color: Colors.black,
),
),
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.all(15.0),
child: AnswerButton(
userPickedAnswer: 'a',
onTap: () {
setState(() {
checkAnswer('a');
});
}),
)),
Expanded(
child: Padding(
padding: EdgeInsets.all(15.0),
child: AnswerButton(
userPickedAnswer: 'b',
onTap: () {
setState(() {
checkAnswer('b');
});
}),
)),
Expanded(
child: Padding(
padding: EdgeInsets.all(15.0),
child: AnswerButton(
userPickedAnswer: 'c',
onTap: () {
setState(() {
checkAnswer('c');
});
}),
)),
Expanded(
child: Padding(
padding: EdgeInsets.all(15.0),
child: AnswerButton(
userPickedAnswer: 'd',
onTap: () {
setState(() {
checkAnswer('d');
});
}),
)),
//TODO: Add a Row here as your score keeper
Row(children: this.scoreKeeper)
],
);
}
}
QuestionPage(setState: () {
quizList.nextQuestion();
})));
这里你传递一个函数。使用 () {}
您可以创建一个函数并将其传递到下一页。
简单:
QuestionPage(setState: quizList.nextQuestion());
然后下一个问题将存储在您的 setState
变量中。
开始声明变量的类型,这样你就不会 运行 遇到你试图传递一个对象但你传递了一个函数而 IDE 什么也没说的问题,因为它希望您知道自己在做什么:
final Question setState;