Flutter countdown_flutter组件：触发操作时重启倒计时的实现问题

你遇到的问题其实是Flutter widget复用机制导致的——直接调用_buildCount()并不会触发组件重建，因为Flutter会识别到返回的widget结构和之前一致，直接复用旧的组件实例，所以倒计时不会重启。下面给你一个简单有效的解决方案：

步骤1：在State类中定义一个用于控制组件重建的Key #

在你的页面State类里添加一个Key变量，我们用UniqueKey来确保每次都是新的唯一标识：

Key _countdownKey = UniqueKey();

步骤2：给CountdownFormatted组件绑定这个Key #

修改你的_buildCount()方法，给CountdownFormatted加上key参数：

_buildCount() {
  return Expanded(
    child: Container(
      child: Center(
        child: CountdownFormatted(
          key: _countdownKey, // 绑定Key
          duration: Duration(seconds: 15),
          onFinish: () {
            _controller.nextQuestion();
            print('finished!');
          },
          builder: (BuildContext ctx, String remaining) {
            return Text(
              remaining,
              style: TextStyle(fontSize: 20),
            );
          },
        ),
      ),
    ),
  );
}

步骤3：在需要重启倒计时的地方更新Key并触发setState #

在onNext回调里，我们只需要生成一个新的UniqueKey，然后调用setState，Flutter会因为Key变化而强制重建CountdownFormatted组件，从而重启倒计时：

onNext: () {
  setState(() {
    _scoreKeeper.add(
      Icon(
        correct ? Icons.check : Icons.close,
        color: correct ? Colors.green : Colors.red,
      ),
    );
    if (_scoreKeeper.length < _controller.number) {
      // 生成新Key，触发组件重建
      _countdownKey = UniqueKey();
      _controller.nextQuestion();
    } else {
      _stopWatch.stop();
      FinishDialog.show(
        context,
        usuarioLogado: usuarioLogado,
      );
    }
  });
}

原理说明 #

Flutter判断是否需要重建组件的核心依据之一就是Key——当两个同类型widget的Key不同时，Flutter会认为这是一个全新的组件，会销毁旧实例并创建新实例，这样CountdownFormatted就会重新初始化倒计时逻辑，达到重启的效果。

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