Flutter倒计时功能
u010186280 人气:0有一个需求,需要在页面进行显示倒计时,倒计时结束后,做相应的逻辑处理。
实现思路:在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 ),), ], ), ), ); } }
效果:
加载全部内容