在原生开发中，安卓和IOS自有控制页面（Activity、ViewControl)跳转的功能，在flutter中，路由管理变得更加统一灵活高效。
路由管理需求
在Flutter中，万物皆组件，页面也是组件，路由则是组件之间的跳转、传值，常见的需求有下面四种：
-
跳转下一页 -
返回上一页 -
正向传值 -
反向传值
我们主要研究这四种操作的方式，在每个项目中都必备的需求。
MaterialApp 内置的路由管理
在 MaterialApp 中内置的路由管理，有两种操作方式：
-
未声明路由，使用实例化组件直接跳转 -
声明路由，使用路由的名称进行跳转
两种方式各有优劣，项目中酌情选择，第一种方式更灵活，简单除暴，但无法统一管理，比较松散，第二种可以统一管理，使用路由name进行对应操作，但是传值、取值可能较麻烦。
前面说了，flutter中的页面也是组件，所以我们首先用Scaffold脚手架创建两个独立的页面：
HomePage 和
NextPage。用这两个页面来实现后续的所有需求：
不声明路由
1. 跳转下一页
无需声明组件，直接使用api跳转到回调中的组件页面：
// HomePage 页面
class
HomePage
extends
StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Home Page"),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (ctx) => NextPage()));
},
child: Text(
"跳转到第二页"),
),
),
);
}
}
// NextPage 页面
class
NextPage
extends
StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Next Page"),
),
body: Container(
child: Text(
"Next Page"),
),
);
}
}
直接使用api，就可以进行快速的页面跳转，其中关键跳转代码
...
Navigator.push(context, MaterialPageRoute(builder: (ctx) => NextPage()));
...
因为是默认的跳转方式，在安卓和苹果端会有不同的动画效果：安卓中是从下到上的渐隐，而ios中则是从右向左的滑入。
2. 跳转传值
传值的话，应该一看就非常清楚，在对应页面设置数据属性，实例化时，直接设置即可，关键代码：
// HomePage
...
Navigator.push(context, MaterialPageRoute(builder: (ctx) {
return NextPage(
data:
"Home Page Data",
);
}));
...
// NextPage
class
NextPage
extends
StatelessWidget {
String data;
NextPage({
this.data});
...
}
3. 返回上一页
...
Navigator.pop(context);
...
4. 反向传值
上面说到的
Navigator.pop方法的第二个参数可以传递一个任何类型的数据，该参数就是反向传值的内容。
而首页中的
Navigator.push方法返回一个Future，就是出栈页面的
Navigator.pop函数的第二个参数，我们使用async和await可以快速的获取其中的内容：
//
class
HomePage
extends
StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Home Page"),
),
body: Center(
child: RaisedButton(
onPressed: ()
async {
var returnData =
await Navigator.push(context, MaterialPageRoute(builder: (ctx) => NextPage()));
print(
"Next Page 返回给 Home Page：
${returnData}");
},
child: Text(
"跳转到第二页"),
),
),
);
}
}
//
class
NextPage
extends
StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Next Page"),
),
body: Container(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () {
Navigator.pop(context, {
"data":
"反向传值内容"});
},
child: Text(
"返回上一页"),
)
],
),
),
);
}
}
跳转到NextPage后点击返回上一页，可以看到控制台输出内容：
I/flutter (11371): Next Page 返回给 Home Page： {data: 反向传值内容}
这是靠
Navigator.pop函数进行的返回传值操作，如果点击页面AppBar中的返回图标返回值则为
null
声明路由
1. 跳转到下一页
MaterialApp 内置了路由管理功能，在 MaterialApp 类中的
routes 参数中声明路由名称和对应组件：
class
FeDemoApp
extends
StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
routes: {
"/": (ctx) => HomePage(),
"NextPage": (ctx) => NextPage(),
},
);
}
}
在声明了名称和组件后，我们就可以直接使用name来进行路由操作：
...
// 'NextPage' 已声明为 NextPage() 组件
Navigator.pushNamed(context,
"NextPage");
...
2. 返回上一页
返回上一页的方式，在两种管理方式中都是一样的，使用
Navigator.pop
...
Navigator.pop(context, {
"a":
"反向传值"});
...
3. 正向传值
正向传值就有所不同，因为在未声明路由的方式中，我们可以直接接触到对应页面的对象，但是在声明路由的方式中，对应对象在声明时就已经创建好了，在跳转时无法直接获取到了，所以传值和获取的方式有所不同。
传值时，使用
Navigator.pushNamed中的
arguments参数：
...HomePage
// 'NextPage' 已声明为 NextPage() 组件
Navigator.pushNamed(context,
"NextPage", arguments:
"传值");
...
获取时，使用下面的代码：
... NextPage
// 获取值
var data = ModalRoute.of(context).settings.arguments;
...
4. 反向传值
和未声明的方式一致，
Navigator.pushNamed同样返回Future。
Fluro路由库
flutter的出现，随之诞生了一批优秀的库，fluro就是其中之一。
它更灵活、耦合更低、支持各种页面切换动画，进行简单的二次封装就可以实现轻松的路由管理、权限拦截。
基本使用
fluro是需要提前对路由进行声明的，而且所有的路由操作都需要适用全局的Router对象。
import
'package:fluro/fluro.dart';
import
'package:flutter/material.dart';
final router = Router();
void main() {
// 声明路由
router.define(
"/NextPage",
handler: Handler(
handlerFunc: (ctx, params) {
return NextPage();
},
),
);
runApp(FeDemoApp());
}
class
FeDemoApp
extends
StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
//
class
HomePage
extends
StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Home Page"),
),
body: Center(
child: RaisedButton(
onPressed: ()
async {
var returnData =
await router.navigateTo(
context,
"/NextPage",
transition: TransitionType.nativeModal,
);
print(
"返回值：
${returnData}");
},
child: Text(
"跳转到第二页"),
),
),
);
}
}
//
class
NextPage
extends
StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Next Page"),
),
body: Container(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text(
"返回上一页"),
)
],
),
),
);
}
}
我们可以通过修改跳转动画
TransitionType.cupertino 来实现在安卓端显示ios的滑入滑出效果。
fluro二次封装类
下面是对fluro的简单封装，统一了全局的路由对象，路由名称使用了静态参数，跳转方式也进行了样式统一，页面拦截也很容易拓展：
import
'package:fluro/fluro.dart';
import
'package:flutter/material.dart';
import
'main.dart'
as Main;
class
App {
static
final router = Router();
static
String HomePage =
"/HomePage";
static
String NextPage =
"/NextPage";
// 初始化路由
static
void initRouter() {
var routers = {
"
${HomePage}": Handler(
handlerFunc: (ctx, params) => Main.HomePage(),
),
"
${NextPage}": Handler(
handlerFunc: (ctx, params) => Main.NextPage(),
),
};
routers.forEach((key, value) {
router.define(key, handler: value);
});
}
static Future<
dynamic> PageTo(BuildContext context,
String path) {
return router.navigateTo(
context,
path,
transition: TransitionType.nativeModal,
);
}
static Future<
dynamic> AuthTo(BuildContext context,
String path) {
//
TODO: 验证权限，再决定向哪跳转
var auth =
true;
if (auth) {
return router.navigateTo(
context,
path,
transition: TransitionType.nativeModal,
);
}
else {
// 验证失败，跳转到了首页
return router.navigateTo(
context,
HomePage,
transition: TransitionType.nativeModal,
);
}
}
}
简单封装，可以留言发表不同的思路！
- END -
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69981026/viewspace-2709424/ ，如需转载，请注明出处，否则将追究法律责任。
