Flutter路由介绍
Flutter里面有路由支持所有的路由场景，push、pop页面，页面间的参数传递等等。flutter里面的路由可以分成两种，一种是直接注册，不能传递参数。另一种要自己构造实例，可以传递参数。我们暂时把它们规为静态路由和动态路由。
管理多个页面时有两个核心概念和类：Route和 Navigator。 一个route是一个屏幕或页面的抽象，Navigator是管理route的Widget。Navigator可以通过route入栈和出栈来实现页面之间的跳转。所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管理。这和原生开发类似，无论是Android还是iOS，导航管理都会维护一个路由栈，路由入栈(push)操作对应打开一个新页面，路由出栈(pop)操作对应页面关闭操作，而路由管理主要是指如何来管理路由栈。
比如我们想要跳转到AnimationPage(); 需要用push方法，将AnimationPage();入栈
Navigator.push(context,new MaterialPageRoute(builder: (context) => AnimationPage));
返回上一级，出栈
Navigator.of(context).pop();
对路由跳转进行了封装，使用直接调用
class NavigatorUtil {
/// 跳转页面 系统默认
static push(BuildContext context,Widget page){
Navigator.push(context,new MaterialPageRoute(builder: (context) => page));
}
///返回上一级
static pop(BuildContext context){
Navigator.of(context).pop();
}
}
参考：传递参数开始和结束的坐标（改变坐标实现动画效果）
/// 动画效果从底部到顶部的参数(primary)
final Tween_primaryTweenSlideFromBottomToTop =
Tween(begin:const Offset(0.0, 1.0), end: Offset.zero);
final Tween_secondaryTweenSlideFromBottomToTop =
Tween(begin: Offset.zero, end:const Offset(0.0, -1.0));
/// 动画效果从顶部到底部的参数(primary)
final Tween_primaryTweenSlideFromTopToBottom =
Tween(begin:const Offset(0.0, -1.0), end: Offset.zero);
final Tween_secondaryTweenSlideFromTopToBottom =
Tween(begin: Offset.zero, end:const Offset(0.0, 1.0));
/// 动画效果从右边到左边的参数(primary)
final Tween_primaryTweenSlideFromRightToLeft =
Tween(begin:const Offset(1.0, 0.0), end: Offset.zero);
/// 动画效果从右边到左边的参数(secondary)
final Tween_secondaryTweenSlideFromRightToLeft =
Tween(begin: Offset.zero, end:const Offset(-1.0, 0.0));
/// 动画效果从左边到右边的参数(primary)
final Tween_primaryTweenSlideFromLeftToRight =
Tween(begin:const Offset(-1.0, 0.0), end: Offset.zero);
/// 动画效果从左边到右边的参(secondary)
final Tween_secondaryTweenSlideFromLeftToRight =
Tween(begin: Offset.zero, end:const Offset(1.0, 0.0));
代码实现如下：
路由添加动画（从右到左打开页面）SlideRightToLeft
import 'package:flutter/material.dart';
///
/// 自定义路由动画效果 从右往左滑动
///
class SlideRightToLeft extends PageRouteBuilder{
final Widget widget;
SlideRightToLeft(this.widget):super(
transitionDuration:Duration(milliseconds:300),
pageBuilder:(
BuildContext context,
Animationanimation1,
Animationanimation2,
){
return widget;
},
transitionsBuilder:(
BuildContext context,
Animationanimation1,
Animationanimation2,
Widget child
){
//左右滑动路由动画
return SlideTransition(
position:Tween(
begin:Offset(1.0,0.0),
end:Offset(0.0,0.0),
).animate(CurvedAnimation(
parent: animation1,
curve: Curves.fastOutSlowIn
)),
child: child,
);
}
);
}
使用：封装类NavigatorUtil
import 'package:flutter/material.dart';
import 'package:flutter_app1/common/widget/sliding_bottom_top.dart';
import 'package:flutter_app1/common/widget/sliding_right_left.dart';
///
///实现跳转到指定页面的类的方法
///
class NavigatorUtil {
/// 跳转页面 系统默认
static push(BuildContext context, Widget page) {
Navigator.push(context, new MaterialPageRoute(builder: (context) => page));
}
///返回上一级
static pop(BuildContext context) {
Navigator.of(context).pop();
}
///跳转页面 从右到左跳转
static pushRightOrLeft(BuildContext context, Widget page) {
Navigator.push(context, SlideRightToLeft(page));
}
///跳转页面 从下往上跳转
static pushBottomOrTop(BuildContext context, Widget page) {
Navigator.push(context, SlideBottomToTop(page));
}
///跳转并关闭当前页面
static pushAndRemoveUntil(BuildContext context, Widget page) {
Navigator.pushAndRemoveUntil(
context,
new MaterialPageRoute(builder: (context) => page),
(route) => route ==null,
);
}
}
