Flutter进阶篇（7）-- Flutter路由轻量级框架FRouter

版权声明：本文为博主原创文章，未经博主允许不得转载。

https://cloud.tencent.com/developer/article/1528550

转载请标明出处：

https://cloud.tencent.com/developer/article/1528550

本文出自 AWeiLoveAndroid的博客

如果你想从一个页面进入另一个页面，返回时还是保留着跳转前的最后的状态，也许你第一个想的是用Key去实现，但是那么有点麻烦，很多人的都不知道如何下手。今天我查找源码，发现了一个PageStorage这个类，它主要是用于存储状态的，不管你有多少页面，都可以保存状态信息。真是太方便了，而且使用起来也是超级简单。下面详细讲解一下PageStorageKey、PageStorageBucket和PageStorage这几个类的用法和源码解析。

Flutter系列博文链接 ↓：

工具安装：

• Flutter从配置安装到填坑指南详解

Flutter基础篇：

• Flutter基础篇（1）-- 跨平台开发框架和工具集锦
• Flutter基础篇（2）-- 老司机用一篇博客带你快速熟悉Dart语法
• Flutter基础篇（3）-- Flutter基础全面详解
• Flutter基础篇（4）-- Flutter填坑全面总结
• Flutter基础篇（5）-- Flutter代码模板，解放双手，提高开发效率必备
• Flutter基础篇（6）-- 水平和垂直布局详解
• Flutter基础篇（7）-- Flutter更新错误全面解决方案(图文+视频讲解)

Flutter进阶篇：

• Flutter进阶篇（1）-- 手把手带你快速上手调试Flutter项目
• Flutter进阶篇（2）-- Flutter路由详解
• Flutter进阶篇（3）-- Flutter 的手势（GestureDetector）分析详解
• Flutter进阶篇（4）-- Flutter的Future异步详解
• Flutter进阶篇（5）-- 使用Flutter创建插件详解并发布到Pub库
• Flutter进阶篇（6）-- PageStorageKey、PageStorageBucket和PageStorage使用详解
• Flutter进阶篇（7）-- Flutter路由轻量级框架FRouter

Dart语法系列博文链接 ↓：

• Flutter基础篇（2）-- 老司机用一篇博客带你快速熟悉Dart语法(这是Dart语法系列的第一篇)
• Dart的语法详解系列篇（二）-- 类与函数
• Dart的语法详解系列篇（三）-- mixin入门
• Dart的语法详解系列篇（四）-- 泛型、异步、库等有关详解

最近对路由做了封装，写了一个轻量级框架，让你轻松地使用路由，不再那么麻烦。任何页面都可以用，真的是方便快捷。已经传到了github，欢迎朋友们给个star，感谢大家，希望能在帮助大家的同时，麻烦大家给个打赏买口水喝，谢谢大家。

开源仓库地址：https://github.com/AweiLoveAndroid/Flutter-learning/blob/master/FRouter/

一、目前路由使用中存在的问题

发送位置比较零散

接收也不太好维护

页面冗余代码比较多

二、FRouter轻量级路由框架的思路

针对以上路由存在的问题，我对路由做了一个封装，解决了路由存在的一些问题，把发送和接收路由做了统一处理，并且对不同的页面需求做了适应，让代码维护变得更间接明了，无论是在哪个页面都可以直接用 FRouter 操作路由了。

三、代码思路分析

首先针对不同的页面，做了适配处理，

1.是否为首页，如果是，就使用 MaterialApp + Scaffold + AppBar组合，最后只需要传入对应的参数就可以轻松实现这个组合了，去掉了大量冗余重复代码，如果不是首页，就用Scaffold + AppBar组合。

2.是否有AppBar，如果有就用Scaffold + AppBar组合，如果没有就用自己传入的 child属性（自己写的页面，没有标题栏的页面）。

3.路由管理统一使用FRouter类进行管理。

比如下面的示例代码，我这个MainPage是首页，我是用 FRouter(isFirstPage: true,...)，这就表示当我创建FRouter这个类对象的时候，实际上就创建了MaterialApp + Scaffold + AppBar组合，这就是标准的首页的组件组合的方式，省去了一大堆没用的代码，当然我这里面也封装了很多其他的属性，你可以根据需要传入即可，这里不逐个演示了。这里的isShowAppBar: true,属性表示显示AppBar组件。

