Flutter如何每秒刷新文本 解决倒计时setState后UI不更新问题

你的代码存在3个核心问题，会导致UI看起来不更新、倒计时功能异常：

1. 时间计算逻辑有缺陷：基于缓存的remainTime逐秒递减的写法，既会因为Timer本身的触发漂移产生累积误差，一旦初始时间计算存在毫秒级偏差，后续所有时间计算都会偏移；如果初始remainTime已经是负值，逐次减1只会让值越来越小，UI一直显示00:00:00，视觉上就像完全没有刷新。
2. 负数判断逻辑稳定性极差：用字符串拆分取首字符判断正负的写法非常容易出错，一旦Duration的字符串格式因为SDK版本、剩余时长长度变化出现差异，判断逻辑会直接失效。
3. 缺少边界处理和更新监听：倒计时到0之后没有取消定时器，会一直在后台无意义执行setState；如果父组件重建传入新的endtime，当前组件不会同步更新倒计时初始值。
   另外initState中super.initState()的调用位置不符合Flutter规范，必须放在方法最开头执行。

放弃缓存值逐秒递减的逻辑，每次定时器触发时实时计算当前时间和结束时间的差值，同时优化边界判断、增加停止逻辑和参数更新监听。

修正后的完整代码：

class CustomTimer extends StatefulWidget {
  final DateTime endtime;
  const CustomTimer({Key? key, required this.endtime}) : super(key: key);

  @override
  State<CustomTimer> createState() => _CustomTimerState();
}

class _CustomTimerState extends State<CustomTimer> {
  Timer? timer;
  Duration remainTime = Duration();

  // 统一计算剩余时间
  void _calculateRemainTime() {
    final now = DateTime.now();
    remainTime = widget.endtime.difference(now);
    // 剩余时间归0后停止定时器，固定显示0值
    if (remainTime.isNegative || remainTime == Duration.zero) {
      remainTime = Duration.zero;
      timer?.cancel();
      timer = null;
    }
    setState(() {});
  }

  // 初始化定时器
  void _initTimer() {
    // 先取消已有定时器避免重复创建
    timer?.cancel();
    // 首帧直接计算一次剩余时间，避免初始空白
    _calculateRemainTime();
    // 启动1秒间隔定时器
    timer = Timer.periodic(const Duration(seconds: 1), (_) {
      _calculateRemainTime();
    });
  }

  @override
  void initState() {
    // 遵循生命周期规范，super调用必须放在方法最前
    super.initState();
    _initTimer();
  }

  // 监听父组件参数变化，同步更新倒计时
  @override
  void didUpdateWidget(covariant CustomTimer oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.endtime != widget.endtime) {
      _initTimer();
    }
  }

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

  // 统一格式化时间为固定两位补零的HH:MM:SS格式，不依赖Duration默认toString
  String _formatDuration(Duration d) {
    final hours = d.inHours.toString().padLeft(2, '0');
    final minutes = d.inMinutes.remainder(60).toString().padLeft(2, '0');
    final seconds = d.inSeconds.remainder(60).toString().padLeft(2, '0');
    return "$hours:$minutes:$seconds";
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(_formatDuration(remainTime)),
    );
  }
}

• 每次触发定时器都实时取系统当前时间计算差值，完全消除累积误差，不会出现时间越跑越偏的问题
• 用Duration自带的isNegative属性判断正负，替代容易出错的字符串判断，逻辑更稳定
• 独立实现时间格式化方法，固定输出补零的标准时分秒格式，不会出现1:2:3这类显示不统一的问题
• 倒计时归0后自动取消定时器，减少无意义的性能消耗
• 增加组件参数更新监听，父组件修改结束时间时会自动重置倒计时
• 修正生命周期方法调用顺序，符合Flutter开发规范

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