前言:现在Flutter的路由效果已经非常不错了,能满足大部分App的需求,但是谁不希望自己的App更酷更炫呢!下面介绍更炫酷的路由。
运行效果:
其实路由动画的原理很简单,就是重写并继承PageRouterBuilder
这个类里的transitionsBuilder
方法。
不过这个方法还是有很多写法的,通过写法的不同,产生的动画效果也有所不同。
实现过程:
1、主入口方法
先编写一个主入口方法,还是最简单的格式,只不过home属性,使用的FirstPage
的组件是我们自定义的,需要我们再次编写。入口文件的代码如下:
import 'package:flutter/material.dart';
import 'pages.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title:'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home:FirstPage()
);
}
}
2、pages.dart页面的编写
主入口文件用import
引入了pages.dart
文件,这个文件就是生成了两个页面(Flutter里的页面也是Widget,这个你要跟网页区分开)。有了两个页面就可以实现路由跳转了。
pages.dart
文件的代码如下,这里我们先用普通路由代替,看一看效果。
import 'package:flutter/material.dart';
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar:AppBar(
title:Text('FirstPage',style: TextStyle(fontSize: 36.0)),
elevation: 0.0,
),
body:Center(
child: MaterialButton(
child: Icon(
Icons.navigate_next,
color:Colors.white,
size:64.0,
),
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder:(BuildContext context){
return SecondPage();
}));
},
),
)
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pinkAccent,
appBar: AppBar(
title: Text('SecondPage',style:TextStyle(fontSize:36.0),),
backgroundColor: Colors.pinkAccent,
leading:Container(),
elevation: 0.0,
),
body:Center(
child: MaterialButton(
child: Icon(
Icons.navigate_before,
color:Colors.white,
size:64.0
),
onPressed: ()=>Navigator.of(context).pop(),
),
)
);
}
}
上面代码中有一个新知识点,需要学习一下:
AppBar Widger的 elevation 属性:这个值是AppBar 滚动时的融合程度,一般有滚动时默认是4.0,现在我们设置成0.0,就是和也main完全融合了。
写完这个页面代码后,已经可以进行最基本的导航了,但是并没有什么酷炫的动画。
3、自定义CustomRoute Widget
新建一个custome_router.dart
文件,这个就是要自定义的路由方法,自定义首先要继承于通用的路由的构造器类PageRouterBuilder
。继承之后重写父类的CustomRoute
构造方法。
构造方法可以简单理解为:只要以调用这个类或者说是Widget,构造方法里的所有代码就执行了。
custome_router.dart
代码如下:
import 'package:flutter/material.dart';
class CustomRoute extends PageRouteBuilder{
final Widget widget;//创建一个组件变量,用作构造方法的参数
//重写构造方法
CustomRoute(this.widget):super(
transitionDuration:const Duration(seconds:1),//设置动画持续的时间,建议再1和2之间。
pageBuilder:( //创建页面构造器
BuildContext context,
Animation<double> animation1, //动画一和二
Animation<double> animation2){
return widget; //返回组件
},
transitionsBuilder:( //创建过渡动画构造器
BuildContext context,
Animation<double> animation1,
Animation<double> animation2,
Widget child){ //相比页面构造器多一个子组件
return FadeTransition( //FadeTransition:渐隐渐现过渡效果
//设置opactiy(透明度)属性
opacity: Tween(begin: 0.0,end: 1.0).animate( //设置动画样式
CurvedAnimation( //使用动画曲线组件(CurvedAnimation)
parent: animation1, //父类动画
curve: Curves.fastOutSlowIn //设置快出慢进的动画节奏
)
),
child: child,//在child中设置另一个嵌套动画,形成叠加动画
);
}
);
}