《Flutter》-- 9.路由与导航
参阅书籍：
《Flutter跨平台开发入门与实践》-- 向治洪（著）
9. 路由与导航
9.1 路由基础
9.1.1 基本概念
在前端应用中，页面又称路由，是屏幕或应用程序页面的抽象。
Flutter的路由管理和导航借鉴了前端和客户端中的设计思路，提供了Route和Navigator对路由进行统一管理。
Route是页面的一个抽象概念，可以用它创建界面、接收参数以及响应Navigator的打开与关闭；Navigator用于管理和维护路由栈，打开路由页面即执行入栈操作，关闭路由页面即执行出栈操作。
Navigator组件的常用操作方法：
1）push()：将给定的路由页面放到路由栈里面，返回值是一个Future对象，用于接收路由出栈时的返回数据；
2）pop()：将位于栈顶的路由从路由栈移除，返回结果为路由关闭时上一个页面所需的数据。
在Flutter开发中，根据是否需要提前注册路由标识符，路由管理可以分为基本路由和命名路由两种。
9.1.2 基本路由
基本路由无需提前注册，在页面切换时需要手动构造页面的实例，使用起来相对简单灵活，适用于应用中页面不多的场景。
如果要打开一个新的页面，需要创建一个MaterialPageRoute对象实例，然后调用Navigator.push()；如果要返回上一个页面，调用Navigator.pop()。
MaterialPageRoute是Flutter提供的路由模板，是PageRoute的子类，定义了路由创建及切换时过渡动画的相关接口和属性，并自带页面切换动画。
示例代码：
import 'package:flutter/material.dart';
void main() => runApp(RoutePage());
class RoutePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '路由--基本路由',
home: FirstPage(),
);
}
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('第一个页面')),
body: Center(
child: RaisedButton(
child: Text('跳转到第二个页面'),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
),
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('第二个页面')),
body: Center(
child: RaisedButton(
child: Text('返回上一个页面'),
onPressed: () => Navigator.pop(context),
),
),
);
}
}
示例效果：
9.1.3 命名路由
命名路由需要提前注册路由页面标识符，在页面切换时通过路由标识符打开一个新的路由页面。
在Flutter中，路由表是一个Map<String, WidgetBuilder>结构，其中第一个参数对应页面的别名，第二个参数对应页面。
MaterialApp(
routes: {//注册路由
'first': (context) => FirstPage(),
'second': (context) => SecondPage(),
},
initialRoute: 'firse',//初始路由页面
)在路由表中注册好页面后，在其他页面中通过Navigator.pushNamed()来打开注册的页面。
Navigator.pushNamed(context, 'second');Flutter提供了一个onUnknownRoute属性，用来在注册路由表时对未知的路由标识符进行统一的页面跳转处理。
示例代码：
import 'package:flutter/material.dart';
void main() => runApp(RoutePage());
class RoutePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '路由--命名路由',
home: FirstPage(),
routes: {
'/first': (context) => FirstPage(),
'/second': (context) => SecondPage(),
},
initialRoute: '/first',
onUnknownRoute: (RouteSettings setting) => MaterialPageRoute(builder: (context) => UnknownPage()),
);
}
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('第一个页面')),
body: Center(
child: RaisedButton(
child: Text('跳转到第二个页面'),
onPressed: () => Navigator.pushNamed(context, '/scond'),
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('第二个页面')),
body: Center(
child: RaisedButton(
child: Text('返回上一个页面'),
onPressed: () => Navigator.pushNamed(context, '/first'),
),
),
);
}
}
class UnknownPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('错误路由')),
body: Center(
child: Text('跳转路由错误！'),
)
);
}
}示例效果：
9.1.5 路由传参
可以在打开路由时传递参数，在目标页面通过ModalRoute的RouteSettings获取页面传递的参数。
如果需要返回上一个页面时回传参数，可以在使用push()打开目标页面时使用then()监听目标页面的返回值。
示例代码：
import 'package:flutter/material.dart';
void main() => runApp(RoutePage());
class RoutePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '路由--路由传参',
home: FirstPage(),
routes: {
'/first': (context) => FirstPage(),
'/second': (context) => SecondPage(),
},
);
}
}
class FirstPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return FirstPageState();
}
}
class FirstPageState extends State<FirstPage> {
String result = '';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('第一个页面'),
centerTitle: true,
),
body: Center(
child: Column(
children: <Widget>[
Text(
'from second page: ' + result,
style: TextStyle(fontSize: 20)
),
RaisedButton(
child: Text('跳转'),
onPressed: () {
Navigator.of(context)
.pushNamed('/second', arguments: 'from first page')
.then((msg) => setState(() => result = msg));
},
)
],
)
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
String msg = ModalRoute.of(context).settings.arguments as String;
return Scaffold(
appBar: AppBar(
title: Text('第二个页面'),
centerTitle: true,
),
body: Center(
child: Column(
children: <Widget>[
Text(
'from first screen: ' + msg,
style: TextStyle(fontSize: 20)
),
RaisedButton(
child: Text('返回'),
onPressed: () => Navigator.pop(context, 'from second page'),
)
],
)
),
);
}
}示例效果：
9.2 路由栈
Flutter路由栈其实就是一个后进先出的线性表，路由栈管理本质上就是一个入栈和出栈的过程，入栈就是将页面放到路由栈的顶部，出栈则是从路由的顶部移除页面。
1）pushReplacementNamed
使用pushReplacement或pushReplacementNamed打开一个新页面时，路由栈顶部的页面会被当前页面所替换。
2）popAndPushNamed
popAndPushNamed的作用与pushReplacementNamed类似，打开一个新页面时，路由栈的栈顶页面会被当前页面替换。
不同的是，popAndPushNamed会同时执行出栈和入栈动画，而pushReplacementNamed只执行入栈动画。
3）pushNamedAndRemoveUntil
pushNamedAndRemoveUntil和pushAndRemoveUntil的作用类似，主要用于向路由栈中添加一个新页面，并删除路由栈中所有之前的页面。
Navigator.pushNamedAndRemoveUntil(context, ‘page_c’, (Route router) => false);如果不需要清空之前的页面，可以将表达式设置为true，即(Route router) => true。
除了用于删除路由栈中所有之前的页面外，pushNamedAndRemoveUntil还可以用来删除指定个数的页面。
Navigator.pushNamedAndRemoveUntil(context, ‘page_d’, ModalRoute.withName(‘page_b’));上面的代码会打开一个新的页面page_d，同时删除page_b页面之上的所有页面。
如果要移除路由栈中某个指定的页面，可以使用Navigator.removeRoute()或者Navigator.removeRouteBelow()。
Navigator.removeRoute(context, MaterialPageRoute(builder: (context) => PageC()));
//或者
Navigator.removeRouteBelow(context, MaterialPageRoute(builder: (context) => PageC()));上面的代码会从路由栈中移除PageC页面。
4）popUntil
popUntil的作用与pushNamedAndRemoveUntil类似，主要用于清除指定页面之上的所有页面。popUntil没有执行push操作，直接执行pop操作，直到返回到指定的页面。
Navigator.popUntil(context, ModalRoute.withName(‘page_a’));上面的代码会清除page_a页面之上的所有页面。
9.3 自定义路由
如果要修改默认的路由转场动画，就需要做一些自定义开发。在Flutter中，自定义路由需要用到PageRouteBuilder类，PageRouteBuilder是所有自定义路由的基类。
PageRouteBuilder的构造函数如下：
PageRouteBuilder(
RouteSettings settings,
@required this.pageBuilder,//用来创建所需要跳转的路由页面
this.transitionsBuilder = _defaultTransitionsBuilder,//用自定义转场动画
this.transitionDuration = const Duration(milliseconds: 300),//自定义转场动画的执行时间
this.opaque = true,//是否需要遮挡整个页面
this.barrierDismissible = false,
this.barrierColor,
this.barrierLabel,
this.maintainState = true,
bool fullscreenDialog = false,
)示例代码：
import 'package:flutter/material.dart';
void main() => runApp(RoutePage());
class RoutePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '路由--自定义路由',
home: FirstPage(),
);
}
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('第一个页面'),
centerTitle: true,
),
body: Center(
child: RaisedButton(
child: Text('跳转'),
onPressed: () {
Navigator.of(context).push(CustomRoute(SecondPage()));
},
)
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
String msg = ModalRoute.of(context).settings.arguments as String;
return Scaffold(
appBar: AppBar(
title: Text('第二个页面'),
centerTitle: true,
),
body: Center(
child: RaisedButton(
child: Text('返回'),
onPressed: () => Navigator.pop(context),
)
),
);
}
}
class CustomRoute extends PageRouteBuilder {
final Widget widget;
CustomRoute(this.widget): super(
transitionDuration: Duration(seconds: 1),
pageBuilder: (BuildContext context, Animation<double> animation1, Animation<double> animation2) {
return widget;
},
transitionsBuilder: (BuildContext context, Animation<double> animation1, Animation<double> animation2, Widget child) {
return SlideTransition(
position: Tween<Offset>(
begin: Offset(1.0, 0.0), end: Offset(0.0, 0.0)
).animate(CurvedAnimation(parent: animation1, curve: Curves.fastOutSlowIn)),
child: child
);
}
);
}除了使用Flutter提供的路由方案外，还可以使用第三方路由框架来实现页面的管理和跳转。Fluro是一款优秀的Flutter企业级路由框架，非常适合中大型项目，它具有层次分明、条理化、方便扩展和便于整体管理路由等特点。