routers属性表示使用命名路由时，需要设置的路由管理的一个Map集合，child属性就是我们自己的页面内容了，比如这里使用一个RaisedButton按钮，我点击它发送路由，我可以使用 FRouter.sendRouter(context, '/pageone'); 命名路由，这里的/pageone就是命名路由的名称，对应着routers集合的key。如果只是发一个普通的路由，没必要这么麻烦，直接使用 FRouter.sendRouterPage(context, PageOne()); 即可，这里的PageOne()是我们要发送的目标页面。

发送数据：这里的'/pagetwo': (builder) => PageTwo('数据2'),，实际上是给页面PageTwo发送了一个String类型的字符串过去了，在PageTwo的构造函数里面有一个String类型的字段，当然你也可以根据实际需要，给你的页面的构造函数的参数设置其他的参数类型，这里只是以String类做了一个示例。

// 使用示例代码
class MainPage extends StatefulWidget {
  @override
  MainPageState createState() => new MainPageState();
}

class MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    // 首页 isFirstPage: true,
    return FRouter(
      isFirstPage: true,
      isShowAppBar: true,
      routes: {
        // 不传递数据
        '/pageone': (builder) => PageOne(),
        // 传递数据给PageTwo这个页面
        '/pagetwo': (builder) => PageTwo('数据2'),
        '/pagethree': (builder) => PageThree('数据3'),
      },
      appBarTitle: Text('Hello World'),
      child: RaisedButton(
        onPressed: () {
          // 命名路由
          FRouter.sendRouter(context, '/pageone');
          // 发送路由到新页面
          // FRouter.sendRouterPage(context, PageOne('data'));
        },
        child: Text('点击进行跳转'),
      ),
    );
  }
}

4.接下来看看目标页面的处理。

PageOne 页面构建的时候，同样使用FRouter，这里需要注意的是，它不是首页，所以不需要设置isFirstPage属性（默认就是false 非首页），我点击按钮返回上个页面的时候，使用FRouter.backPageRouter(context);即可。是不是很方便，全部都用的是 FRouter来统一管理。

class PageOne extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // 非首页 isFirstPage: false, 默认就是非首页
    return FRouter(
      isShowAppBar: true,
      appBarTitle: Text(),
      child: RaisedButton(
        onPressed: () {
          // 返回到上个页面
          FRouter.backPageRouter(context);
        },
        child: Text('点击进行跳转'),
      ),
    );
  }
}

PageTwo 页面构建的时候，同样使用FRouter，这里需要注意的是，这个页面显示AppBar，所以可以设置isShowAppBar:true属性（默认就是true 显示，如果需要显示AppBar，那么这个属性可写可不写），我点击按钮返回上个页面的时候，要传递一个数据给上个页面可以，使用FRouter.backPageRouter(context,'返回给上个页面的数据');即可，参数2是我们需要传递的数据，可以是基本类型，也可以是一个对象，实体类等类型。

class PageTwo extends StatelessWidget {
  String data;

  PageTwo(this.data);

  @override
  Widget build(BuildContext context) {
    return FRouter(
      isShowAppBar: true,
      appBarTitle: Text('PageTwo'),
      child: RaisedButton(
        onPressed: () {
          // 返回数据给上个页面
          FRouter.backPageRouter(context,'返回给上个页面的数据');
        },
        child: Text('点击进行跳转'),
      ),
    );
  }
}

PageThree 这里面做了一点变化：isShowAppBar: false,，表示不显示 AppBar，那么这时候就不会显示AppBar了，仅仅只显示自己想要的页面内容（child属性即自己的内容）。

class PageThree extends StatelessWidget {
  String data;

  PageThree(this.data);

  @override
  Widget build(BuildContext context) {
    // 不显示AppBar
    return FRouter(
      isShowAppBar: false,
      child: RaisedButton(
        onPressed: () {
          FRouter.backPageRouter(context);
        },
        child: Text('点击进行跳转'),
      ),
    );
  }
}