Flutter的SPA实战,路由拦截器,全局Toast Loading

2019-09-20 admin

全局Toast/Loading问题

在Flutter开发中,全局的Toast/Loading很狗血,实现已有的实现方法都不是很人性化。最近在Dio做请求拦截器的时候Overlay一直获取不到context,每个页面进入都存一遍很不方便,如果在MaterialApp中存context,那么调用Navigator.of(context).pushReplacementNamedremoveUtils的操作时都会报错。

全局自定义命名路由动画问题

除了以上坑点。在使用命名路由的时候动画Flutter也没提供修改方法。Navigator.pushNamed(context, "/login");如果是android那么动画就是从下而上,一点都不fashion。

页面路由拦截器问题

Flutter的路由很特殊,如果想实现一个Router钩子要怎么办呢? - -!我就是样拦截路由,无论是埋点或者是以前其他特殊功能。都需要一个统一的路由调度。

解决思路

为了解决上面的Flutter坑点,联系Web端非常流行的SPA应用,如果我们的页面一直是单页那么context就是全局的。而且可以实现页面的拦截器。非常nice

SPA 单页面应用解决方案

直接上代码,首先实现一个单页的页面管理器。 so easy…

    MaterialApp(
        home: ManagerPage(),
        // ...
      )

然后是页面管理器ManagerPage的实现,利用Flutter自带的Navigator,不熟悉的童鞋可以看看我以前写的关于Navigator的文章。

    Widget build(BuildContext context) {
        // 利用 EventBus 来调度
        eventBus.on('showToast', (message) {
            Toast.show(context, message);
        });

        return Navigator( // 实现SPA
          initialRoute: '/',
          onGenerateRoute: (RouteSettings settings) {

            // 路由表对应单页
            Widget _page = ZRouter.routerStore[settings.name];

            // 埋点等操作

            // 自定义路由动画
            return CupertinoPageRoute(
              settings: settings,
              builder: (context) => _page
            );
          }
        );
    }

关于routerStore,一个SPA路由表

    static Map<String, Widget> get routerStore => {
        '/': SplashPage(),
        '/main_page': NavPage(),
        '/login': LoginPage(),
        '/product_detail': ProductDetailsPage()
      };

在子页面使用

    // 直接通过 Navigator.pushNamed 命名路由和传参。
    Navigator.pushNamed(context, "/login", arguments: RouteArguments<String>('想从活动登陆'));

    // 使用全局toast
    eventBus.emit('showToast', '系统繁忙请稍后再试...');

对请求拦截器的适配

    onResponse: (Response response) {
      // 在返回响应数据之前做一些预处理
      if (response.data['code'] != '000') {
        eventBus.emit('showToast', '系统繁忙请稍后再试...');
      }
      return response;
    },
    onError: (DioError error) {
      // 当请求失败时做一些预处理
      eventBus.emit('showToast', '程序员GG正在想问题...');
      return error;
    }

觉得有用 star 一下哦

[转载]原文链接:https://segmentfault.com/a/1190000020447724

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-75614.html

文章标题:Flutter的SPA实战,路由拦截器,全局Toast Loading

相关文章
JavaScript编辑器推荐
主流编辑器有SublimeText,Notepad++,webstorm等,是使用最广泛的编辑器,但也有一些JavaScript编辑器提供有着各自的特性和功能,适应不同人的需求,以下是几款优秀的编辑器,相信你一定能找到自己喜欢的。 1. W...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
回到顶部