Flutter中circular_countdown_timer动态修改倒计时时长问题

需求 #

使用circular_countdown_timer包与GetX实现一个倒计时器，要求：

• 启动倒计时前可修改时长
• 重置倒计时后可重新选择新时长

当前实现代码 #

倒计时组件声明 #

Obx(() => CircularCountDownTimer(
  duration: pc.workTime.value.inSeconds,
  controller: pc.timerController,
  isReverse: true,
  autoStart: false
))

时长选择器（NumberPicker） #

NumberPicker(
    value: pc.workTime.value.inMinutes,
    minValue: 0,
    maxValue: 100,
    onChanged: (value) {
      pc.workTime.value = Duration(minutes: value); // 更新可观察变量
    }),

GetXController中的控制器声明 #

class YourController extends GetxController {
  final Rx<Duration> workTime = Duration(minutes: 25).obs;
  CountDownController timerController = CountDownController();
}

遇到的问题 #

以初始时长25分钟改为35分钟为例：

• 修改时长后，倒计时器的文本显示正确更新为35分钟
• 点击启动后，倒计时仍从25分钟开始计时

解决方案 #

问题根源在于CountDownController会在初始化时缓存初始的duration值，仅更新组件的duration参数不会同步到控制器内部。需要在workTime变化时主动更新控制器的时长：

方案1：在NumberPicker的回调中直接更新控制器 #

修改时长选择器的逻辑，更新workTime后调用控制器的restart方法传入新时长：

NumberPicker(
    value: pc.workTime.value.inMinutes,
    minValue: 0,
    maxValue: 100,
    onChanged: (value) {
      pc.workTime.value = Duration(minutes: value);
      // 重置控制器到新时长
      pc.timerController.restart(duration: pc.workTime.value.inSeconds);
    }),

方案2：在GetXController中监听workTime变化（更优雅） #

在控制器的onInit方法中添加对workTime的监听，自动同步时长到倒计时控制器：

class YourController extends GetxController {
  final Rx<Duration> workTime = Duration(minutes: 25).obs;
  CountDownController timerController = CountDownController();

  @override
  void onInit() {
    super.onInit();
    // 监听workTime变化，自动更新倒计时控制器
    ever(workTime, (newDuration) {
      timerController.restart(duration: newDuration.inSeconds);
    });
  }
}

补充说明 #

• restart方法会重置倒计时到指定的新时长，并保持停止状态（匹配我们设置的autoStart: false），符合“启动前修改”的需求
• 如果需要在倒计时运行中修改时长，可先调用timerController.pause()，再执行restart操作

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