flutter 页面加载动画_Flutter撸一个加载动画
目標
先上效果圖：
目標.gif
是不是感覺跟ProgressDialog創建出來的一毛一樣！！！
實現思路
使用對話框
首先想到的是用Flutter自帶的SimpleDialog對話框，但是想到這玩意貌似要主動點擊按鈕關閉，這種方案不符合自己的要求。
根據情況返回不同布局
在加載的時候返回加載的布局，不加載的時候返回登陸頁面布局，代碼如下:import?'package:flutter/material.dart';import?'package:flutter_loading/Toast.dart';void?main()?=>?runApp(MyApp());class?MyApp?extends?StatelessWidget?{??//?This?widget?is?the?root?of?your?application.
@override
Widget?build(BuildContext?context)?{????return?MaterialApp(
title:?'Flutter?Demo',
theme:?ThemeData(
primarySwatch:?Colors.blue,
),
home:?MyHomePage(title:?'加載動畫'),
);
}
}class?MyHomePage?extends?StatefulWidget?{
MyHomePage({Key?key,?this.title})?:?super(key:?key);??final?String?title;??@override
_MyHomePageState?createState()?=>?_MyHomePageState();
}class?_MyHomePageState?extends?State?{
bool?_loading?=?false;??@override
Widget?build(BuildContext?context)?{????return?Scaffold(
appBar:?AppBar(
title:?Text(widget.title),
),
body:?_childLayout(),
);
}??Widget?_childLayout()?{????if?(_loading)?{??????return?Center(
child:?Container(
child:?CircularProgressIndicator(),
),
);
}?else?{??????return?Center(
child:?RaisedButton(
onPressed:?()?=>?_onRefresh(),
child:?Text('顯示加載動畫'),
),
);
}
}??Future?_onRefresh()?async?{
setState(()?{
_loading?=?!_loading;
});
await?Future.delayed(Duration(seconds:?3),?()?{
setState(()?{
_loading?=?!_loading;
Toast.show(context,?"加載完成");
});
});
}
}
重點在_childLayout()方法，當加載中的時候返回環形進度條，加載完成，返回實際顯示的布局，代碼效果如下：
GIF0.gif
看效果是好像實現，但是這種效果只適合普通數據列表頁面的加載，要是登陸頁面，你總不能這么搞吧，一點登錄，頁面布局都跑路了，只有一個圈圈有啥意思。這種方法也不行。
使用Stack層疊布局
在原本布局上面疊加一層半透明背景，顯示一個進度條。這個想法好像可以。重點來了開始擼一波
層疊布局至少有兩個控件，按照Flutter思想，一切皆控件。我們自定義一個控件叫ProgressDialog，我們這個控件接收兩個必傳參數：子布局child，是否顯示加載進度：loading，這兩個參數是必須的，所以自定義控件如下import?'package:flutter/material.dart';class?ProgressDialog?extends?StatelessWidget?{??final?bool?loading;??final?Widget?child;
ProgressDialog({Key?key,?@required?this.loading,?@required?this.child})
:?assert(child?!=?null),????????assert(loading?!=?null),????????super(key:?key);??@override
Widget?build(BuildContext?context)?{????return?null;
}
}
構造函數寫好了，那么開始寫控件，Stack層疊布局必須返回兩個以上的控件，所以先定義一個List,用來放層疊的控件組，首先要把child控件加進去，再加一個加載中的動畫。上代碼：import?'package:flutter/material.dart';class?ProgressDialog?extends?StatelessWidget?{??final?bool?loading;??final?Widget?child;
ProgressDialog({Key?key,?@required?this.loading,?@required?this.child})
:?assert(child?!=?null),????????assert(loading?!=?null),????????super(key:?key);??@override
Widget?build(BuildContext?context)?{
List?widgetList?=?[];
widgetList.add(child);????//如果正在加載，則顯示加載添加加載中布局
if?(loading)?{
widgetList.add(Center(
child:?CircularProgressIndicator(),
));
}????return?Stack(
children:?widgetList,
);
}
}
是不是感覺好像很簡單的樣子，慣例上圖：
加載中1
看圖效果好像很接近了，起碼原先的布局沒有被直接替換，但是感覺不美觀，好吧加個透明背景效果，這里就用到控件Opacity，專門用來繪制透明效果。 上代碼：import?'package:flutter/material.dart';class?ProgressDialog?extends?StatelessWidget?{??final?bool?loading;??final?Widget?child;
ProgressDialog({Key?key,?@required?this.loading,?@required?this.child})
:?assert(child?!=?null),????????assert(loading?!=?null),????????super(key:?key);??@override
Widget?build(BuildContext?context)?{
List?widgetList?=?[];
widgetList.add(child);????//如果正在加載，則顯示加載添加加載中布局
if?(loading)?{??????//增加一層黑色背景透明度為0.8
widgetList.add(
Opacity(
opacity:?0.8,
child:?ModalBarrier(
color:?Colors.black87,
)),
);??????//環形進度條
widgetList.add(Center(
child:?CircularProgressIndicator(),
));
}????return?Stack(
children:?widgetList,
);
}
}
老規矩，上圖：
增加透明度.gif
看著樣子是不是差不多，一般進度都可以用了吧，但是如果我要想在進度條下方顯示文字怎么辦？并且我看那個toast樣子蠻好看的，還想要搞成那樣的。好吧，那樣的話加載進度條和提示內容得是同一層，用個垂直布局顯示一個進度一個Text()應該能搞定：import?'package:flutter/material.dart';class?ProgressDialog?extends?StatelessWidget?{??final?bool?loading;??final?Widget?child;
ProgressDialog({Key?key,?@required?this.loading,?@required?this.child})
:?assert(child?!=?null),????????assert(loading?!=?null),????????super(key:?key);??@override
Widget?build(BuildContext?context)?{
List?widgetList?=?[];
widgetList.add(child);????//如果正在加載，則顯示加載添加加載中布局
if?(loading)?{??????//增加一層黑色背景透明度為0.8
widgetList.add(
Opacity(
opacity:?0.8,
child:?ModalBarrier(
color:?Colors.black87,
)),
);??????//環形進度條
widgetList.add(Center(
child:?Container(
padding:?const?EdgeInsets.all(20.0),
decoration:?BoxDecoration(??????????????//黑色背景
color:?Colors.black87,??????????????//圓角邊框
borderRadius:?BorderRadius.circular(10.0)),
child:?Column(????????????//控件里面內容主軸負軸劇中顯示
mainAxisAlignment:?MainAxisAlignment.center,
crossAxisAlignment:?CrossAxisAlignment.center,????????????//主軸高度最小
mainAxisSize:?MainAxisSize.min,
children:?[
CircularProgressIndicator(),
Text(????????????????'加載中...',
style:?TextStyle(color:?Colors.white),
)
],
),
),
));
}????return?Stack(
children:?widgetList,
);
}
}
用一個垂直布局Column包裹進度條和提示內容，完美解決，已經接近目標了，圖來-->
增加提醒內容.gif
目標完成，最后潤色：提示字體要讓用戶自定義，加載動畫也得可以自定義，那么最終代碼如下：import?'package:flutter/material.dart';class?ProgressDialog?extends?StatelessWidget?{??//子布局
final?Widget?child;??//加載中是否顯示
final?bool?loading;??//進度提醒內容
final?String?msg;??//加載中動畫
final?Widget?progress;??//背景透明度
final?double?alpha;??//字體顏色
final?Color?textColor;
ProgressDialog(
{Key?key,??????@required?this.loading,??????this.msg,??????this.progress?=?const?CircularProgressIndicator(),??????this.alpha?=?0.6,??????this.textColor?=?Colors.white,??????@required?this.child})
:?assert(child?!=?null),????????assert(loading?!=?null),????????super(key:?key);??@override
Widget?build(BuildContext?context)?{
List?widgetList?=?[];
widgetList.add(child);????if?(loading)?{
Widget?layoutProgress;??????if?(msg?==?null)?{
layoutProgress?=?Center(
child:?progress,
);
}?else?{
layoutProgress?=?Center(
child:?Container(
padding:?const?EdgeInsets.all(20.0),
decoration:?BoxDecoration(
color:?Colors.black87,
borderRadius:?BorderRadius.circular(4.0)),
child:?Column(
mainAxisAlignment:?MainAxisAlignment.center,
crossAxisAlignment:?CrossAxisAlignment.center,
mainAxisSize:?MainAxisSize.min,
children:?[
progress,
Container(
padding:?const?EdgeInsets.fromLTRB(10.0,?10.0,?10.0,?0),
child:?Text(
msg,
style:?TextStyle(color:?textColor,?fontSize:?16.0),
),
)
],
),
),
);
}
widgetList.add(Opacity(
opacity:?alpha,
child:?new?ModalBarrier(color:?Colors.black87),
));
widgetList.add(layoutProgress);
}????return?Stack(
children:?widgetList,
);
}
}
最后附上在工程中調用的例子代碼：import?'package:flutter/material.dart';import?'package:flutter_loading/Toast.dart';import?'package:flutter_loading/view_loading.dart';void?main()?=>?runApp(MyApp());class?MyApp?extends?StatelessWidget?{??//?This?widget?is?the?root?of?your?application.
@override
Widget?build(BuildContext?context)?{????return?MaterialApp(
title:?'Flutter?Demo',
theme:?ThemeData(
primarySwatch:?Colors.blue,
),
home:?MyHomePage(title:?'加載動畫'),
);
}
}class?MyHomePage?extends?StatefulWidget?{
MyHomePage({Key?key,?this.title})?:?super(key:?key);??final?String?title;??@override
_MyHomePageState?createState()?=>?_MyHomePageState();
}class?_MyHomePageState?extends?State?{
bool?_loading?=?false;??@override
Widget?build(BuildContext?context)?{????return?Scaffold(
appBar:?AppBar(
title:?Text(widget.title),
),
body:?ProgressDialog(
loading:?_loading,
msg:?'正在加載...',
child:?Center(
child:?RaisedButton(
onPressed:?()?=>?_onRefresh(),
child:?Text('顯示加載動畫'),
),
),
),
);
}??Future?_onRefresh()?async?{
setState(()?{
_loading?=?!_loading;
});
await?Future.delayed(Duration(seconds:?3),?()?{
setState(()?{
_loading?=?!_loading;
Toast.show(context,?"加載完成");
});
});
}
}
對于加載動畫，只要把progress屬性改為自定義的屬性即可，比如這位大佬寫的加載動畫：
flutter自定義進度動畫，我們用他的加載中動畫：
只需在上述代碼中加一行(當然前提是你得去github上git到他自定義的代碼)：loading:?_loading,//自定義動畫progress:?MyProgress(size:?new?Size(100.0,?20.0),color:?Colors.white,),
msg:?'正在加載...',
效果如下：
自定義動畫.gif
作者：土逗牛肉
鏈接：https://www.jianshu.com/p/6829edbf5037
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的flutter 页面加载动画_Flutter撸一个加载动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 孩子智商如何测（孩子智商该怎么测？）
- 下一篇： 为什么手机和电视明明连的是同一个WiFi