当前位置：首页 > news >正文

Flutter实现倒计时功能,秒数转时分秒，然后倒计时

news 2025/7/20 20:18:11

Flutter实现倒计时功能
发布时间：2023/05/12
本文实例为大家分享了Flutter实现倒计时功能的具体代码，供大家参考，具体内容如下

有一个需求，需要在页面进行显示倒计时，倒计时结束后，做相应的逻辑处理。

实现思路：在Flutter中，Timer.periodic提供了循环功能，查看函数定义：

factory Timer.periodic(Duration duration, void callback(Timer timer))

第一个参数就是时间间隔，第二个参数就是事件处理回调。

由于后台返回的是秒数，所以需要根据总秒数计算小时，分钟，秒。同时，当不满一个小时时，只显示分钟和秒数，当分钟和秒数只有一个数时（比如1分8秒，显示为01:08）前面加“0”处理。

完整代码：

import 'package:flutter/material.dart';
import 'dart:async';class CounterDownPage extends StatefulWidget {@override_CounterDownPageState createState() => _CounterDownPageState();
}class _CounterDownPageState extends State<CounterDownPage> {// 用来在布局中显示相应的剩余时间String remainTimeStr = '';Timer _timer;//倒计时 void startCountDown(int time) {// 重新计时的时候要把之前的清除掉if (_timer != null) {if (_timer.isActive) {_timer.cancel();_timer = null;}}if (time <= 0) {return;}var countTime = time;const repeatPeriod = const Duration(seconds: 1);_timer = Timer.periodic(repeatPeriod, (timer) { if (countTime <= 0) {timer.cancel();timer = null;//待付款倒计时结束，可以在这里做相应的操作return;}countTime--;//外面传进来的单位是秒，所以需要根据总秒数，计算小时，分钟，秒int hour = (countTime ~/ 3600) % 24;//如果不止24小时的就不用%24int minute = countTime % 3600 ~/60;int second = countTime % 60;var str = '';if (hour > 0) {str = str + hour.toString()+':';}if (minute / 10 < 1) {//当只有个位数时，给前面加“0”，实现效果：“:01”,":02"str = str + '0' + minute.toString() + ":";} else {str = str + minute.toString() + ":";}if (second / 10 < 1) {str = str + '0' + second.toString();} else {str = str + second.toString();}setState(() {remainTimeStr = str;});});}@overridevoid initState() {super.initState();//开始倒计时，这里传入的是秒数startCountDown(5000);}@overridevoid dispose() {super.dispose();if (_timer != null) {if (_timer.isActive) {_timer.cancel();_timer = null;}}}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("倒计时"),),body: Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: [Text("剩余", style: TextStyle(fontSize: 18,color: Color.fromRGBO(255, 111, 50, 1),fontWeight: FontWeight.bold),),Text(remainTimeStr.length > 0 ? remainTimeStr: "--", style: TextStyle(fontSize: 18,color: Color.fromRGBO(255, 111, 50, 1),fontWeight: FontWeight.bold),),],),),);}
}