专栏首页Flutter入门到实战Flutter进阶篇(7)-- Flutter路由轻量级框架FRouter

Flutter进阶篇(7)-- Flutter路由轻量级框架FRouter

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://www.jianshu.com/p/f79bf0fb213c

转载请标明出处: https://www.jianshu.com/p/f79bf0fb213c 本文出自 AWeiLoveAndroid的博客


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


Flutter系列博文链接 ↓:

工具安装:

Flutter基础篇:

Flutter进阶篇:

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('点击进行跳转'),
      ),
    );
  }
}
本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://www.jianshu.com/u/f408bdadacce复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • Flutter轻松实现Adobe全家桶Logo列表

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://www.jianshu.com/p/760906fc2879

    AWeiLoveAndroid
  • Flutter100行轻松实现自定义P站和油管的Logo及自由切换Logo功能

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://www.jianshu.com/p/004b7a56bb51

    AWeiLoveAndroid
  • Flutter路由框架Fluro使用简介

    在Flutter应用开发过程中,除了使用Flutter官方提供的路由外,还可以使用一些第三方路由框架来实现页面管理和导航,如Fluro、Frouter等。

    砸漏
  • Flutter进阶篇(5)-- 使用Flutter创建插件详解并发布到Pub库

    下面详细的讲解一下Flutter如何创建一个插件,并且教大家上传到Pub库,让大家也体验一把自己的库被别人使用的自豪感。

    AWeiLoveAndroid
  • Flutter混编工程之轻量化改造

    轻量级Flutter渲染引擎的核心是将Flutter作为一个「渲染器」,它的唯一功能就是将Native端传来的数据绘制成相应的界面,其它所有交互操作,都通过Ch...

    用户1907613
  • Flutter一个轻量且强大的插件:GetX 之状态管理

    GetX所能提供的功能包括:状态管理、路由管理、依赖管理,提供如国际化、主题等等更多实用工具,今天我们来看下GetX 之状态管理。

    Qson
  • 利用Flutter开发了一个可运行小程序的App

    Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。国内很多开发者...

    Onegun
  • Flutter 实现原理及在马蜂窝的跨平台开发实践

    在马蜂窝旅游 App 很多业务场景里,我们尝试过一些主流的跨平台开发解决方案, 比如 WebView 和 React Native,来提升开发效率和用户体验。但...

    马蜂窝技术
  • Flutter混编工程之Engine复用

    Flutter混编上最大的一个问题,就是Engine的使用,从内存和性能,以及混合栈等多个层面上的综合考虑,业界给出了很多不同的Engine管理方案,就官方而言...

    用户1907613
  • Flutter完整开发实战详解(十四、混合开发打包 Android 篇)

    本篇将带你深入了解 Flutter 中打包和插件安装等原理,帮你快速完成 Flutter 集成到现有 Android 项目,实现混合开发支持。

    GSYTech
  • JDFlutter | 京东技术中台新一代跨平台开发框架

    JDFlutter 是商城共享技术部-多端融合技术部推出的新一代跨平台开发框架,可快速集成至现有 Android/iOS 工程,开发者可借助 JDFlutter...

    京东技术
  • Flutter 1.5 来袭,支持Web , 桌面,嵌入式开发

    做移动开发的都知道,在今年 2月份的世界移动通信大会上,Flutter 团队宣布推出 Flutter 1.2 版本 ,这个版本已支持Web开发,在过去一年中,F...

    开发者技术前线
  • Flutter混合栈路由实践与优化

    导语 | 在 Flutter 和原生混合开发的场景里,路由是绕不开的一个话题。但业内的方案中仍存在内存异常,对官方底层的修改也需要不断踩坑。我们在项目实践中,抽...

    腾小云
  • Flutter系列(一)——详细介绍

    Flutter 是谷歌推出的开发移动UI框架,可以快速的在IOS和Android上构建高质量的原生用户界面。

    Demo_Yang
  • Flutter系列(一)——详细介绍

    Flutter 是谷歌推出的开发移动UI框架,可以快速的在IOS和Android上构建高质量的原生用户界面。

    Demo_Yang
  • Flutter 混合开发框架模式探索

    由于 Google 官方提供的 Flutter 混合式开发方案过于简单,仅支持打开一个 Flutter View 的能力,而不支持路由间传参、统一的生命周期、路...

    QQ音乐前端团队
  • 您不会错过的2020年7个最重要的Flutter更新

    总体而言,2020年是非常艰难的一年,但是就Flutter的发展而言,这是非常好的一年。就在今年年初,Flutter取得了象征性的里程碑,其 GitHub st...

    老孟Flutter

扫码关注腾讯云开发者

领取腾讯云代金券