flutter實現(xiàn)倒計時加載頁面
本文實例為大家分享了flutter實現(xiàn)倒計時加載頁面的具體代碼,供大家參考,具體內(nèi)容如下
效果圖

實現(xiàn)步驟
1、pubspec.yaml中添加依賴 flustars,該包的TimelineUtil和TimerUtil類可以實現(xiàn)計時功能
dependencies: ? flustars: ^0.3.3
!注意空格哦
2、代碼實現(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(() {
? ? ? ? //每次時間間隔回調(diào),把每次當前總時間ms除以1000就是秒
? ? ? ? current_time = millisUntilFinished / 1000;
? ? ? ? //倒計時結束時 跳轉到首頁 當然也可以等待資源加載完成再跳轉
? ? ? ? if (current_time == 0) {
? ? ? ? ? /*等待資源完成代碼塊*/
? ? ? ? ? //跳轉到首頁
? ? ? ? ? Navigator.push(
? ? ? ? ? ? ? context, MaterialPageRoute(builder: (context) => HomePage()));
? ? ? ? }
? ? ? });
? ? });構造頁面
?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; //計時對象
? double current_time = 0; //當前時間
? @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(() {
? ? ? ? //每次時間間隔回調(diào),把每次當前總時間ms除以1000就是秒
? ? ? ? current_time = millisUntilFinished / 1000;
? ? ? ? //倒計時結束時 跳轉到首頁 當然也可以等待資源加載完成再跳轉
? ? ? ? if (current_time == 0) {
? ? ? ? ? /*等待資源完成代碼塊*/
? ? ? ? ? //跳轉到首頁
? ? ? ? ? Navigator.push(
? ? ? ? ? ? ? context, MaterialPageRoute(builder: (context) => HomePage()));
? ? ? ? }
? ? ? });
? ? });
? ? //開始倒計時
? ? 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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Android Intent-Filter匹配規(guī)則解析
這篇文章主要介紹了Android Intent-Filter匹配規(guī)則的相關資料,幫助大家更好的進行Android開發(fā),感興趣的朋友可以了解下2020-12-12
Android 讀取assets和raw文件內(nèi)容實例代碼
這篇文章主要介紹了Android 讀取assets和raw文件內(nèi)容的相關資料,并附簡單實例代碼,需要的朋友可以參考下2016-10-10
Android開發(fā)基于ScrollView實現(xiàn)的漸變導航欄效果示例
這篇文章主要介紹了Android開發(fā)基于ScrollView實現(xiàn)的漸變導航欄效果,涉及ScrollView事件響應及元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2017-12-12
Flutter下Android Studio配置gradle的方法
這篇文章主要介紹了Flutter下Android Studio配置gradle的方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04

