我必须创建一个用于心理 react 时间测试的应用程序。为此，我必须准确控制图像何时出现 可见并精确测量图像可见性和 react 开始之间的延迟(例如点击事件)。 我怎样才能在 Flutter 中实现这一点？具体来说，在同一个地方显示和隐藏多个不同图像的最有效方法是什么？考虑到框架，我如何准确地知道点击事件的开始与用户真实和完全可见性的开始设备的速率？有没有办法对该过程进行低级控制。通常，Flutter 似乎公开了一个高级 api。

最佳答案

我已经做了尝试，可能正是你要找的，我的逻辑如下:

1. 为正在呈现的图像添加一个监听器。
2. 使用 Stopwatch 类，我通知我的对象在图像显示后开始计时。
3. 点击正确答案时，我会停止我的秒表以停止计数。
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()));
}

关于dart - Flutter 应用程序中图像显示和用户 react 的准确时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47486229/