Question

我正在Flutter中编写琐事应用程序。我希望按钮的颜色根据其正确性选择答案后改变，然后等待几秒钟，然后显示下一个问题。

我试图用颜色和睡眠来调用setState，但这只会使diaply延迟一点，然后显示下一个问题而根本不改变颜色。

有什么建议吗？

 Color getColor(int num)
  {
      if(!_pressed)
      {
        return Colors.black;
      }

      return question.correct == num ? Colors.green : (_colored != num ? Colors.black : Colors.red);
  }

void onPressed(int btn) {
  stopSpeech();

  setState(() {
  _colored = btn;
  _pressed = true;

  if (question.correct == btn)
  {
      finalScore++;
  }

  sleep(new Duration(seconds:1));

  updateQuestion();

});

}

 RaisedButton buildButton(int num)
  {
    var btn = new RaisedButton(
      color: getColor(num),
      onPressed: () => onPressed(num),
      child: new Text(
        textForButton(num),
        style:
        new TextStyle(fontSize: 30.0, color: Colors.white),
        ),


    return btn;
  }


  @override
  Widget build(BuildContext context)
  {

    return new WillPopScope(
        onWillPop: () async => false,
        child: Scaffold(
          body: new Container(
            margin: const EdgeInsets.all(10.0),
            alignment: Alignment.topCenter,
            child: new Column(
              children: <Widget>[
              new Padding(padding: EdgeInsets.all(20.0)),

              new Container(
                alignment: Alignment.centerRight,
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[

                    new Text(
                      "${Strings.Score}  $finalScore/${questions.length}",
                      style: new TextStyle(fontSize: 22.0),
                      ),
                    new Text("${Strings.Question}  ${questionNumber + 1}",
                               style: new TextStyle(fontSize: 22.0),
                             )
                  ],
                  ),
                ),

              new Padding(padding: EdgeInsets.all(10.0)),

              new Padding(padding: EdgeInsets.all(10.0)),

              new Text(
                question.question,
                textAlign: TextAlign.center,
                style: new TextStyle(
                    fontSize: 40.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),

              new Padding(padding: EdgeInsets.all(10.0)),
              new Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  buildButton(1),
                  new Padding(padding: EdgeInsets.all(10.0)),

                  buildButton(2),
                  new Padding(padding: EdgeInsets.all(10.0)),

                  buildButton(3),
                  new Padding(padding: EdgeInsets.all(10.0)),

                  buildButton(4),
                ],
                ),

                new Padding(padding: EdgeInsets.all(15.0)),

                new Container(
                    alignment: Alignment.center,
                    child: new MaterialButton(
                        minWidth: 240.0,
                        height: 30.0,
                        color: Colors.blueGrey,
                        onPressed: resetQuiz,
                        child: new Text(
                          Strings.Quit,
                          style: new TextStyle(
                              fontSize: 18.0, color: Colors.white),
                        ))),
              ],
            ),
          ),
        ));
  }

Answer 1

在Flutter中无法使用sleep。用户界面在更新颜色和最终分数与更新问题之间没有机会进行渲染，因为它正忙于睡眠。换句话说，UI仅在从setState返回后的之后更新。由于对setState的调用只有一次，因此用户界面仅更新一次（将颜色更改和问题更改合并为一个）。

重构onPressed，以便它只更新颜色，但计划将来的问题更改。

  void onPressed(int btn) {
    stopSpeech();

    setState(() {
      _colored = btn;
      _pressed = true;

      if (question.correct == btn) {
        finalScore++;
      }
    });

    Future<void>.delayed(Duration(seconds: 1), () => updateQuestion());
  }

确保updateQuestion 还调用setState，以便其更改触发必要的UI构建。

颤振-运行时更改按钮颜色

1 个答案: