在 flutter 应用中，路由管理是导航到不同页面的关键机制。本文将探讨如何创建和使用新路由，展示如何通过文本按钮进行页面跳转，并介绍 materialpageroute 的功能和 navigator 的用法。
什么是路由？
在 Flutter 中，路由（Route）指的是一个屏幕或页面。每个路由都由一个 Widget 构建，可以通过 Navigator 进行管理和切换。
示例1：创建一个新的路由，命名 NewRoute
class NewRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("FlutterStudy"),
),
body: Center(
child: Text(
"This is new route",
style: Theme.of(context).textTheme.headline3,
),
),
);
}
}示例2：创建一个文本按钮，点击进行跳转
child: Text("点击跳转"),
textColor: Colors.red,
onPressed: () {
//导航到新的路由
Navigator.push(context, MaterialPageRoute(builder: (context) {
return NewRoute();
}));
},
MaterialPageRoute
MaterialPageRoute 是 Material 组件库提供的组件，用于实现与平台页面切换动画风格一致的切换动画。MaterialPageRoute 继承自 PageRoute 类，后者是一个抽象类，表示整个屏幕空间的一个模态路由页面。它定义了路由构建及切换时过渡动画的相关接口和属性。如果需要自定义路由切换动画，可以通过继承 PageRoute 来实现。
MaterialPageRoute 的构造方法
MaterialPageRoute({
required this.builder,
RouteSettings? settings,
this.maintainState = true,
bool fullscreenDialog = false,
})-
builder是 WidgetBuilder 类型的回调函数，负责构建路由的具体内容，返回一个 widget。 -
settings包含路由的配置信息，例如路由名称和是否初始路由等。 -
maintainState默认为 true，表示当入栈一个新的路由时，原来的路由仍然会保存在内存中。如果想在路由没用的时候释放其所占用的资源，可以设置为 false。 -
fullscreenDialog表示新的路由是否是一个全屏的模态对话框。在 iOS 中，若此参数为 true，新页面会从底部滑入，而不是水平方向。
Navigator
Navigator 是一个路由管理组件，提供打开和退出路由的方法。它通过栈来管理活动路由集合，通常屏幕显示的页面就是栈顶路由。
打开一个页面
return Navigator.of(context)!.push(route);
将给定的路由入栈（打开页面），返回一个 future 对象，用于接收该路由出栈时返回的数据。
关闭一个页面
Navigator.of(context)!.pop(result);
将栈顶路由出栈，result 为要返回给上一个页面的数据。
路由传值
class TipRoute extends StatelessWidget {
TipRoute({Key key, this.text}) : super(key: key);
final String text;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("提示"),
),
body: Padding(
padding: EdgeInsets.all(18),
child: Center(
child: Column(
children: [
Text(text),
RaisedButton(
onPressed: () => Navigator.pop(context, "我是返回值"),
child: Text("返回"),
)
],
),
),
),
);
}
} 在界面中添加了一个 appbar，中间显示一个文本和一个 RaisedButton，点击后进行 pop 并传入要返回的值。
@override
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
onPressed: () async {
await Navigator.push(context, MaterialPageRoute(builder: (context) {
return TipRoute(text: "我是参数");
})).then((value) => print("路由返回值 $value"));
},
child: Text("打开提示页面"),
),
);
}在 onPressed 方法中，异步执行这个函数，最终将返回值打印出来。
运行上面的代码，点击 "打开提示页面"，效果如下所示：
系统特点： 商品多级分类检索、搜索，支持同一商品多重分类，自由设置显示式样 自由设置会员类型，自由设置权限项目，自由分配每种会员类型和每个会员的权限 灵活的商品定价，最多12级价格自由分配给各种会员类型或会员，也可针对单会员单商品特殊定价 强大的会员管理、帐户管理、订单管理功能和一系列帐务查询统计功能 灵活的会员积分系统，自由设置每个积分事件的积分计算方法 灵活的网站内容发布、管理系统，每个栏目可
打印的结果：
I/flutter (23778): 路由返回值 我是返回值
需要注意的是：
- 参数是通过构造方法传入的。
- 如果点击左上角或者返回按钮进行返回，则页面返回的值为 null。
命名路由
命名路由是指给路由起一个名字，通过名字直接打开路由。
路由表
路由表是一个 map，key 为路由名字，value 是一个 builder 的回调函数，用于生成相应的路由 widget。如下：
final Map? routes;
注册路由
在 MaterialApp 里面，添加 routes 属性即可，如下：
return MaterialApp(
//app name
title: 'FlutterStudy',
theme: ThemeData(
primarySwatch: Colors.red,
),
routes: {
"new_page": (context) => NewRoute(),
"/": (context) => MyHomePage(title: "Flutter Study")
},
//应用首页路由
home: MyHomePage(title: 'Flutter Study'),
);打开路由页面
child: Text("自定义 Button"),
onPressed: () {
Navigator.pushNamed(context, "router_test");
}在点击的事件中，跳转到对应的路由页面。
带参数的命名路由传递
在路由表里面注册：
"new_page": (context) => NewRoute(),
接受参数：
@override
Widget build(BuildContext context) {
var args = ModalRoute.of(context).settings.arguments;
//......
}在跳转的时候发送数据即可：
Navigator.pushNamed(context, "new_page", arguments: "Hello World");
路由生成钩子
在打开某些页面时，可能需要做一些权限检测，如用户是否登录，是否需要密码等。如果每次打开路由时都要去判断一下会非常麻烦，这种情况可以通过 MaterialApp 实现。
MaterialApp 有一个 onGenerateRoute 属性，他在打开路由时可能会被调用。之所以说可能，是因为当调用 Navigator.pushNamed() 打开路由时，如果指定的路由在路由表中已经注册，则会调用路由表中的 builder 函数来生成路由组件；如果路由表中没有注册，才会调用 onGenerateRoute 来生成路由。
... //省略无关代码
onGenerateRoute:(RouteSettings settings){
return MaterialPageRoute(builder: (context){
String routeName = settings.name;
// 如果访问的路由页需要登录，但当前未登录，则直接返回登录页路由，
// 引导用户登录；其它情况则正常打开路由。
});
});参考资料：
