Flutter 学习之旅之 flutter 实现简朴自界说的倒计时 CountdownTimer 功能 ...

羊蹓狼 · 2025-3-15 09:39:11

Flutter 学习之旅之 flutter 实现简朴自界说的倒计时 CountdownTimer 功能/监听倒计时开始/竣事/计时中的事件

目录
Flutter 学习之旅之 flutter 实现简朴自界说的倒计时 CountdownTimer 功能/监听倒计时开始/竣事/计时中的事件
一、简朴先容
二、CountdownTimer
1、开发留意事项
2、利用留意事项
三、简朴效果展示
四、简朴案例实现
五、关键代码

一、简朴先容

Flutter 是一款开源的 UI 软件开发工具包，由 Google 开发和维护。它允许开发者利用一套代码同时构建跨平台的应用程序，包括移动设备（iOS 和 Android）、Web 和桌面平台（Windows、macOS 和 Linux）。
Flutter 利用 Dart 编程语言，它可以将代码编译为 ARM 或 Intel 呆板代码以及 JavaScript，从而实现快速的性能。Flutter 提供了一个丰富的预置小部件库，开发者可以根据自己的需求灵活地控制每个像素，从而创建自界说的、适应性强的筹划，这些筹划在任何屏幕上都能呈现精彩的外观和感觉。

二、CountdownTimer

CountdownTimer 是一个封装好的倒计时工具类，用于实现倒计时功能。它支持自界说倒计时总时长，并通过回调函数提供倒计时开始、竣事以及每秒事件的处理本领。此外，还支持停息、继续、制止和重置倒计时的操作，方便在不同场景下灵活控制倒计时过程。在 Flutter 应用中，通过简朴的调用即可实现复杂的倒计时逻辑，实用于验证码倒计时、运动倒计时等多种场景。
在开发和利用 CountdownTimer 时，须要留意以下几点：
1、开发留意事项

避免内存泄漏：
- 确保在倒计时竣事或页面烧毁时取消定时器（_timer?.cancel()），避免定时器继续运行导致内存泄漏。
- 在 dispose 方法中开释资源，例如：
  1. @override
  2. void dispose() {
  3. _countdownTimer.stop();
  4. super.dispose();
  5. }
  复制代码
线程安全：
- Timer 是基于 Dart 的单线程模型运行的，因此不须要额外处理线程安全问题。但要确保在回调中更新 UI 时利用 setState 或其他符合的响应式方法。
避免重复启动：
- 在调用 start 方法之前，建议先调用 stop 方法，确保不会重复启动定时器。例如：
  1. void start() {
  2. stop();
  3. _remainingTime = _duration;
  4. _isPaused = false;
  5. onStart();
  6. _startTimer();
  7. }
  复制代码
处理停息和继续逻辑：
- 停息时取消定时器，并设置 _isPaused = true。
- 继续时重新启动定时器，并确保 _isPaused = false。
回调函数的利用：
- 确保回调函数（onStart、onEnd、onTick）不会抛出非常，否则可能导致定时器无法正常工作。

2、利用留意事项

初始化参数：
- 在初始化 CountdownTimer 时，确保传入的 duration 参数大于 0，否则倒计时无法正常工作。
按钮状态管理：
- 在 UI 中，根据倒计时的状态（开始、停息、继续、制止）动态更新按钮的可用状态，避免用户误操作。例如：
  1. bool isCounting = false;
  2. bool isPaused = false;
  4. void start() {
  5. isCounting = true;
  6. isPaused = false;
  7. _countdownTimer.start();
  8. }
  10. void pause() {
  11. isPaused = true;
  12. _countdownTimer.pause();
  13. }
  15. void resume() {
  16. isPaused = false;
  17. _countdownTimer.resume();
  18. }
  20. void stop() {
  21. isCounting = false;
  22. _countdownTimer.stop();
  23. }
  复制代码
避免重复调用：
- 在 UI 中，确保不会重复调用 start 方法。例如，可以利用一个标志位来判断倒计时是否已经在运行。
倒计时竣过后重置：
- 假如须要在倒计时竣过后重新开始，建议调用 reset 方法重置倒计时。
测试界限条件：
- 测试倒计时的界限条件，例如：
  - 倒计时时间非常短（如 1 秒）。
  - 倒计时时间非常长（如数小时）。
  - 在倒计时过程中频繁停息和继续。
适配不同设备：
- 确保倒计时在不同设备（如手机、平板、Web）上表现同等，特别是在时间精度和 UI 更新方面。
用户反馈：
- 在倒计时过程中，为用户提供明白的反馈，例如显示剩余时间、倒计时竣事的提示等。

通过留意以上事项，可以确保 CountdownTimer 在开发和利用过程中更加稳定、可靠，而且能够满足各种实际需求。

三、简朴效果展示

四、简朴案例实现

1、这里利用 Android Studio 进行创建 Flutter 项目

2、创建一个 application 的 Flutter 项目

3、初次的项目结构如下

4、编写实现 CountdownTimer 功能

5、在 main 中测试倒计时功能

6、毗连设备，运行效果如下

五、关键代码

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企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

Flutter 学习之旅之 flutter 实现简朴自界说的倒计时 CountdownTimer 功能 ...

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块

Flutter 学习之旅 之 flutter 实现简朴自界说的倒计时 CountdownTimer 功能 ...

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块

Flutter 学习之旅之 flutter 实现简朴自界说的倒计时 CountdownTimer 功能 ...