Flutter 的路由导航

路由管理或导航管理：从一个页面平滑地过渡到另一个页面，我们需要有一个统一的机制来管理页面之间的跳转。在原生的Android 开发，是通过startActivity或startActivityForResult 来完成页面的跳转的，在Flutter 中如何实现呢？

在 Flutter 中，页面之间的跳转是通过 Route 和 Navigator 来管理的：

• Route 是页面的抽象，主要负责创建对应的界面，接收参数，响应 Navigator 打开和关闭；
• 而 Navigator 则会维护一个路由栈管理 Route，Route 打开即入栈，Route 关闭即出栈，还可以直接替换栈内的某一个 Route。
  

在Flutter 中根据是否提前注册，可以分为 基本路由和 命名路由。

基本路由：没有提前注册。

命名路由：需要在 APP 的入口进行注册。

基本路由使用方式相对简单灵活，适用于应用中页面不多的场景。而在应用中页面比较多的情况下，再使用基本路由方式，那么每次跳转到一个新的页面，我们都要手动创建 MaterialPageRoute 实例，初始化页面，然后调用 push 方法打开它，还是比较麻烦的。

应用程序 MaterialApp 提供一个页面名称映射规则，即路由表 routes，路由表实际上是一个 Map，其中 key 值对应页面名字，而 value 值则是一个 WidgetBuilder 回调函数，我们需要在这个函数中创建对应的页面。而一旦在路由表中定义好了页面名字，我们就可以使用 Navigator.pushNamed 来打开页面了。

需要注意的是，要在 进入APP入口的 MaterialApp 注册路由才有用。

使用基本路由方式打开 Page1： Navigator.push( context, MaterialPageRoute(builder: (context) => Page1())), 命名路由： void main() { runApp(MyApp());}class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', routes: { // 注册路由 "route_Page1": (context) => Page1(), ... }, onUnknownRoute: (RouteSettings setting) => MaterialPageRoute(builder: (context) => ErrorPage()), theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }}// 使用命名路由方式打开 Page1：Navigator.pushNamed(context, "route_Page1"),

默认路由

使用命名路由，该命名不在路由表中就会报错，这时候可以通过设置默认路由，当找不到的时候，进到到一个指定的页面。只需要在 MaterialApp 中配置：onUnknownRoute 即可

void main() { runApp(MyApp());}class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', routes: { "route_Page1": (context) => Page1(), ...... }, // 路由发生错误，进入到该指定页面 onUnknownRoute: (RouteSettings setting) => MaterialPageRoute(builder: (context) => ErrorPage()), theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }}

页面跳转并传递参数

通过 Navigator.pushNamed 传入 arguments 属性；然后在打开的页面 通过 ModalRoute.of(context).settings.arguments来获取参数；参数的回传通过 Navigator.pop 方法

1. 传递参数： Navigator.pushNamed(context, "route_Page3", arguments: "hello"), 2. 接收参数： class Page3 extends StatelessWidget { @override Widget build(BuildContext context) { String msg = ModalRoute.of(context).settings.arguments as String; return Scaffold( backgroundColor: Colors.red, appBar: AppBar( title: Text("传递参数"), ), body: Text("得到的参数是:$msg"), ); }}3， 参数的回传class Page4 extends StatelessWidget { @override Widget build(BuildContext context) { String msg = ModalRoute.of(context).settings.arguments as String; return Scaffold( backgroundColor: Colors.yellow, appBar: AppBar( title: Text("返回参数"), ), body: Text("得到的参数是:$msg"), floatingActionButton: FloatingActionButton( child: Icon(Icons.backspace), onPressed: () => Navigator.pop(context, "hi"), ), ); }}4. 回传参数的接收：通过then方法 Navigator.pushNamed(context, "route_Page4", arguments: "hello") .then((value) => print("返回的参数是$value")),

总结

页面间的跳转通过 Navigator 和 PageRoute来完成，有两种方式：基本路由 和命名路由；由于使用命名路由可能存在 路由找不到页面的情况，所以通过配置 onUnknownRoute 属性来确定，在路由找不到的时候进入到指定页面；通过通过介绍页面跳转的参数传递和介绍，完成了页面跳转的介绍。

以上就是详解Flutter的路由导航的详细内容，更多关于Flutter 路由导航的资料请关注其它相关文章！