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('重置倒计时'), // 按钮文本
),
],
),
),
);
}
}
二,测试效果:

浙公网安备 33010602011771号