时间戳

首页 > 解决方案 > 如何在 Flutter 的下一页上将计数增加一？

flutter - 如何在 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)
      ],
    );
  }
}

标签： flutterincrement

解决方案

QuestionPage(setState: () {
                          quizList.nextQuestion();
                        })));

在这里你传递一个函数。随着() {}您创建一个函数并将其传递到下一页。

简单地：

QuestionPage(setState: quizList.nextQuestion());

然后下一个问题将存储在您的setState变量中。

开始声明变量的类型，这样您就不会遇到尝试传递对象但传递函数的问题，并且 IDE 什么也没说，因为它希望您知道自己在做什么：

final Question setState;

推荐阅读