Flutter 学习之旅 之 flutter 实现简朴自界说的倒计时 CountdownTimer 功能
Flutter 学习之旅 之 flutter 实现简朴自界说的倒计时 CountdownTimer 功能/监听倒计时开始/竣事/计时中的事件目录
Flutter 学习之旅 之 flutter 实现简朴自界说的倒计时 CountdownTimer 功能/监听倒计时开始/竣事/计时中的事件
一、简朴先容
二、CountdownTimer
1、开发留意事项
2、利用留意事项
三、简朴效果展示
四、简朴案例实现
五、关键代码
一、简朴先容
Flutter 是一款开源的 UI 软件开发工具包，由 Google 开发和维护。它允许开发者利用一套代码同时构建跨平台的应用程序，包括移动设备（iOS 和 Android）、Web 和桌面平台（Windows、macOS 和 Linux）。
Flutter 利用 Dart 编程语言，它可以将代码编译为 ARM 或 Intel 呆板代码以及 JavaScript，从而实现快速的性能。Flutter 提供了一个丰富的预置小部件库，开发者可以根据自己的需求灵活地控制每个像素，从而创建自界说的、适应性强的筹划，这些筹划在任何屏幕上都能呈现精彩的外观和感觉。
https://i-blog.csdnimg.cn/direct/98008ea1351f470c82429d1483f25f27.png
二、CountdownTimer
CountdownTimer 是一个封装好的倒计时工具类，用于实现倒计时功能。它支持自界说倒计时总时长，并通过回调函数提供倒计时开始、竣事以及每秒事件的处理本领。此外，还支持停息、继续、制止和重置倒计时的操作，方便在不同场景下灵活控制倒计时过程。在 Flutter 应用中，通过简朴的调用即可实现复杂的倒计时逻辑，实用于验证码倒计时、运动倒计时等多种场景。
在开发和利用 CountdownTimer 时，须要留意以下几点：
1、开发留意事项
[*] 避免内存泄漏：
[*] 确保在倒计时竣事或页面烧毁时取消定时器（_timer?.cancel()），避免定时器继续运行导致内存泄漏。
[*] 在 dispose 方法中开释资源，例如：
@override
void dispose() {
_countdownTimer.stop();
super.dispose();
}
[*] 线程安全：
[*] Timer 是基于 Dart 的单线程模型运行的，因此不须要额外处理线程安全问题。但要确保在回调中更新 UI 时利用 setState 或其他符合的响应式方法。
[*] 避免重复启动：
[*] 在调用 start 方法之前，建议先调用 stop 方法，确保不会重复启动定时器。例如：
void start() {
stop();
_remainingTime = _duration;
_isPaused = false;
onStart();
_startTimer();
}
[*] 处理停息和继续逻辑：
[*] 停息时取消定时器，并设置 _isPaused = true。
[*] 继续时重新启动定时器，并确保 _isPaused = false。
[*] 回调函数的利用：
[*] 确保回调函数（onStart、onEnd、onTick）不会抛出非常，否则可能导致定时器无法正常工作。
2、利用留意事项
[*] 初始化参数：
[*] 在初始化 CountdownTimer 时，确保传入的 duration 参数大于 0，否则倒计时无法正常工作。
[*] 按钮状态管理：
[*] 在 UI 中，根据倒计时的状态（开始、停息、继续、制止）动态更新按钮的可用状态，避免用户误操作。例如：
bool isCounting = false;
bool isPaused = false;
void start() {
isCounting = true;
isPaused = false;
_countdownTimer.start();
}
void pause() {
isPaused = true;
_countdownTimer.pause();
}
void resume() {
isPaused = false;
_countdownTimer.resume();
}
void stop() {
isCounting = false;
_countdownTimer.stop();
}
[*] 避免重复调用：
[*] 在 UI 中，确保不会重复调用 start 方法。例如，可以利用一个标志位来判断倒计时是否已经在运行。
[*] 倒计时竣过后重置：
[*] 假如须要在倒计时竣过后重新开始，建议调用 reset 方法重置倒计时。
[*] 测试界限条件：
[*] 测试倒计时的界限条件，例如：
[*] 倒计时时间非常短（如 1 秒）。
[*] 倒计时时间非常长（如数小时）。
[*] 在倒计时过程中频繁停息和继续。
[*] 适配不同设备：
[*] 确保倒计时在不同设备（如手机、平板、Web）上表现同等，特别是在时间精度和 UI 更新方面。
[*] 用户反馈：
[*] 在倒计时过程中，为用户提供明白的反馈，例如显示剩余时间、倒计时竣事的提示等。
通过留意以上事项，可以确保 CountdownTimer 在开发和利用过程中更加稳定、可靠，而且能够满足各种实际需求。
三、简朴效果展示
https://i-blog.csdnimg.cn/direct/fd71ceb3941348429d32ca554a6ba64a.gif
四、简朴案例实现
1、这里利用 Android Studio 进行创建 Flutter 项目
https://i-blog.csdnimg.cn/direct/d9f227266417476aa6667a7782dbdd5f.png
2、创建一个 application 的 Flutter 项目
https://i-blog.csdnimg.cn/direct/318eacc05cb8489aadde5bcb4a7288a5.png
3、初次的项目结构如下
https://i-blog.csdnimg.cn/direct/2a97c6274eb74690a652f53666482e81.png
4、编写实现 CountdownTimer 功能
https://i-blog.csdnimg.cn/direct/6f286ab2c00945c9a6da69c27533f6e9.png
5、在 main 中测试 倒计时功能
https://i-blog.csdnimg.cn/direct/b20f8672be8248a89d320226da0de45f.png
6、毗连设备，运行效果如下
https://i-blog.csdnimg.cn/direct/fd71ceb3941348429d32ca554a6ba64a.gif
五、关键代码
1、CountdownTimer
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();
}
});
}
} 代码阐明：
[*] 变量界说：
[*] _duration：倒计时的总时长，单位为秒。
[*] _timer：Timer 对象，用于实现每秒触发一次的倒计时功能。
[*] _remainingTime：当前剩余的时间，单位为秒。
[*] _isPaused：布尔值，用于标志倒计时是否处于停息状态。
[*] 构造函数：
[*] 接收倒计时总时长和三个回调函数（onStart、onEnd、onTick）。
[*] 初始化 _duration 为传入的倒计时总时长。
[*] start 方法：
[*] 调用 stop 方法确保之前的倒计时被制止。
[*] 将剩余时间设置为倒计时总时长。
[*] 将停息标志设置为 false。
[*] 触发倒计时开始事件。
[*] 调用 _startTimer 方法启动定时器。
[*] pause 方法：
[*] 将停息标志设置为 true。
[*] 取消当前的定时器。
[*] resume 方法：
[*] 检查是否处于停息状态。
[*] 假如处于停息状态，将停息标志设置为 false，并重新启动定时器。
[*] stop 方法：
[*] 取消当前的定时器。
[*] 将剩余时间设置为 0。
[*] 将停息标志设置为 false。
[*] reset 方法：
[*] 调用 stop 方法制止倒计时。
[*] 将剩余时间设置为倒计时总时长。
[*] _startTimer 内部方法：
[*] 创建一个每秒触发一次的定时器。
[*] 在定时器的回调中：
[*] 检查是否处于停息状态，且剩余时间是否大于 0。
[*] 假如满足条件，减少剩余时间，并触发每秒事件。
[*] 假如剩余时间小于或等于 0，取消定时器并触发倒计时竣事事件。
通过这些详细的注释，你可以更好地理解代码的逻辑和实现细节。
2、main
import 'package:flutter/material.dart';
import 'package:test_countdown_timer/countdown_timer.dart'; // 导入封装好的倒计时工具类
void main() {
runApp(const MyApp()); // 启动应用
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('倒计时示例'), // 应用的标题
),
body: const CountdownExample(), // 倒计时示例页面
),
);
}
}
class CountdownExample extends StatefulWidget {
const CountdownExample({super.key});
@override
_CountdownExampleState createState() => _CountdownExampleState();
}
class _CountdownExampleState extends State<CountdownExample> {
late CountdownTimer _countdownTimer; // 倒计时工具类实例
int _remainingTime = 60; // 默认倒计时时间（单位：秒）
@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 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 = 60; // 重置剩余时间为默认值
});
},
child: const Text('重置倒计时'), // 按钮文本
),
],
),
);
}
} 详细注释阐明：
[*] 导入模块：
[*] import 'package:flutter/material.dart';：导入 Flutter 的 Material 组件库，用于构建 UI。
[*] import 'package:test_countdown_timer/countdown_timer.dart';：导入封装好的倒计时工具类 CountdownTimer。
[*] main 函数：
[*] void main() { runApp(const MyApp()); }：应用的入口点，启动应用。
[*] MyApp 类：
[*] class MyApp extends StatelessWidget：界说一个无状态的 Flutter 应用。
[*] build 方法：构建应用的根组件，包含一个 Scaffold，其 appBar 显示标题，body 显示倒计时示例页面。
[*] CountdownExample 类：
[*] class CountdownExample extends StatefulWidget：界说一个有状态的倒计时示例页面。
[*] _CountdownExampleState 类：CountdownExample 的状态类，用于管理倒计时的状态。
[*] _CountdownExampleState 类：
[*] _countdownTimer：倒计时工具类的实例。
[*] _remainingTime：当前剩余时间，初始值为 60 秒。
[*] initState 方法：初始化倒计时工具类实例，传入默认倒计时时间以及各个回调函数。
[*] onStart：倒计时开始时触发的回调，打印日记。
[*] onEnd：倒计时竣事时触发的回调，打印日记。
[*] onTick：每秒触发的回调，更新剩余时间并调用 setState 刷新 UI。
[*] build 方法：构建倒计时示例页面的 UI，包含一个显示剩余时间的文本和五个按钮，分别用于控制倒计时的开始、停息、继续、制止和重置。
[*] 按钮功能：
[*] 开始倒计时：调用 _countdownTimer.start() 方法开始倒计时。
[*] 停息倒计时：调用 _countdownTimer.pause() 方法停息倒计时。
[*] 继续倒计时：调用 _countdownTimer.resume() 方法继续倒计时。
[*] 制止倒计时：调用 _countdownTimer.stop() 方法制止倒计时。
[*] 重置倒计时：调用 _countdownTimer.reset() 方法重置倒计时，并将剩余时间重置为默认值。
通过这些详细的注释，你可以更好地理解代码的逻辑和实现细节。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]