一.前言
Navigator是路由管理的组件，很方便的操作页面间的切换，管理栈路由。
二.Navigation基本使用
1.跳转到APage页面
Navigator.push(context,MaterialPageRoute(builder: (context) => const APage()),);
2.跳转到APage页面,并传值
//传值 Navigator.push(context,MaterialPageRoute(builder: (context) => const APage(text: "我是A")),);
class APage extends StatelessWidget {final String text;const APage({Key? key, required this.text}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Text(text),),);}}
3.返回上一个页面
Navigator.pop(context);
4.返回上一个页面，并传值
Navigator.pop(context, "我是任意值");
//跳转到Apage页面 Navigator.push(context,MaterialPageRoute(builder: (context) => const APage()),).then((value) {//打印上一个页面的返回值print(value);});
5.新的路由进栈并替换最顶部的路由(APage页面替换当前的页面)
Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const APage()),);
6.跳转到APage页面，并删除之前的路由栈
Navigator.pushAndRemoveUntil(context,MaterialPageRoute(builder: (context) => const APage()),(route) => false,);
7.判断是当前页面否有上一级路由
Navigator.canPop(context)
三.通过routes命名路由表来管理页面
首先要注册路由表，为不同的的路由添加相应的名字映射，然后通过Navigator来管理路由
1.注册路由表
class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter',//home:const APage(),//注册路由表 不可与home属性一起使用routes: {"/": (context) => const APage(),"/BPage": (context) => const BPage(),"/CPage": (context) => const CPage(),},//初始化路由，在路由表内寻找相应的路由initialRoute: "/",);}}
1.从APage页面跳转到BPage页面
Navigator.pushNamed(context, "/BPage");
2.从APage页面跳转到BPage页面,并传值
Navigator.pushNamed(context, "/BPage", arguments: "我是任意值");
class BPage extends StatelessWidget {const BPage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Text('${ModalRoute.of(context)!.settings.arguments}',//获取的值style: TextStyle(fontSize: 25),),),);}}
3.新的路由进栈并替换最顶部的路由(APage页面替换当前的页面)
Navigator.pushReplacementNamed(context, "/APage", arguments: "我是任意值");
4.获取上一个页面返回的值
Navigator.pushReplacementNamed(context, "/APage", arguments: "我是任意值").then((value) {print(value);});
5.跳转到APage页面，并删除之前的路由栈
Navigator.pushNamedAndRemoveUntil(context, "/CPage", (route) => false);
6.当调用Navigator.pushNamed()导航到命名路由时使用的路由生成器回调。
四.扩展路由钩子
onGenerateRoute：如果 [routes] 不包含请求的路由，则使用此选项。在打开路由前可以根据逻辑需求进行业务处理。
onUnknownRoute：导航到未命名路由时使用的路由生成器回调
class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter',//注册路由表routes: {"/": (context) => const APage(),"/BPage": (context) => const BPage(),},//初始化路由，在路由表内寻找相应的路由 当使用 initialRoute 时，需要确保你没有同时定义 home 属性。initialRoute: "/",//导航到命名路由时使用的路由生成器回调。如果 [routes] 不包含请求的路由，则使用此选项。onGenerateRoute: (RouteSettings settings) {//[settings.name]路由名字//[settings.arguments]携带的值// TODO根据业务需求跳转到相应的页面return MaterialPageRoute(builder: (context) => BPage(),);},//通过push导航到未命名路由时onUnknownRoute: (settings) {return MaterialPageRoute(builder: (context) => const ErrPage());},);}}
