路由与导航
路由与导航
在原生的Android中,一个Activity称为一个路由,在iOS中指的是一个ViewController。如果需要打开一个新的路由,在Android中可以使用startActivity()方法,并且传入参数。在iOS中可以使用pushViewController()。
而在Flutter中,使用了Router与Navigator来组成统一的管理,Router是页面的一个抽象概念,用这个可以创建界面、接收参数以及响应Navigator的打开和关闭;而Navigator则是用于管理和维护路由栈,打开路由页面或者关闭路由页面,即入栈出栈操作。
在Flutter中,路由分为两种,一种是基本路由,一种是命名路由。
- 基本路由:无需提前注册,在切换页面的时候需要手动构造页面的实例。
- 命名路由:需要提前注册路由页面标识符,在页面切换时通过路由标识符打开一个新的路由页面。
基本路由
如果需要打开一个新的页面,需要创建一个MaterialPageRoute对象实例,然后调用Navigator.push(),那么Flutter就会把新跳转的页面放到栈顶。如果需要关闭新的页面,那么使用Navigator.pop()即可。一个样例代码如下:
first_page.dart
import 'package:flutter/material.dart';
import 'second_page.dart';
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("first page"),),
body: Center(
child: TextButton(
child: Text("turn to second page"),
onPressed: () => Navigator.push(
context, MaterialPageRoute(builder: (context) => SecondPage())),
),
),
);
}
}
second_page.dart
import 'package:flutter/material.dart';
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("second page"),),
body: Center(
child: TextButton(
child: Text("back to first page"),
onPressed: () => Navigator.pop(context),
),
),
);
}
}
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_router_page/first_page.dart';
void main(List<String> args) => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: FirstPage(),);
}
}
这样就可以做成一个简单的路由跳转了。创建新的路由对象使用的是MaterialPageRoute类,该类是PageRoute的子类,定义了路由创建及切换时过渡动画的相关接口和属性,并且自带页面切换动画。
命名路由
为了必要频繁的创建MaterialPageRoute实例,可以使用命名路由的方式。在命名路由中,需要提前创建好映射规则,即路由表。对应路由表中,第一个参数对应页面的名字,第二个参数对应页面,且需要以MaterialApp为根。
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_namerouter_page/first_page.dart';
import 'package:flutter_namerouter_page/second_page.dart';
import 'package:flutter_namerouter_page/unknown_page.dart';
void main(List<String> args) => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
/// 路由表结构
routes: {
'first': (context) => FirstPage(),
'second': (context) => SecondPage(),
},
/// 初始化页面
initialRoute: 'first',
/// 路由表中没有的页面会跳转到的地方
onUnknownRoute: (RouteSettings setting) =>
MaterialPageRoute(builder: (context) => UnKnownPage()),
);
}
}
first_page.dart
import 'package:flutter/material.dart';
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("first page"),
),
body: Center(
child: TextButton(
child: Text("turn to second page"),
onPressed: () => {Navigator.pushNamed(context, "second")},
),
),
);
}
}
second_page.dart
import 'package:flutter/material.dart';
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("second page"),
),
body: Center(
child: Column(
children: [
TextButton(
child: Text("back to first page"),
onPressed: () => {Navigator.pop(context)},
),
TextButton(
child: Text("turn to first page"),
onPressed: () => Navigator.pushNamed(context, 'first'),
),
TextButton(
onPressed: () => Navigator.pushNamed(context, 'third'),
child: Text("turn to third page")),
],
)),
);
}
}
unknown.dart
import 'package:flutter/material.dart';
class UnKnownPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("unknown page"),
),
body: Center(
child: TextButton(
child: Text("unknown page"),
onPressed: () => Navigator.pop(context),
),
),
);
}
}
路由传参
在Flutter中,路由类似于Activity一样。在Android中进行页面传参,使用的是Intent进行传递,然后使用startActivityForResult()进行传参。
在Flutter中,使用Navigator.of(context).pushNamed('页面名称', arguments: 传递的数据).then((value){如果是StatefulWidget的话,那么可以在此使用setState进行设置。})
在第二个页面中,使用 ModalRoute.of(context).settings.arguments
获取页面传输过来的参数,类似于Android中的getIntent() ,然后进行转换。在第二个页面中,可以使用 Navigator.pop(context,'传递的参数')
路由栈
在Android中,Activity具有四种不同的启动模式,standard,singleTask,singleTop,singleInstance。在Flutter中,使用了安卓中的启动模式的管理方式。
在Flutter中,可以单独移除路由栈中的一个特定的页面。使用Navigator.removeRoute() & Navigator.removeRouteBelow()
进行移除。
方式1: push() & pushNamed() => pop()
这种方式类似于Android中的standard的模式,模型图如下:
使用push或者pushNamed后的模型图
![](https://img2020.cnblogs.com/blog/1723659/202111/1723659-20211117182620593-424094685.png)
使用pop后的模型图
![](https://img2020.cnblogs.com/blog/1723659/202111/1723659-20211117182700526-1838662848.png)
方式2: pushReplacement() & pushReplacementNamed()
这种方式用在路由栈顶页面的替换场景,比如栈顶是b,想替换成c,那么使用该函数即可。类似于Android中先把栈顶弹出,然后再放入c路由。这种模型的方式所展现的动画仅仅是路由c的进入动画,并没有b的退出动画。模型图如下:
![](https://img2020.cnblogs.com/blog/1723659/202111/1723659-20211117182731343-354675043.png)
方式3: popAndPushNamed()
这种方式类似于方式2,但是在动画方面有不一样的地方。使用这种方式,在b弹出的时候,会显示b的弹出动画,而c进入的时候,又回显示c的进入动画。比方式2多一个弹出动画。
方式4: pushAndRemoveUntil() & pushNamedAndRemoveUntil()
从路由栈中,新添加一个页面,并且删除路由栈中所有之前的路由。也就是说,使用这种方式进行路由的添加,路由栈中仅有一个路由。也可以使用这个方法,进行打开一个新的页面,并且制定路由栈中的某一个页面以上的路由页面都删除。
比如执行这条语句Navigator.pushNamedAndRemoveUtil(context,'page_e',ModalRoute.withName('page_b'))
意思是打开一个d页面,然后删除b页面以上的页面,示意图如下:
![](https://img2020.cnblogs.com/blog/1723659/202111/1723659-20211117182758397-802569212.jpg)
方式5: popUntil()
一直弹出,直到某一个页面位置,没有push的操作。Navigator.popUtil(context,ModalRoute.withName('page_a'))
![](https://img2020.cnblogs.com/blog/1723659/202111/1723659-20211117182827951-977509728.png)
自定义路由
如果在两个路由之间跳转,需要自定义动画,那么会使用到自定义路由。自定义路由需要继承PageRouteBuilder类。该类是所有自定义路由的基类。在PageRouteBuilder中,有几个属性比较重要,如下:
编号 | 名称 | 作用 |
---|---|---|
1 | pageBuilder | 用来创建所需要跳转的路由页面 |
2 | opaque | 是否需要遮挡整个页面 |
3 | transitionsBuilder | 用于自定义专场动画 |
4 | transitionDuration | 自定义专场动画的执行时间 |