如何使用提交按钮逐步浏览问题列表

Question

我有这个 flutter 代码（用于测验），我希望提交按钮移动到下一个问题，但是使用 submitQuestion() 不会激活按钮，也不会包含动画

import 'dart:async';
import 'package:flutter/material.dart';
import 'dart:io';

var _counter = 0;
var bkgrdColor = Colors.blue[50];

bool isAnswerCorrect1 = (questions[_counter].answers[_ansCounter1] ==
    questions[_counter].correctAnswer);
bool isAnswerCorrect2 = (questions[_counter].answers[_ansCounter2] ==
    questions[_counter].correctAnswer);
bool isAnswerCorrect3 = (questions[_counter].answers[_ansCounter3] ==
    questions[_counter].correctAnswer);
bool isAnswerCorrect4 = (questions[_counter].answers[_ansCounter4] ==
    questions[_counter].correctAnswer);

final int _ansCounter1 = 0;
final int _ansCounter2 = 1;
final int _ansCounter3 = 2;
final int _ansCounter4 = 3;

final int ans1Value = 1;
final int ans2Value = 2;
final int ans3Value = 3;
final int ans4Value = 4;

var TIMEOUT = const Duration(seconds: 3);
var ms = const Duration(milliseconds: 1);

List<Question> questions = [
  new Question("What is 2+2", ["2", "3", "4", "5"], "4"),
  new Question("What is 1+1", ["2", "3", "4", "5"], "2"),
  new Question("What is 4+4", ["7", "8", "10", "16"], "8"),
  new Question("What is 5+5", ["10", "12", "25", "20"], "10"),
  new Question("What is 3+3", ["4", "5", "6", "7"], "6")
];

class Question {
  String question;
  List<String> answers;
  String correctAnswer;
  Question(this.question, this.answers, this.correctAnswer);
}

void main() {
  runApp(new _questionDisplay());
}

class _questionDisplay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(home: new QuestDis());
  }
}

class QuestDis extends StatefulWidget {
  QuestDis({Key key}) : super(key: key);

  @override
  _QuestDisState createState() => new _QuestDisState();
}

class _QuestDisState extends State<QuestDis> with TickerProviderStateMixin {
  AnimationController _controller;
  int radioValue = 0;

  @override
  initState() {
    _controller = new AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 100),
    )..addStatusListener((AnimationStatus status) {
        if (status == AnimationStatus.completed) _controller.reverse();
      });
    super.initState();
  }

  void handleRadioValueChanged(int value) {
    if (radioValue != 0) _controller.forward();
    setState(() {
      radioValue = value;
      print("Radio value is: $radioValue");
      switch (radioValue) {
        case 1:
          bkgrdColor = isAnswerCorrect1 ? Colors.green[100] : Colors.red[100];
          break;
        case 2:
          bkgrdColor = isAnswerCorrect2 ? Colors.green[100] : Colors.red[100];
          break;
        case 3:
          bkgrdColor = isAnswerCorrect3 ? Colors.green[100] : Colors.red[100];
          break;
        case 4:
          bkgrdColor = isAnswerCorrect4 ? Colors.green[100] : Colors.red[100];
          break;
      }
      submitButton();
    });
  }

  submitButton() {
    _counter++;
    radioValue = 0;
    bkgrdColor = Colors.blue[50];
  } //nextQuestion() }

  Widget build(BuildContext context) {
    ThemeData theme = Theme.of(context);
    var container = new Container(
      child: new Column(
        children: [
          new Column(
            children: [
              new Row(
                children: [
                  new Expanded(
                    child: new Container(
                      child: new Row(
                        children: [
                          new Radio<int>(
                              value: ans1Value,
                              groupValue: radioValue,
                              onChanged: handleRadioValueChanged),
                          new Text(
                              "${questions[_counter].answers[_ansCounter1]}")
                        ],
                      ),
                    ),
                  ),
                  new Expanded(
                    child: new Container(
                      child: new Row(children: [
                        new Radio<int>(
                            value: ans2Value,
                            groupValue: radioValue,
                            onChanged: handleRadioValueChanged),
                        new Text("${questions[_counter].answers[_ansCounter2]}")
                      ]),
                    ),
                  ),
                ],
              ),
            ],
          ),
          new Column(
            children: [
              new Column(
                children: [
                  new Row(
                    children: [
                      new Expanded(
                        child: new Container(
                          child: new Row(
                            children: [
                              new Radio<int>(
                                  value: ans3Value,
                                  groupValue: radioValue,
                                  onChanged: handleRadioValueChanged),
                              new Text(
                                  "${questions[_counter].answers[_ansCounter3]}")
                            ],
                          ),
                        ),
                      ),
                      new Expanded(
                        child: new Container(
                          child: new Row(children: [
                            new Radio<int>(
                                value: ans4Value,
                                groupValue: radioValue,
                                onChanged: handleRadioValueChanged),
                            new Text(
                                "${questions[_counter].answers[_ansCounter4]}")
                          ]),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );

    return new Scaffold(
      appBar: new AppBar(
        leading: new IconButton(icon: new Icon(Icons.menu), onPressed: null),
        title: new Text('getdata'),
      ),
      body: new Container(
        child: new Column(
          children: [
            new Expanded(
              //child: new Container(
              child: new Column(
                children: <Widget>[
                  new Expanded(
                    flex: 3,
                    child: new Container(
                      child: new Card(
                        color: bkgrdColor,
                        child: new Row(
                          children: <Widget>[
                            new Text("${questions[_counter].question}"),
                          ],
                        ),
                      ),
                    ),
                  ),
                  new Expanded(
                    flex: 1,
                    child: new Center(
                      child: container,
                    ),
                  ),
                  new AnimatedBuilder(
                      child: const Text('SUBMIT'),
                      animation: _controller,
                      builder: (BuildContext context, Widget child) {
                        return new RaisedButton(
                            color: new ColorTween(
                              begin: theme.primaryColor,
                              end: theme.disabledColor,
                            )
                                .animate(_controller)
                                .value,
                            colorBrightness: Brightness.dark,
                            child: child,
                            onPressed:
                                radioValue == 0 ? null : submitButton());
                      })
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

我的方法 wrong/how 我能解决这个问题吗？

Answer 1

您应该在 onPressed 参数中将 submitButton() 替换为 submitButton。您希望 onPressed 成为 VoidCallback 而不是 null（调用 submitButton 的结果）。

此外，修改您的 submitButton 方法以调用 setState，例如

setState(() { 
  _counter++;
  radioValue = 0;
  bkgrdColor = Colors.blue[50];
});

当您修改 State 的成员时，您需要始终调用 setState()，否则 Flutter 将不知道重建您。

如何使用提交按钮逐步浏览问题列表

How do I step through the questions list using the submit button

dart

flutter