在构建异常期间调用的 setState() 或 markNeedsBuild() 阻止我执行回调

Question

一旦计时器在特定小部件中结束，我正在尝试执行回调函数，但我不断收到此异常：

I/flutter (16413)：引发了另一个异常：在构建期间调用了 setState() 或 markNeedsBuild()。

所以我有一个名为 countdown 的小部件：

class Countdown extends StatefulWidget {
  final VoidCallback onCountdownExpire;

  Countdown(this.onCountdownExpire);

  @override
  CountdownState createState() => CountdownState();
}

class CountdownState extends State<Countdown> with TickerProviderStateMixin {
  AnimationController controller;

  String get timerString {
    Duration duration = controller.duration * controller.value;
    return '${duration.inMinutes}:${(duration.inSeconds % 60).toString()}';
  }

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    )..addStatusListener((AnimationStatus status){
        if (status == AnimationStatus.completed)
          widget.onCountdownExpire();
    });
    controller.reverse(from: 1.0);
  } 
   ...
   ...
   ... // omitted code
}

所以一旦动画完成就会调用回调函数：

class _QuizPageState extends State<QuizPage> {
  ... // omitted code  

  @override
  void initState() {
   ... // omitted code
  }

  void onCountdownExpire() {
    setState(() {
      _topContentImage =  AssetImage(questions[questionNum++].imagePath);
    });
  }
  ... // omitted code
}

我尝试关注solution，但它不起作用并给了我同样的例外：

  void onCountdownExpire() => 
    setState(() {
      _topContentImage =  AssetImage(questions[questionNum++].imagePath);
    });

我也试过了，但没用：

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    )..addStatusListener((AnimationStatus status) =>
        (status == AnimationStatus.completed) ?
          widget.onCountdownExpire():null
    );
    controller.reverse(from: 1.0);
  }

Answer 1

也许尝试包括 'dart:async'：

import 'dart:async';

然后尝试将您对 onCountdownExpire 函数的调用封装在一个短暂的 Timer() 中：

...
        Timer(
          Duration(milliseconds:50),
          () {
            if (status == AnimationStatus.completed)
              widget.onCountdownExpire();
          },
        );
...

这将使setState() 发生在动画最后一帧的构建阶段之外。

该错误最有可能是因为 Countdown() 正在作为 QuizPage() 小部件重绘的一部分而被重绘。添加Timer() 将强制更新在build() 范围之外以异步方式进行，并且仍将获得相同的结果而不会出现错误。