Flutter實現(xiàn)倒計時功能

更新時間：2022年03月23日 17:33:36 作者：u010186280

這篇文章主要為大家詳細介紹了Flutter實現(xiàn)倒計時功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Flutter實現(xiàn)倒計時功能的具體代碼，供大家參考，具體內容如下

有一個需求，需要在頁面進行顯示倒計時，倒計時結束后，做相應的邏輯處理。

實現(xiàn)思路：在Flutter中，Timer.periodic提供了循環(huán)功能，查看函數(shù)定義：

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

第一個參數(shù)就是時間間隔，第二個參數(shù)就是事件處理回調。

由于后臺返回的是秒數(shù)，所以需要根據(jù)總秒數(shù)計算小時，分鐘，秒。同時，當不滿一個小時時，只顯示分鐘和秒數(shù)，當分鐘和秒數(shù)只有一個數(shù)時（比如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--;

? ? //外面?zhèn)鬟M來的單位是秒，所以需要根據(jù)總秒數(shù)，計算小時，分鐘，秒
? ? 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) {//當只有個位數(shù)時，給前面加“0”，實現(xiàn)效果：“: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();
? ? //開始倒計時，這里傳入的是秒數(shù)
? ? ?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
? ? ? ? ?),),
? ? ? ?],
? ? ? ),
? ? ? ),
? ? );
? }
}

效果：