flutter: 比较完善的倒计时类

一,代码:

说明:参考了https://blog.csdn.net/u014361280/article/details/146199443

1,类:

import 'dart:async';
import 'package:flutter/material.dart';

class CountdownTimer {
  int _duration; // 倒计时总时长(单位:秒)
  Timer? _timer; // 定时器对象,用于每秒触发一次事件
  int _remainingTime = 0; // 剩余时间(单位:秒)
  bool _isPaused = false; // 标志,表示倒计时是否处于暂停状态

  // 回调函数
  final VoidCallback onStart; // 倒计时开始时触发的回调
  final VoidCallback onEnd; // 倒计时结束时触发的回调
  final ValueChanged<int> onTick; // 每秒触发的回调,参数为剩余时间

  // 构造函数,初始化倒计时总时长和回调函数
  CountdownTimer({
    required int duration, // 倒计时时间(单位:秒)
    required this.onStart, // 倒计时开始事件
    required this.onEnd, // 倒计时结束事件
    required this.onTick, // 倒计时期间秒事件
  }) : _duration = duration;

  // 开始倒计时
  void start() {
    // 首先调用 stop 方法,确保之前的倒计时(如果存在)被停止
    stop();
    // 将剩余时间设置为倒计时总时长
    _remainingTime = _duration;
    // 将暂停标志设置为 false
    _isPaused = false;
    // 触发倒计时开始事件
    onStart();
    // 调用内部方法 _startTimer,启动定时器
    _startTimer();
  }

  // 暂停倒计时
  void pause() {
    // 将暂停标志设置为 true
    _isPaused = true;
    // 取消当前的定时器
    _timer?.cancel();
  }

  // 继续倒计时
  void resume() {
    // 检查是否处于暂停状态
    if (_isPaused) {
      // 将暂停标志设置为 false
      _isPaused = false;
      // 调用内部方法 _startTimer,重新启动定时器
      _startTimer();
    }
  }

  // 停止倒计时
  void stop() {
    // 取消当前的定时器
    _timer?.cancel();
    // 将剩余时间设置为 0
    _remainingTime = 0;
    // 将暂停标志设置为 false
    _isPaused = false;
  }

  // 重置倒计时
  void reset() {
    // 调用 stop 方法,停止倒计时
    stop();
    // 将剩余时间设置为倒计时总时长
    _remainingTime = _duration;
  }

  // 内部方法:启动定时器
  void _startTimer() {
    // 创建一个每秒触发一次的定时器
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      // 检查是否处于暂停状态,且剩余时间是否大于 0
      if (!_isPaused && _remainingTime > 0) {
        // 减少剩余时间
        _remainingTime--;
        // 触发每秒事件,将剩余时间作为参数传递
        onTick(_remainingTime);
      } else if (_remainingTime <= 0) {
        // 如果剩余时间小于或等于 0,取消定时器
        timer.cancel();
        // 触发倒计时结束事件
        onEnd();
      }
    });
  }
}

2,在页面上的调用:

import 'package:flutter/material.dart';

import '../lib/CountdownTimer.dart';

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

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

class _CountPageState extends State<CountPage> {

  late CountdownTimer _countdownTimer; // 倒计时工具类实例
  int _remainingTime = 120; // 默认倒计时时间(单位:秒)

  @override
  void initState() {
    super.initState();
    // 初始化倒计时工具类实例,传入默认倒计时时间以及各个回调函数
    _countdownTimer = CountdownTimer(
      duration: _remainingTime,
      onStart: () {
        print('倒计时开始'); // 倒计时开始时打印日志
      },
      onEnd: () {
        print('倒计时结束'); // 倒计时结束时打印日志
      },
      onTick: (remainingTime) {
        setState(() {
          _remainingTime = remainingTime; // 更新剩余时间
        });
      },
    );
  }

  @override
  void dispose() {
    _countdownTimer.stop();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
        title: Text('倒计时例子'),
    ),
    body:Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center, // 垂直居中对齐
        children: <Widget>[
          Text('倒计时: $_remainingTime 秒'), // 显示剩余时间
          ElevatedButton(
            onPressed: () {
              _countdownTimer.start(); // 调用倒计时工具类的 start 方法开始倒计时
            },
            child: const Text('开始倒计时'), // 按钮文本
          ),
          ElevatedButton(
            onPressed: () {
              _countdownTimer.pause(); // 调用倒计时工具类的 pause 方法暂停倒计时
            },
            child: const Text('暂停倒计时'), // 按钮文本
          ),
          ElevatedButton(
            onPressed: () {
              _countdownTimer.resume(); // 调用倒计时工具类的 resume 方法继续倒计时
            },
            child: const Text('继续倒计时'), // 按钮文本
          ),
          ElevatedButton(
            onPressed: () {
              _countdownTimer.stop(); // 调用倒计时工具类的 stop 方法停止倒计时
            },
            child: const Text('停止倒计时'), // 按钮文本
          ),
          ElevatedButton(
            onPressed: () {
              _countdownTimer.reset(); // 调用倒计时工具类的 reset 方法重置倒计时
              setState(() {
                _remainingTime = 120; // 重置剩余时间为默认值
              });
            },
            child: const Text('重置倒计时'), // 按钮文本
          ),
        ],
      ),
    ),
    );
  }
}

二,测试效果:

 

posted @ 2025-04-19 10:50  刘宏缔的架构森林  阅读(114)  评论(0)    收藏  举报