Flutter 路由管理最详细教程

最新推荐文章于 2024-03-16 01:48:53 发布

xq9527--

最新推荐文章于 2024-03-16 01:48:53 发布

阅读量856

点赞数 1

分类专栏： flutter 路由管理

本文链接：https://blog.csdn.net/xq610928/article/details/108910875

版权

flutter 同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

路由管理

1 篇文章 0 订阅

订阅专栏

前言

各位同学大家好，之前有很多粉丝和同学在问我flutter中的路由管理的问题，趁着国庆节放假有时间我就分享一篇flutter 中路由管理的文章给大家（包括命名路由和非命名路由根路由路由切换和路由栈移除）等等知识点，那么废话不多说我们正式开始

准备工作：

需要安装flutter的开发环境：大家可以去看看之前的教程：
1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718
2 mac系统flutter开发环境安装教程：https://www.jianshu.com/p/bad2c35b41e3
效果图：
QQ截图20201003142712.png

QQ截图20201003142725.png

QQ截图20201003142735.png
QQ截图20201003142803.png

QQ截图20201003142812.png

具体实现：

非命名路由跳转(不带参数)

QQ截图20201003142725.png
QQ截图20201003142735.png
命名路由我们用到的是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 变量通过构造方法传入我们不需要传参的时候直接实例化即可这样我们就完成了命名路由的跳转（不过我们要注意需要提前导包引入需跳转的页面）

非命名路由跳转(不带参数)

   Navigator.of(context).push(
           MaterialPageRoute(
                builder: (context){
               return NoCreateNameDetails(gettitle:_title,);
              }),
        );

我们可以看到非命名路由跳转的带参数和不带参数差不多唯一的差别就是在我们实例化 NoCreateNameDetails组件的时候传入了参数因为NoCreateNameDetails 构造方法那边我设置是非毕传就比较灵活一点

命名路由跳转

效果图：

QQ截图20201003145421.png
QQ截图20201003142803.png

命名路由跳转不带参

首先命名可以我们要在程序的入口 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”] 来取值即可

3路由切换和根路由

如图
QQ截图20201003152643.png

QQ截图20201003152659.png

QQ截图20201003152711.png
我看到上图我们平时开发的时候会遇到这样一个需求
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 ）这个需求如何实现，这个时候我们就要用到路由栈移除的属性了
效果图：
QQ截图20201003154605.png
QQ截图20201003154628.png

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

xq9527--

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
Flutter 路由管理最详细教程

前言各位同学大家好，之前有很多粉丝和同学在问我flutter中的路由管理的问题，趁着国庆节放假有时间我就分享一篇flutter 中路由管理的文章给大家（包括命名路由和非命名路由根路由路由切换和路由栈移除）等等知识点，那么废话不多说我们正式开始准备工作：需要安装flutter的开发环境：大家可以去看看之前的教程：1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc87182 mac系统flutter开发环境安装教程：https:
复制链接

扫一扫