本文实例为大家分享了Flutter实现倒计时功能的具体代码,供大家参考,具体内容如下 有一个需求,需要在页面进行显示倒计时,倒计时结束后,做相应的逻辑处理。 实现思路:在Flutte
本文实例为大家分享了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;
int 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;
});
});
}
@override
void initState() {
super.initState();
//开始倒计时,这里传入的是秒数
startCountDown(5000);
}
@override
void dispose() {
super.dispose();
if (_timer != null) {
if (_timer.isActive) {
_timer.cancel();
_timer = null;
}
}
}
@override
Widget 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
),),
],
),
),
);
}
}
效果:
--结束END--
本文标题: Flutter实现倒计时功能
本文链接: https://lsjlt.com/news/143508.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-21
2023-10-28
2023-10-28
2023-10-27
2023-10-27
2023-10-27
2023-10-27
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0