flutter实现倒计时加载页面
作者:sai-lingee 发布时间:2023-08-18 23:30:09
标签: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'),
),
);
}
}
来源:https://blog.csdn.net/weixin_47271626/article/details/118679900
0
投稿
猜你喜欢
- 在android开发中,有时候我们想获取手机的一些硬件信息,比如android手机的总内存和可用内存大小。这个该如何实现呢?通过读取文件&q
- 好久没有做web了,JSON目前比较流行,闲得没事,所以动手试试将对象序列化为JSON字符(尽管DotNet Framework
- 现如今打开一个 App,比如头条、微博,都会有长列表,随着我们不断地滑动,视窗内的内容也会不断地更新。今天就用 Flutter 实现一下这种
- Android指定SnackBar在屏幕的位置Snackbar 常以一个小的弹出框的形式,出现在手机屏幕下方或者桌面左下方,并且是在屏幕所有
- 自定义 webflux 容器配置配置代码@Componentpublic class ContainerConfig extends Rea
- 曾几何时,我们写代码的时候,每次写Bean的时候都会使用快捷键生成get/set方法,有时候我经常会想,既然每一个Bean我们都会给其提供g
- 引言备忘录模式经常可以遇到,譬如下面这些场景:浏览器回退:浏览器一般有浏览记录,当我们在一个网页上点击几次链接之后,可在左上角点击左箭头回退
- 拆分实现流程请看下面这张图首先我们得对线程池进行一个功能拆分Thread Pool 就是我们的线程池,t1,t2,t3代表三个线程Block
- 1.官网下载JDK:1.1下载地址:https://www.oracle.com/java/technologies/javase-down
- 写在前面从Java 1.0开始,引入java.io包;到Java 1.4再扩展了java.nio包;再到java 1.7又添加了新的流类,使
- 本文实例讲述了Java单例模式下的MongoDB数据库操作工具类。分享给大家供大家参考,具体如下:我经常对MongoDB进行一些基础操作,将
- 本文介绍了Java实现动态获取图片验证码的示例代码,分享给大家,具体如下:import javax.imageio.ImageIO;impo
- 我就废话不多说了,大家还是直接看代码吧~<?xml version="1.0" encoding="UT
- 目录1.搭建环境2.项目搭建3.配置maven4.项目结构5.配置 MapperScan 注解6.创建实体7.创建接口8.测试8.1 upd
- public static String toUtf8String(String s) {
- 文件分割与合并是一个常见需求,比如:上传大文件时,可以先分割成小块,传到服务器后,再进行合并。很多高大上的分布式文件系统(比如:google
- AlertDialog可以在当前的界面上显示一个对话框,这个对话框是置顶于所有界面元素之上的,能够屏蔽掉其他控件的交互能力,因此AlertD
- 本文实例讲述了Java实现的不同图片居中剪裁生成同一尺寸缩略图功能。分享给大家供大家参考,具体如下:因为业务需要,写了这样一个简单类,希望能
- 我们讲一下Criteria查询,这个对于不是太熟悉SQL语句的我们这些程序员来说是很容易上手的。 废话不多说,看一下例子:&nbs
- SpringMvc中普通类注入Service为null场景:使用Quartz定时器时,普通的java类需要注入spring的service类