各位同学大家好，之前有很多粉丝和同学在问我flutter中的路由管理的问题，趁着国庆节放假有时间我就分享一篇flutter 中路由管理的文章给大家（包括命名路由和非命名路由 根路由 路由切换 和路由栈移除）等等知识点，那么废话不多说我们正式开始
需要安装flutter的开发环境：大家可以去看看之前的教程： 1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718 2 mac系统flutter开发环境安装教程：https://www.jianshu.com/p/bad2c35b41e3 效果图：
命名路由我们用到的是Navigator 熟悉来进行跳转
//不带参数跳转 Navigator.of(context).push( MaterialPageRoute( builder: (context){ return NoCreateNameDetails(); }), );我们在MaterialPageRoute builder 返回里面实例化 NoCreateNameDetails 组件但是我们并没有传参
import 'package:flutter/material.dart'; /** * * 创建人：xuqing * 创建时间:2020年10月2日17:08:55 * 类说明:命名路由详情页面 我们这边写了一个gettitle * 变量来接收路由跳转的适合传过来的值不并且显示在UI层上面 * * */ class NoCreateNameDetails extends StatefulWidget { final String gettitle; NoCreateNameDetails({Key key,this.gettitle}) : super(key: key); @override _NoCreateNameDetailsState createState() { return _NoCreateNameDetailsState(); } } class _NoCreateNameDetailsState extends State<NoCreateNameDetails> { @override void initState() { super.initState(); } @override void dispose() { super.dispose(); } @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: Text(widget.gettitle==null?"不带参数跳转":widget.gettitle), ), body: Container( child: Text("我是非命名路由详情页面"), ), ); } }在NoCreateNameDetails 组件实例化的时候我们定一个gettitle 变量通过构造方法传入 我们不需要传参的时候直接实例化即可 这样我们就完成了命名路由的跳转（不过我们要注意需要提前导包引入需跳转的页面）
我们可以看到非命名路由跳转的带参数和不带参数差不多唯一的差别就是在 我们实例化 NoCreateNameDetails组件的时候传入了参数 因为NoCreateNameDetails 构造方法那边我设置是非毕传 就比较灵活一点
首先命名可以我们要在程序的入口 MaterialApp 中设置 routes属性
routes: { "/select":(context)=>Select(), "/setting":(context)=>Setting() },或者你设置 onGenerateRoute:onGenerateRoute也行 然后自定义 routes 类也行
import 'package:flutter/material.dart'; import '../pages/details/create_namedetails.dart'; import '../pages/create_name.dart'; import '../pages/loginandregister/login.dart'; import '../pages/loginandregister/register_first.dart'; import '../pages/loginandregister/register_sencond.dart'; import '../pages/base_navigator.dart'; import '../pages/home.dart'; import '../pages/remove_navigator.dart'; //配置路由 final routes= { "/createnamedetails":(context,{arguments})=>CreateNameDetails(arguments:arguments), "/createname":(context)=>CreateName(), "/login":(context)=>Login(), "/registerfirst":(context)=>RegisterFirst(), "/registersencond":(context)=>RegisterSencond(), "/basenavigator":(context)=>BaseNavigator(), "/home":(context)=>Home(), "/removenavigator":(context)=>RemoveNavigator(), }; //固定写法 var onGenerateRoute=(RouteSettings settings) { // 统一处理 final String name = settings.name; print("name ----> " + name); final Function pageContentBuilder = routes[name]; if (pageContentBuilder != null) { if (settings.arguments != null) { final Route route = MaterialPageRoute( builder: (context) => pageContentBuilder(context, arguments: settings.arguments)); return route; } else { final Route route = MaterialPageRoute( builder: (context) => pageContentBuilder(context)); return route; } } };具体跳转实现 ： 我们只需要调用 Navigator.pushNamed(）方法然后传入上下文和我们配置命名路由对应的名字即可
Navigator.pushNamed(context, "/createname");我们需要在routes.dart 做一些处理
//固定写法 var onGenerateRoute=(RouteSettings settings) { // 统一处理 final String name = settings.name; print("name ----> " + name); final Function pageContentBuilder = routes[name]; if (pageContentBuilder != null) { if (settings.arguments != null) { final Route route = MaterialPageRoute( builder: (context) => pageContentBuilder(context, arguments: settings.arguments)); return route; } else { final Route route = MaterialPageRoute( builder: (context) => pageContentBuilder(context)); return route; } } };然后我们在
"/createnamedetails":(context,{arguments})=>CreateNameDetails(arguments:arguments),命名理由的·配置里面要加入 arguments 参数用来给我们跳转的时候传递参数使用
Navigator.pushNamed(context,"/createnamedetails",arguments:{"msg":title});我们在跳转的适合还是调用 Navigator.pushNamed()方法传入 但是我们后面跟着多传一个 arguments 参数，参数类型我们是以map的形势出现 键值对 命名路由接收参数实现
import 'package:flutter/material.dart'; /*** * * 创建人：xuqing * 创建时间：2020年10月2日17:28:06 * 类说明：命名路由详情页面 * */ class CreateNameDetails extends StatefulWidget { final arguments; CreateNameDetails({Key key,this.arguments}) : super(key: key); @override _CreateNameDetailsState createState() { return _CreateNameDetailsState(); } } class _CreateNameDetailsState extends State<CreateNameDetails> { String gettitle; @override void initState() { super.initState(); } @override void dispose() { super.dispose(); } @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: Text(widget.arguments["msg"]==null?"不带参数命名路由跳转":widget.arguments["msg"]), ), body: Container( child: Center( child: Text("我是命名路由详情页面"), ), ), ); } }我们通过拿到arguments key 值后直接arguments[“msg”] 来取值即可
如图
我看到上图我们平时开发的时候会遇到这样一个需求 A->B->C 从A页面通过命名路由跳转到B 再从B页面通过命名路由跳转到C页面 但是我们点击C页面返回的时候需要直接返回到A页面 如果我们按照
Navigator.pushNamed(context, "/registersencond");我们肯定实现不了 （这样去操作我们只会一层一层页面返回） 这个时候我们要返回到根理由A页面 我们就·需要用到路由替换
Navigator.of(context).pushReplacementNamed("/registersencond");我们使用 Navigator.of(context).pushReplacementNamed(); 方法替换了当前路由 这样我们就实现了想要的需求
在实际开发中我们通常会遇到一个需求 （app从欢迎页倒计时几秒钟然后加载进主页 我们在主页里面有很多功能跳转到其他页面然后 返回主页 我们再点击返回直接退出整个app ）这个需求如何实现，这个时候我们就要用到路由栈移除的属性了 效果图 ：
class _MyHomePageState extends State<MyHomePage> { @override void initState() { super.initState(); int count = 0; const period = const Duration(seconds: 1); print('currentTime='+DateTime.now().toString()); Timer.periodic(period, (timer) { //到时回调 print('afterTimer='+DateTime.now().toString()); count++; if (count >= 3) { //取消定时器，避免无限回调 timer.cancel(); timer = null; toHome(); } }); } @override void dispose() { super.dispose(); } void toHome()async{ //Navigator.pushNamed(context, "/my"); Navigator.of(context).pushNamedAndRemoveUntil( "/home", ModalRoute.withName("/home")); } @override Widget build(BuildContext context) { // TODO: implement build return Container( color: Colors.green, child: Center( child: Text("app欢迎页",style: TextStyle( fontSize: 30, color: Colors.white ), ), ), ); } }这边我们在欢迎页面main.dart 的init开启一个倒计时3秒的逻辑 我们在倒计时完成执行 toHome方法 toHome方法中我们实现的跳转去主页的逻辑
void toHome()async{ //Navigator.pushNamed(context, "/home"); Navigator.of(context).pushNamedAndRemoveUntil( "/home", ModalRoute.withName("/home")); }如果我们直接
Navigator.pushNamed(context, "/home");这样去跳转是不能实现上面描述的需求的 我们需要调用 Navigator.of(context).pushNamedAndRemoveUntil() 然后在里面传入跳转命名有的名字 还有调用 ModalRoute.withName("/home") 来移除路由栈里面除了home主页以外的其他页面 ，到此路由的管理我们就讲完了
flutter中的路由跳转和前端里面的很像 前端同学应该很好理解 小项目用非命名路由足够实现了 要是我们开发大型正式项目建议还是用命名路由统一来管理比较好 ，然后就是路由替换和路由栈移除这个我们只需要调用对应方法即可 ，因为很多粉丝在问这类似问题 所以我觉得有必要·发一篇文章给各位同学讲清楚 。最后希望我的文章能帮助到各位解决问题 ，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ，麻烦给关注和star，小弟在这里谢过啦
码云 ：https://gitee.com/qiuyu123/navigator_demo.git
