Flutter倒计时计时器问题：10小时后无法显示09小时格式

核心问题分析 #

你的代码存在三处关键错误导致显示异常：

1. 小时显示逻辑错误：当小时数小于10时，错误地将minutes拼接到小时文本中：hText = '0$minutes'，这就是出现059的原因——时钟从10小时开始递减时，第一次进入else分支的minutes为59，导致小时显示成059。
2. 分钟显示逻辑错误：分钟小于10时，用seconds拼接文本：minText = '0$seconds'，导致分钟显示混乱。
3. 时间递减逻辑混乱：初始的if (hours >=10)分支同时递减时、分、秒，完全不符合倒计时的正常逻辑，会引发时间跳变。

修复后的完整代码 #

class Page extends StatefulWidget {
  const Page({super.key});

  @override
  State<Page> createState() => _PageState();
}

class _PageState extends State<Page> {
  int seconds = 0;
  int minutes = 0;
  int hours = 10;
  String secText = '00';
  String minText = '00';
  String hText = '10';
  Timer? _timer;

  @override
  void initState() {
    super.initState();
    // 初始化显示文本
    _updateDisplayText();
    _handleTimer();
  }

  void _handleTimer() {
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {
        // 标准倒计时逻辑：先减秒，再处理分钟、小时的进位
        if (seconds > 0) {
          seconds--;
        } else {
          seconds = 59;
          if (minutes > 0) {
            minutes--;
          } else {
            minutes = 59;
            if (hours > 0) {
              hours--;
            } else {
              // 时间耗尽，停止计时器
              _timer?.cancel();
              return;
            }
          }
        }
        // 更新显示文本
        _updateDisplayText();
      });
    });
  }

  // 统一处理数字补零，简化逻辑
  void _updateDisplayText() {
    secText = seconds.toString().padLeft(2, '0');
    minText = minutes.toString().padLeft(2, '0');
    hText = hours.toString().padLeft(2, '0');
  }

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

关键修复说明 #

• 重构倒计时逻辑：遵循正常时间递减流程——每秒先减秒数，秒归零时重置为59并减分钟；分钟归零时重置为59并减小时；小时归零时停止计时器。
• 统一文本更新：用padLeft(2, '0')简化数字补零操作，同时确保每个文本对应正确的时间变量（小时用hours、分钟用minutes、秒用seconds）。
• 添加资源清理：在页面销毁时取消计时器，避免内存泄漏。

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