在Flutter应用程序中显示图像和用户反应的准确时间

Question

我必须为心理反应时间测试创建一个应用程序。为此，我必须准确控制图像的时间 可见并精确测量图像可见度开始与反应开始之间的延迟（例如敲击事件）。 我如何在Flutter中实现这一目标？具体来说，在同一个地方显示和隐藏几个不同图像的最有效方法是什么？如何在考虑到框架的情况下确切地知道与用户的真实和完全可见性的开始相关的敲击事件的开始设备的费率？有没有办法对该过程进行低级别控制。 Flutter通常会暴露出高级api。

Answer 1

我做了一个可能正是你正在寻找的尝试，我的逻辑如下：

1. 为正在呈现的图像添加一个监听器。
2. 使用Stopwatch类，我会在显示图像后通知我的对象开始计时。
3. 点击正确答案后，我停止Stopwatch停止计数。
4. 保存我目前的分数，然后继续下一个问题。

注意：

• 在这个例子中，为了简单起见，我没有说明哪个答案是正确的，哪个答案是正确的。
• 我创建了一个新的StatelessWidget来保存每个问题，使用PageView.builder也可以在这里使用。

简单示例：



import 'dart:async';

import 'package:flutter/material.dart';

int score = 0;

class TimeTest extends StatefulWidget {
  Widget nextQuestionWidget; //to navigate
  String question;
  NetworkImage questionImage;
  List<String> answers;

  TimeTest(
      {this.questionImage, this.question, this.answers, this.nextQuestionWidget });

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

class _TimeTestState extends State<TimeTest> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  bool _loading = true;
  Stopwatch timer = new Stopwatch();

  @override
  void initState() {
    widget.questionImage.resolve(new ImageConfiguration()).addListener((_, __) {
      if (mounted) {
        setState(() {
          _loading = false;
        });
        timer.start();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: _scaffoldKey,
      appBar: new AppBar(title: new Text("Time Test"),),
      body: new Container(
        alignment: FractionalOffset.center,
        margin: const EdgeInsets.symmetric(vertical: 15.0),
        child: new Column(
          children: <Widget>[
            new Text(widget.question),
            new Divider(height: 15.0, color: Colors.blueAccent,),
            new CircleAvatar(backgroundImage: widget.questionImage,
              backgroundColor: Colors.transparent,),
            new Container(height: 15.0,),
            new Column(
              children: new List.generate(widget.answers.length, (int index) {
                return new FlatButton(
                  onPressed: () {
                    ///TODO
                    ///add conditions for correct or incorrect answers
                    ///and some manipulation on the score
                    timer.stop();
                    score = score + timer.elapsedMilliseconds;
                    print(score);
                    _scaffoldKey.currentState.showSnackBar(new SnackBar(
                        content: new Text(
                            "Your answered this question in ${timer
                                .elapsedMilliseconds}ms")));

                    ///Hold on before moving to the next question
                    new Future.delayed(const Duration(seconds: 3), () {
                      Navigator.of(context).push(new MaterialPageRoute(
                          builder: (_) => widget.nextQuestionWidget));
                    });
                  }, child: new Text(widget.answers[index]),);
              }),
            )
          ],

        ),),
    );
  }
}


class QuestionOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new TimeTest(question: "Which animal is in this photo?",
      questionImage: new NetworkImage(
          "http://cliparting.com/wp-content/uploads/2016/09/Tiger-free-to-use-clipart.png"),
      answers: ["Lion", "Tiger", "Cheetah"],
      nextQuestionWidget: new QuestionTwo(),);
  }
}

class QuestionTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new TimeTest(question: "Which bird is in this photo?",
      questionImage: new NetworkImage(
          "http://www.clker.com/cliparts/P/q/7/9/j/q/eagle-hi.png"),
      answers: ["Hawk", "Eagle", "Falcon"],
      nextQuestionWidget: new ResultPage(),);
  }
}

class ResultPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("Result"),),
      body: new Center(
        child: new Text("CONGRATULATIONS! Your score is $score milliseconds"),),
    );
  }
}
void main() {
  runApp(new MaterialApp(home: new QuestionOne()));
}