網(wǎng)站首頁 編程語言 正文
本文實例為大家分享了Flutter實現(xiàn)倒計時功能的具體代碼,供大家參考,具體內(nèi)容如下
有一個需求,需要在頁面進行顯示倒計時,倒計時結(jié)束后,做相應的邏輯處理。
實現(xiàn)思路:在Flutter中,Timer.periodic
提供了循環(huán)功能,查看函數(shù)定義:
factory Timer.periodic(Duration duration, void callback(Timer timer))
第一個參數(shù)就是時間間隔,第二個參數(shù)就是事件處理回調(diào)。
由于后臺返回的是秒數(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{ ? // 用來在布局中顯示相應的剩余時間 ? 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; ? ? ? ? //待付款倒計時結(jié)束,可以在這里做相應的操作 ? ? ? ?? ? ? ? ? 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 ? ? ? ? ?),), ? ? ? ?], ? ? ? ), ? ? ? ), ? ? ); ? } }
效果:
原文鏈接:https://blog.csdn.net/u010186280/article/details/109000424
相關(guān)推薦
- 2022-04-30 利用Python生成Excel炫酷圖表_python
- 2022-08-15 Golang通過包長協(xié)議處理TCP粘包的問題解決_Golang
- 2022-09-30 python計算列表元素與乘積詳情_python
- 2022-07-18 async+await:發(fā)送Ajax請求
- 2022-06-12 Linux中rm命令使用以及C/C++代碼實現(xiàn)_C 語言
- 2022-05-27 PyTorch中torch.nn.functional.cosine_similarity使用詳解_
- 2022-04-05 python將列表轉(zhuǎn)換為字符串(含有引號,用逗號間隔)
- 2022-04-24 如何利用Python實現(xiàn)簡單C++程序范圍分析_python
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細win安裝深度學習環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支