flutter實(shí)現(xiàn)倒計(jì)時(shí)加載頁面
本文實(shí)例為大家分享了flutter實(shí)現(xiàn)倒計(jì)時(shí)加載頁面的具體代碼,供大家參考,具體內(nèi)容如下
效果圖
實(shí)現(xiàn)步驟
1、pubspec.yaml中添加依賴 flustars,該包的TimelineUtil和TimerUtil類可以實(shí)現(xiàn)計(jì)時(shí)功能
dependencies: ? flustars: ^0.3.3
!注意空格哦
2、代碼實(shí)現(xiàn)
初始化TimerUtil
late TimerUtil util; ? double current_time = 0; void initState() { ? ? super.initState(); ? ? util = new TimerUtil(mInterval: 18, mTotalTime: 5000); ? ? util.setOnTimerTickCallback((millisUntilFinished) { ? ? ? setState(() { ? ? ? ? //每次時(shí)間間隔回調(diào),把每次當(dāng)前總時(shí)間ms除以1000就是秒 ? ? ? ? current_time = millisUntilFinished / 1000; ? ? ? ? //倒計(jì)時(shí)結(jié)束時(shí) 跳轉(zhuǎn)到首頁 當(dāng)然也可以等待資源加載完成再跳轉(zhuǎn) ? ? ? ? if (current_time == 0) { ? ? ? ? ? /*等待資源完成代碼塊*/ ? ? ? ? ? //跳轉(zhuǎn)到首頁 ? ? ? ? ? Navigator.push( ? ? ? ? ? ? ? context, MaterialPageRoute(builder: (context) => HomePage())); ? ? ? ? } ? ? ? }); ? ? });
構(gòu)造頁面
?Widget build(BuildContext context) { ? ? return Scaffold( ? ? ? ? body: Column( ? ? ? children: [ ? ? ? ? Image.asset('images/2.0/beijing.jpg'), ? ? ? ? Container( ? ? ? ? ? alignment: Alignment.centerRight, ? ? ? ? ? child: SizedBox( ? ? ? ? ? ? ? height: 50, ? ? ? ? ? ? ? width: 50, ? ? ? ? ? ? ? child: Stack( ? ? ? ? ? ? ? ? children: [ ? ? ? ? ? ? ? ? ? Center(child: CircularProgressIndicator( ? ? ? ? ? ? ? ? ? ? value: current_time == 5.0 ? 0 : (5 - current_time) / 5, ? ? ? ? ? ? ? ? ? ),), ? ? ? ? ? ? ? ? ? Center(child: Text('${current_time.toInt()}'),) ? ? ? ? ? ? ? ? ],) ? ? ? ? ? ), ? ? ? ? ), ? ? ? ], ? ? )); ? }
完整代碼
import 'package:flustars/flustars.dart'; import 'package:flutter/material.dart'; void main() { ? runApp(MyApp()); } class MyApp extends StatelessWidget { ? @override ? Widget build(BuildContext context) { ? ? return MaterialApp( ? ? ? home: LoadingPage(), ? ? ); ? } } class LoadingPage extends StatefulWidget { ? const LoadingPage({Key? key}) : super(key: key); ? @override ? _LoadingPageState createState() => _LoadingPageState(); } ?? class _LoadingPageState extends State<LoadingPage> { ? late TimerUtil util; //計(jì)時(shí)對象 ? double current_time = 0; //當(dāng)前時(shí)間 ? @override ? Widget build(BuildContext context) { ? ? return Scaffold( ? ? ? ? body: Column( ? ? ? children: [ ? ? ? ? Image.asset('images/2.0/beijing.jpg'), ? ? ? ? Container( ? ? ? ? ? alignment: Alignment.centerRight, ? ? ? ? ? child: SizedBox( ? ? ? ? ? ? ? height: 50, ? ? ? ? ? ? ? width: 50, ? ? ? ? ? ? ? child: Stack( ? ? ? ? ? ? ? ? children: [ ? ? ? ? ? ? ? ? ? Center(child: CircularProgressIndicator( ? ? ? ? ? ? ? ? ? ? value: current_time == 5.0 ? 0 : (5 - current_time) / 5, ? ? ? ? ? ? ? ? ? ),), ? ? ? ? ? ? ? ? ? Center(child: Text('${current_time.toInt()}'),) ? ? ? ? ? ? ? ? ],) ? ? ? ? ? ), ? ? ? ? ), ? ? ? ], ? ? )); ? } ? @override ? void initState() { ? ? super.initState(); ? ? util = new TimerUtil(mInterval: 18, mTotalTime: 5000); ? ? util.setOnTimerTickCallback((millisUntilFinished) { ? ? ? setState(() { ? ? ? ? //每次時(shí)間間隔回調(diào),把每次當(dāng)前總時(shí)間ms除以1000就是秒 ? ? ? ? current_time = millisUntilFinished / 1000; ? ? ? ? //倒計(jì)時(shí)結(jié)束時(shí) 跳轉(zhuǎn)到首頁 當(dāng)然也可以等待資源加載完成再跳轉(zhuǎn) ? ? ? ? if (current_time == 0) { ? ? ? ? ? /*等待資源完成代碼塊*/ ? ? ? ? ? //跳轉(zhuǎn)到首頁 ? ? ? ? ? Navigator.push( ? ? ? ? ? ? ? context, MaterialPageRoute(builder: (context) => HomePage())); ? ? ? ? } ? ? ? }); ? ? }); ? ? //開始倒計(jì)時(shí) ? ? util.startCountDown(); ? } } class HomePage extends StatelessWidget { ? const HomePage({Key? key}) : super(key: key); ? @override ? Widget build(BuildContext context) { ? ? return Scaffold( ? ? ? appBar: AppBar( ? ? ? ? title: Text('HomePage'), ? ? ? ), ? ? ); ? } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android Intent-Filter匹配規(guī)則解析
這篇文章主要介紹了Android Intent-Filter匹配規(guī)則的相關(guān)資料,幫助大家更好的進(jìn)行Android開發(fā),感興趣的朋友可以了解下2020-12-12Android 讀取assets和raw文件內(nèi)容實(shí)例代碼
這篇文章主要介紹了Android 讀取assets和raw文件內(nèi)容的相關(guān)資料,并附簡單實(shí)例代碼,需要的朋友可以參考下2016-10-10Android編程實(shí)現(xiàn)開機(jī)自動(dòng)運(yùn)行的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)開機(jī)自動(dòng)運(yùn)行的方法,分析了Android開機(jī)運(yùn)行的原理并結(jié)合實(shí)例形式給出了Android基于廣播實(shí)現(xiàn)開機(jī)運(yùn)行的技巧,需要的朋友可以參考下2016-10-10Android開發(fā)基于ScrollView實(shí)現(xiàn)的漸變導(dǎo)航欄效果示例
這篇文章主要介紹了Android開發(fā)基于ScrollView實(shí)現(xiàn)的漸變導(dǎo)航欄效果,涉及ScrollView事件響應(yīng)及元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-12-12Android 退出應(yīng)用程序的實(shí)現(xiàn)方法
這篇文章主要介紹了Android 退出應(yīng)用程序的實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2017-04-04Flutter下Android Studio配置gradle的方法
這篇文章主要介紹了Flutter下Android Studio配置gradle的方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04