flutter实现倒计时加载页面
更新时间:2022年03月24日 08:25:08 作者:sai-lingee
这篇文章主要为大家详细介绍了flutter实现倒计时加载页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了flutter实现倒计时加载页面的具体代码,供大家参考,具体内容如下
效果图

实现步骤
1、pubspec.yaml中添加依赖 flustars,该包的TimelineUtil和TimerUtil类可以实现计时功能
dependencies: flustars: ^0.3.3
!注意空格哦
2、代码实现
初始化TimerUtil
late TimerUtil util;
double current_time = 0;
void initState() {
super.initState();
util = new TimerUtil(mInterval: 18, mTotalTime: 5000);
util.setOnTimerTickCallback((millisUntilFinished) {
setState(() {
//每次时间间隔回调,把每次当前总时间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(() {
//每次时间间隔回调,把每次当前总时间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'),
),
);
}
}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
解决flutter 错误: 程序包androidx.lifecycle不存在问题
这篇文章主要介绍了解决flutter 错误: 程序包androidx.lifecycle不存在问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-09
Android Studio通过Artifactory搭建本地仓库优化编译速度的方法
这篇文章主要介绍了Android Studio通过Artifactory搭建本地仓库优化编译速度的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-03-03
Android基于TextView属性android:ellipsize实现跑马灯效果的方法
这篇文章主要介绍了Android基于TextView属性android:ellipsize实现跑马灯效果的方法,涉及Android跑马灯效果所涉及的TextView相关属性与使用方法,需要的朋友可以参考下2016-08-08


最新评论