flutter的加载弹框
代码组件:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:zhongfa_apps/services/ScreenAdapter.dart'; ///加载弹框
class ProgressDialog {
static bool _isShowing = false; ///展示 {Widget child = const CircularProgressIndicator(valueColor: AlwaysStoppedAnimation(Colors.red),)}
static void showProgress(BuildContext context) {
if (!_isShowing) {
_isShowing = true;
Navigator.push(
context,
_PopRoute(
child: _Progress(
child: new Padding(
padding: const EdgeInsets.all(12.0),
child: new Center(
//保证控件居中效果
child: new SizedBox(
width: 120.0,
height: 120.0,
child: new Container(
decoration: ShapeDecoration(
color: Colors.black54,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
),
),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new CircularProgressIndicator(
backgroundColor: Colors.white,
strokeWidth: 4.0,
valueColor:
new AlwaysStoppedAnimation(Colors.black38),
),
new Padding(
padding: const EdgeInsets.only(
top: 20.0,
),
child: new Text(
"加载中...",
style: new TextStyle(
fontSize: ScreenAdapter.size(),
color: Colors.white),
),
),
],
),
),
),
),
),
),
),
);
}
} ///隐藏
static void hideProgress(BuildContext context) {
if (_isShowing) {
Navigator.of(context).pop();
_isShowing = false;
}
}
} ///Widget
class _Progress extends StatelessWidget {
final Widget child; _Progress({
Key key,
@required this.child,
}) : assert(child != null),
super(key: key); @override
Widget build(BuildContext context) {
return Material(
color: Colors.transparent,
child: Center(
child: child,
));
}
} ///Route
class _PopRoute extends PopupRoute {
final Duration _duration = Duration(milliseconds: );
Widget child; _PopRoute({@required this.child}); @override
Color get barrierColor => null; @override
bool get barrierDismissible => true; @override
String get barrierLabel => null; @override
Widget buildPage(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return child;
} @override
Duration get transitionDuration => _duration;
}
页面调用:
import 'dart:async'; import 'package:flutter/material.dart';
import 'package:zhongfa_apps/widget/public/ProgressDialog.dart'; class Test003 extends StatefulWidget {
Test003({Key key}) : super(key: key); @override
_Test003State createState() => _Test003State();
} class _Test003State extends State<Test003> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("测试页面"),
),
body: Container(
child: InkWell(
onTap: () {
ProgressDialog.showProgress(context);
print("打印");
Timer _timer;
_timer = Timer.periodic(Duration(seconds: ),(res){
ProgressDialog.hideProgress(context);
_timer.cancel(); });
},
child: Text("加载",style: TextStyle(
fontSize:
)),
),
),
);
}
}
flutter的加载弹框的更多相关文章
- 加载旋转框(loading spinner)
目标是这样的 用到的组件 AlertDialog 和 ProgressBar 先创建一个 AlertDialog 的布局 <?xml version="1.0" encodi ...
- IOS开发UI篇之──自定义加载等待框(MBProgressHUD)
本文转载至 http://blog.csdn.net/xunyn/article/details/8064984 原文地址http://www.189works.com/article-89289 ...
- 安卓 自定义AlertDialog对话框(加载提示框)
AlertDialog有以下六种使用方法: 一.简单的AlertDialog(只显示一段简单的信息) 二.带按钮的AlertDialog(显示提示信息,让用户操作) 三.类似ListView的Aler ...
- Flutter ------- WebView加载网页
在Flutter 加载网页?也是有WebView的哦,和Android一样 1.添加依赖 dependencies: flutter_webview_plugin: ^0.2.1+2 2.导入库 im ...
- js 滚动加载iframe框中内容
var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest; //滚动加载 var scrollLoad =function( ...
- Extjs treePanel 加载等待框
beforeload : { fn : function (store, operation, eOpts){ loadMask = new Ext.LoadMask(Ext.get(this.get ...
- angularJS配合bootstrap动态加载弹出提示内容
1.bootstrp的弹出提示 bootstrap已经帮我们封装了非常好用的弹出提示Popover. http://v3.bootcss.com/javascript/#popovers 2.自定义p ...
- yii2 页面加载警告框
在视图页面代码如下 <?php use kartik\alert\Alert; echo Alert::widget([ 'type' => Alert::TYPE_INFO, 'titl ...
- vue图片预加载
目的: 图片预加载能够使得用户在浏览后续页面的时候,不会出现图片加载一半导致浏览不流畅的情况. 一.方法一 项目打开的时候要对图片进行预加载,在App.vue里面的beforeCreate添加预加载程 ...
随机推荐
- 零基础python教程—python数组
在学习Python过程中数组是个逃不过去的一个关,既然逃不过去咱就勇敢面对它,学习一下python中数组如何使用. 1.数组定义和赋值 python定义一个数组很简单,直接 arr = [];就可以了 ...
- CH6803 导弹防御塔
6803 导弹防御塔 0x60「图论」例题 背景 Freda的城堡-- "Freda,城堡外发现了一些入侵者!" "喵...刚刚探究完了城堡建设的方案数,我要歇一会儿嘛l ...
- 「TJOI2018」str
碱基序列 题目描述 小豆参加了生物实验室.在实验室里,他主要研究蛋白质.他现在研究的蛋白质是由$k$个氨基酸按一定顺序构成的.每一个氨基酸都可能有$a$种碱基序列$s_{i,j}$构成. 现在小豆有一 ...
- laravel 依赖注入
<?php interface Animal{ public function attack(); public function talk(); } class People implemen ...
- Linux命令基础1-环境介绍
1.linux的简单历史 1)先有unix,后来有linux 2)linux操作系统是开源和免费的,里面的软件可能部分要收费 3)linux有不同发行版本,redhat,centos等. 4)1991 ...
- 拉格朗日插值matlab实现
已给sin0.32=0.314567,sin0.34=0.333487,sin0.36=0.352274,用线性插值及抛物插值计算sin0.3367的值并估计截断误差. 1. 线性插值 clc;cle ...
- 棋盘覆盖 状压DP+矩阵快速幂
题意:有一个m 行n 列的矩形方格棋盘,1 < = m< = 5,1=< n< =10^9,用1*2 的骨牌(可横放或竖放)完全覆盖,骨牌不能重叠,有多少种不同的覆盖的方法.你 ...
- ssh远程后台运行
ssh hadoop8 "/export/server/storm/bin/storm nimbus >/export/server/storm/nimbus_start.log 2& ...
- MongoDB 查看集合的统计信息
和 RDBMS 一样, MongoDB 同样存储集合的统计信息,通过调用命令 db.collection.stats() 可以方便的查看集合的统计信息. --1 查看集合 things 的统计信息 r ...
- mage Ansible学习2 Playbook
一.上集回顾 1.运维: 手动 --> 标准化 --> 工具化 --> 自动化 --> 智能化 2.工具化 OS Install:PXE ,Cobbler:Virutaliza ...