您好,登錄后才能下訂單哦!
在上一篇的時候,我們講解了怎么做一個登錄界面,但是之后呢?完全是草草結尾的感覺嘛,這不,接下來就是給大家詳細說說,這個登錄里面不得鳥的故事。先來看一個登錄的過程~~
cdn.xitu.io/2019/3/17/1698c561f1e027ea?w=250&h=517&f=gif&s=637957">
可能上面的gif
圖不是很真切,這上面展示了兩個功能:
有沒有感覺這樣的登錄好像還不錯呢,哈哈哈,接下來就詳細分析一下這其中的玄機~~
一般我們的頁面跳轉都會涉及到路由,路由就是從一個頁面跳轉到另一個頁面的過程,就比如Android中的Activity
或IOS中的ViewController
的跳轉。
在Flutter中所以的路由都使用Navigator
來進行管理的,換句話說它就是讓這些本來相對獨立的個體形成一個完美的整體。那么Navigator
是直接管理的就是頁面嗎?當然不是,實際上它管理是Route
對象,而且提供了管理堆棧的相關方法,比如:
雖然能夠直接創建一個navigator
,但是呢,一般不建議這樣直接使用,我們常常通過WidgetsApp
或者MaterialApp
去創建。還記得第一篇的時候,就跟大家提過,Flutter提供了許多widgets,可幫助您構建遵循Material Design
的應用程序。Material應用程序以MaterialApp widget開始, 該widget在應用程序的根部創建了一些有用的widget,其中包括一個Navigator
, 它管理由字符串標識的Widget棧(即頁面路由棧)。Navigator可以讓您的應用程序在頁面之間的平滑的過渡。 所以我們的應用啟動一般這樣寫:
void main() {
runApp(MaterialApp(home: MyAppHome()));
}
那么,home
所指向的頁面也就是我們棧中最底層的路由,那MaterialApp
到底是怎么創建這個底層路由的呢?它遵循以下幾個原則:
const MaterialApp({
Key key,
this.navigatorKey,
this.home,
this.routes = const <String, WidgetBuilder>{},
this.initialRoute,
this.onGenerateRoute,
this.onUnknownRoute,
//省略無關代碼
...
})
home
所指向的routes
路由表onGenerateRoute
onUnknownRoute
將會被調用所以說如果要創建Navigator
,那么以上四個必須有一個被使用。
一般我們可以使用MaterialPageRoute
去進行路由:
Navigator.push(context, MaterialPageRoute<void>(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('My Page')),
body: Center(
child: FlatButton(
child: Text('POP'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
},
));
這種方式的就很明顯了,它是使用一種build
的方式去入棧(或者出棧)。如上可以看出,當我點擊 POP
按鈕的時候又可以將這個頁面進行出棧,又可以回到我們的home
頁面。但是,通常我們不這么去返回上一個頁面,在上一章的時候就使用Scaffold
的AppBar
中可以直接添加一個返回,究其根本這個返回最終也是調用的這個
Navigator.pop(context);
當我們需要在返回的時候帶一個返回值的時候,可以像如下的方式進行使用,那么這個時候就不能使用Scaffold
的AppBar
中的返回了,因為它是不會返回任何結果的。
Navigator.pop(context, true);
上面是通過一個動態的方式去進行路由,我們也可以使用一種靜態的方式去路由,那就是pushNamed
,從字面意思就是通過頁面的名字進行路由的,那么這個名字是從哪里來的呢?這就需要使用我們上面在MaterialApp
中的routes
路由表了。
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Color(0xFFFF786E),
primaryColorLight: Color(0xFFFF978F),
accentColor: Color(0xFFFFFFFF)
),
home: Start(),
debugShowCheckedModeBanner: false,
routes:{
"scaffold_page":(context)=>ScaffoldTest(),
"snack_page":(context)=> SnackTest(),
"login_page":(context)=> LoginPage(),
"start_page":(context)=> Start(),
}
);
}
}
Navigator.pushNamed(context, "snack_page");
那么,我們能不能攜帶參數呢?當然是可以的咯
void _showBerlinWeather() {
Navigator.pushNamed(
context,
'/weather',
arguments: <String, String>{
'city': 'Berlin',
'country': 'Germany',
},
);
}
也能攜帶一個自定義的對象進行遨游~~
class WeatherRouteArguments {
WeatherRouteArguments({ this.city, this.country });
final String city;
final String country;
bool get isGermanCapital {
return country == 'Germany' && city == 'Berlin';
}
}
void _showWeather() {
Navigator.pushNamed(
context,
'/weather',
arguments: WeatherRouteArguments(city: 'Berlin', country: 'Germany'),
);
}
當然還有一些其他的方式:
在前面gif
圖中我們可以看到在閃屏頁在不同的時間顏色有不同的變化(圖片模糊,效果不明顯),還有點擊登錄的時候,按鈕的樣子也有變化,那么這個是怎么實現的呢?當然是我們的動畫了~~
AnimationController
用來控制一個動畫的正向播放、反向播放和停止動畫等操作。在默認情況下AnimationController
是按照線性進行動畫播放的。
需要注意的是在使用AnimationController
的時候需要結合TickerProvider
,因為只有在TickerProvider
下才能配置AnimationController
中的構造參數vsync
。TickerProvider
是一個抽象類,所以我們一般使用它的實現類TickerProviderStateMixin
和SingleTickerProviderStateMixin
。
那么,這兩種方式有什么不同呢?
如果整個生命周期中,只有一個AnimationController
,那么就使用SingleTickerProviderStateMixin
,因為此種情況下,它的效率相對來說要高很多。反之,如果有多個AnimationController
,就是用TickerProviderStateMixin
。
需要注意的是,如果AnimationController
不需要使用的時候,一定要將其釋放掉,不然有可能造成內存泄露。
class StartState extends State<Start> with SingleTickerProviderStateMixin {
AnimationController colorController;
@override
void initState() {
// TODO: implement initState
super.initState();
colorController = new AnimationController(
vsync: this, duration: new Duration(seconds: 3));
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: Container(
//省略部分代碼
...
),
);
}
@override
void dispose() {
// TODO: implement dispose
colorController.dispose();
super.dispose();
}
}
有了動畫控制器之后,就需要我們的動畫效果了哦。但是我們可以發現Animation
本身是個抽象類,所以我們需要的是它的實現類。我們可以直接使用Tween
或者它的子類去實現一個Animation
,在AnimationController
中提供了一個drive
方法,這個是用來干什么的呢?這個是用來鏈接一個Tween
到Animation
并返回一個Animation
的實例。
Animation<Alignment> _alignment1 = _controller.drive(
AlignmentTween(
begin: Alignment.topLeft,
end: Alignment.topRight,
),
);
為什么要使用Tween
呢?Tween
就是一個線性的插值器,可以實現一個完整的變化過程
class Tween<T extends dynamic> extends Animatable<T> {
Tween({ this.begin, this.end });
T begin;
T end;
@protected
T lerp(double t) {
assert(begin != null);
assert(end != null);
return begin + (end - begin) * t;
}
@override
T transform(double t) {
if (t == 0.0)
return begin;
if (t == 1.0)
return end;
return lerp(t);
}
@override
String toString() => '$runtimeType($begin \u2192 $end)';
}
Tween
的構造提供了兩個參數,一個開始bengin
,一個結束end
,就是說讓動畫可以在這個區間內進行變化,當然它也提供了很多子類,比如:ColorTween
、SizeTween
、IntTween
和CurveTween
等等
ColorTween
可以實現兩個顏色的變化SizeTween
可以實現兩個size
的變化IntTween
可以實現兩個int 值之間的變化CurveTween
可以實現動畫非線性變化CurvedAnimation
就是將一個曲線(非線性)變化應用到另一個動畫,如果想使用 Curve
應用到Tween
就可以直接使用上面所說的CurveTween
,可以不CurvedAnimation
。
final Animation<double> animation = CurvedAnimation(
parent: controller,
curve: Curves.ease,
);
這里需要兩個參數一個是動畫控制,也就是我們的AnimationController
,另一個就是curve
,它描述了到底是按照什么樣的曲線進行變化的。在Curves
中提供了很多的變化過程,有興趣的童鞋可以自己去研究一下~~
這里總結一下:
要實現一個動畫的,首先肯定需要上面所說的AniamtionController
和 Animation
,有這個還不夠,還需要一個可以根據
在閃屏頁面中,我們的動畫是顏色根據時間不同的進行變化,那肯定會用到我們的Tween
,這里是顏色的變化,所以使用到了ColorTween
。
@override
void initState() {
// TODO: implement initState
super.initState();
colorController = new AnimationController(
vsync: this, duration: new Duration(seconds: 3));
colorAnimation = colorController
.drive(ColorTween(begin: Color(0xFFFF786E), end: Color(0xFFFFA07A)));
}
一般我們對AniamtionController和Animation的初始化在initState()
方法中,然后就需要在動畫的運行過程中將widget
進行更新,就會使用到我們的setState()
colorAnimation = colorController
.drive(ColorTween(begin: Color(0xFFFF786E), end: Color(0xFFFFA07A)))
..addListener(() {
setState(() {});
});
那么接下來就是讓整個動畫跑起來了~~
Future<Null> playAnimation() async {
try {
await colorController.forward();
await colorController.reverse();
} on TickerCanceled {}
}
這里使用到了dart
語言中的異步,有兩個特點:
await
返回一定是Future
,如果不是會報錯await
所在的方法必須在有async
標記的函數中運行。上面的意思就是讓動畫先正向進行,然后在反向進行~~
但是發現動畫寫完之后運行,但是沒有任何作用,這是因為你沒有將動畫的變化應用到widget
上
@override
Widget build(BuildContext context) {
return new Scaffold(
body: Container(
decoration: BoxDecoration(color: colorAnimation.value),
child: Center(
...
//省略無關代碼
),
),
);
}
在上述代碼中的BoxDecoration(color: colorAnimation.value)
就是將顏色的值作用于整個Container
上,所以顏色就隨之變化而變化。
在動畫結束的時候不是要進行路由跳轉到下一個頁面的嘛?這就需要在對動畫的監聽,當動畫結束的時候就進行跳轉,就需要修改colorAnimation
colorAnimation = colorController
.drive(ColorTween(begin: Color(0xFFFF786E), end: Color(0xFFFFA07A)))
..addListener(() {
if (colorController.isDismissed) {
Navigator.pushAndRemoveUntil(context,
new MaterialPageRoute(builder: (context) {
return LoginPage();
}), ModalRoute.withName("start_page"));
}
setState(() {});
});
這里需要注意的是,在判斷結束的時候,這里使用的是colorController.isDismissed
,沒有使用colorController.isCompleted
是因為在正向動畫完成的時候就會調用,還沒讓這個動畫流程運行完成~~
如果需要完整代碼,就可以來這兒。
這里和上面是一樣的實現動動畫,但是直接使用的是Tween
,而且使用了另一種將Tween
關聯到Animation的方式,而且使用
@override
void initState() {
// TODO: implement initState
super.initState();
_animationController = new AnimationController(
vsync: this, duration: new Duration(milliseconds: 1500));
_buttonLengthAnimation = new Tween<double>(
begin: 312.0,
end: 42.0,
).animate(new CurvedAnimation(
parent: _animationController, curve: new Interval(0.3, 0.6)))
..addListener(() {
if (_buttonLengthAnimation.isCompleted) {
if(isLogin){
Navigator.pushNamedAndRemoveUntil(context, "snack_page",ModalRoute.withName('login_page'));
}else{
showTips("登錄失敗");
}
}
setState(() {});
});
}
這里有一點需要注意,使用的curve
是Interval
,這個的作用就是根據你提供的時間區間進行動畫展示。就如上面定的動畫時間大小是1500ms,那么只有在1500*0.3 = 500 ms的時候開始,并在1500*0.6=900ms的時候完成。
那么接下來就直接看改變動畫的對widget
處理
InkWell(
onTap: login,
child: Container(
margin: EdgeInsets.only(top: 30),
height: 42,
width: _buttonLengthAnimation.value,
decoration:BoxDecoration(borderRadius: radius, color: colorWhite),
alignment: Alignment.center,
child: _buttonLengthAnimation.value > 75? new Text("立即登錄",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: colorRegular))
: CircularProgressIndicator( valueColor:
new AlwaysStoppedAnimation<Color>(colorRegular),
strokeWidth: 2,
),
),
),
① 當點擊登錄按鈕后,動畫開始進行,并且對這個按鈕的寬度就開始進行變化
width: _buttonLengthAnimation.value,
② 當動畫的值還大于75的時候,中間就顯示Text
,但是如果小于或等于75的時候,那它的child就是一個就是一個圓形的進度CircularProgressIndicator
child: _buttonLengthAnimation.value > 75? new Text("立即登錄",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: colorRegular))
: CircularProgressIndicator( valueColor:
new AlwaysStoppedAnimation<Color>(colorRegular),
strokeWidth: 2,
),
),
其實這就是整個動畫的過程,只是其中我做了一個對動畫運行的判斷,當登錄失敗,就讓動畫按鈕回到最初的狀態,并提示登錄失敗。如果登錄成功,就直接跳轉到新的頁面~~
在這里規整一下,方便大家整理記憶
push
和pushNamed
,如果是pushNamed
那么一定要在MaterialApp
中設置路由表。TickerProvider
配合使用,如果在State
中就可以直接使用它的實現類SingleTickerProviderStateMixin
或TickerProviderStateMixin
。AnimationController
就是用SingleTickerProviderStateMixin
,反之,使用TickerProviderStateMixin
。AnimationController
、Tween
或CurveAnimation
有關。AnimationController
在不需要的時候一定要進行釋放dispose
,不然可能會造成內存溢出。免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。