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),),],),),);}
}

服務器返回的時間戳87392，現在的時間戳+87392 現在的時間戳，兩者的時間戳相差二十多個小時，也就是說87392就是秒數，直接傳秒數到上面的startCountDown方法即可。