Flutter中TweenAnimationBuilder结束后重置并重启动画问题

问题核心是TweenAnimationBuilder的动画执行完成后不会自动重启，单纯调用setState()不会触发组件重建，自然没法重新启动倒计时。解决思路是给组件添加一个动态更新的key，让Flutter在需要重置时重新创建这个组件，从而重启动画。

步骤1：添加动态Key变量 #

在你的State类中声明一个用于控制组件重建的Key：

Key _timerKey = UniqueKey();

步骤2：给TweenAnimationBuilder绑定Key #

修改你的TweenAnimationBuilder，添加key属性：

TweenAnimationBuilder(
  key: _timerKey, // 新增这行
  tween: Tween(begin: 90.0, end: 0.0),
  duration: Duration(seconds: 90),
  builder: (context, value, child) {
    num val = value;
    num time = val.toInt();
    return Stack(
      alignment: Alignment.center,
      children: [
        normalText(
          text: "$time",
          size: 25,
          color: color__orange),
        SizedBox(
          width: 60,
          height: 60,
          child: CircularProgressIndicator(
            value: time / 90,
            valueColor: const AlwaysStoppedAnimation(color__orange),
          ),
        ),
      ],
    );
  },
  onEnd: (){
    var questionID = snapshot.data!.quizzesData!.first.questionID;
    QuizQuestion(questionID);
    // 更新Key触发组件重建，重启倒计时
    setState(() => _timerKey = UniqueKey());
  },
),

步骤3：提交按钮中同步更新Key #

在提交按钮的onPressed逻辑里，完成提交操作后同样更新Key：

ElevatedButton(
  style: ElevatedButton.styleFrom(backgroundColor: color__orange),
  onPressed: (){
    if (selectedOptionStatus == 'True') {
      var questionID = snapshot.data!.quizzesData!.first.questionID;
      var score = snapshot.data!.quizzesData!.first.question!.first.marks;
      var answerID = snapshot.data!.quizzesData!.first.question!.first.answer![index].answerID;
      QuizQuestion(questionID);
      StudentQuestionAnswer(questionID, score, answerID);
      currentQuestionIndex++;

      if ( (currentQuestionIndex + 1) == int.parse(widget.totalQuestions)) {
        updateStudentQuizLoginHistoryFinish();
      }
      // 更新Key重启倒计时
      setState(() => _timerKey = UniqueKey());
    }
    else {
      if (selectedOptionStatus == 'False') {
        var questionID = snapshot.data!.quizzesData!.first.questionID;
        var score = '0';
        var answerID = snapshot.data!.quizzesData!.first.question!.first.answer![index].answerID;

        QuizQuestion(questionID);
        StudentQuestionAnswer(questionID, score, answerID);
        currentQuestionIndex++;

        if (currentQuestionIndex + 1 == int.parse(widget.totalQuestions)) {
          StudentQuiz();
        }
        // 更新Key重启倒计时
        setState(() => _timerKey = UniqueKey());
      }
    }
  },
  child: const Text('Save Answer')
)

原理说明 #

Flutter会根据key来识别组件身份，当key变化时，Flutter会认为这是一个新组件，会销毁旧的TweenAnimationBuilder并创建新的实例，新实例会自动启动从90到0的倒计时动画，完美解决重置问题。

内容的提问来源于stack exchange，提问作者Tahir