Question

我有一个需要在UI上重播的事件列表。这些事件代表一个人在回答问题。因此，每个事件代表一个答案的一部分，在这种情况下为一个字符。此列表来自DB。

我想以动画方式显示它。所以我创建了以下

1）持续时间= 100 * replayEvents.length的AnimationController（因此每个事件都会产生100毫秒的提示） 2）IntTween的开头为0，结尾为replayEvents.length（所以我的想法是，我每100毫秒会得到一个增量值，然后可以使用该值查询列表并显示下一个字符）

但是，似乎IntTween中的animation.value像1个重复一样在重复，等等。如何使它成为非重复值。请参阅下面的完整代码。

谢谢。

class AnswerWidget extends StatefulWidget {

  List<dynamic> answerList; // comes from DB parent widget sends to this widget

  AnswerWidget({this.answerList});

  @override
  State<StatefulWidget> createState() => AnswerWidgetState();

}

class AnswerWidgetState extends State<AnswerWidget> with SingleTickerProviderStateMixin {

  int _noOfAnswerLetters = 6; // hard coding for now

  Animation<int> _animation;
  AnimationController _controller;

  List<String> localAnswerList = new List();

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this,
        duration: Duration(milliseconds: (100 * widget.answerList.length)));

    _animation = IntTween(begin: 0, end: widget.answerList.length-1).animate(_controller);

    _animation.addListener(() {

      if(widget.answerList[_animation.value]["mode"] == ANSWER_MODE.ANSWER.toString()) {
        setState(() {
          this.localAnswerList.add(widget.answerList[_animation.value]["letter"]);
        });
      }

    });

    _controller.forward();

  }

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

  @override
  Widget build(BuildContext context) {

    List<Widget> answerWidgets = new List();
    for(int i=0; i<_noOfAnswerLetters; i++) {
      if(localAnswerList.length > i)
        answerWidgets.add( AnswerBox(answerLetter: localAnswerList[i], borderColor: ColorConstants.normalBorderColor,) );
      else
        answerWidgets.add( AnswerBox(answerLetter: "", borderColor: ColorConstants.normalBorderColor,) );
    }

    return Container(
      height: 64.0,
      decoration: BoxDecoration(
        border: Border.all(width: 1.5, color: ColorConstants.normalBorderColor),
        color: ColorConstants.normalColor,
      ),
      child: Padding(
        padding: const EdgeInsets.only(top:8.0, bottom: 8.0, left: 6.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: answerWidgets,
        ),
      ),
    );
  }

}

IntTween动画值反复抖动。我们可以有非重复值吗？

0 个答案: