Flutter多个页面广播通知传值

xiaotianyi 发布于2019-05-23 16:23 / 819人阅读

摘要：在第一页添加一个通知监听者，第三页发送通知告知第一页。在需要发送通知的页面也继续创建这个单例类，通过回调的方式传递值。

Flutter查阅了很多资料，暂时没有发现类似Android/iOS的页面广播通知传值，如有欢迎评论告知～

为何需要广播通知传值？

假如有一个需求是这样的，导航有三个页面，第一页有一个按钮跳到第二页，第二页有一个按钮跳到第三页，第三页有个按钮来改变第一页的背景色。这时候就可以通过通知传值的方式。在第一页添加一个通知监听者，第三页发送通知告知第一页。

效果如下gif：

思路

我的思路是创建一个单例类，在你需要监听的页面创建这个监听者。在需要发送通知的页面也继续创建这个单例类，通过回调的方式传递值。

代码 创建一个单例类

typedef GetObject = Function(dynamic object);

class NotificationCenter {
  // 工厂模式
  factory NotificationCenter() => _getInstance();

  static NotificationCenter get instance => _getInstance();
  static NotificationCenter _instance;

  NotificationCenter._internal() {
    // 初始化
  }

  static NotificationCenter _getInstance() {
    if (_instance == null) {
      _instance = new NotificationCenter._internal();
    }
    return _instance;
  }

  //创建Map来记录名称
  Map postNameMap = Map();

  GetObject getObject;

  //添加监听者方法
  addObserver(String postName, object(dynamic object)) {

    postNameMap[postName] = null;
    getObject = object;
  }

  //发送通知传值
  postNotification(String postName, dynamic object) {
    //检索Map是否含有postName
    if (postNameMap.containsKey(postName)) {

      postNameMap[postName] = object;
      getObject(postNameMap[postName]);
    }

  }
}

在首页添加一个监听

//添加监听者
NotificationCenter.instance.addObserver("changColor", (object){

  setState(() {

    backColor = object;
  });
});

在第三页发送通知

//通知将第一页背景色变成红色
NotificationCenter.instance.postNotification("changColor", Colors.red);

最后

代码可能写的不好，只是提供一个自己的想法。

云服务器 GPU云服务器页面间传值页面之间传值 jsp页面传值 js页面传值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/7203.html

加推Weex实践之路（上）

摘要：我们参考小程序的设计思路进行了优化升级，为每一个需要特有化配置的页面添加一个格式的配置文件，配置文件包括导航栏的配置页面级别的配置跳转的配置等，将配置工程化标准化。设置导航栏按钮包含按钮样式的数组通过完成按钮事件的回调。一、背景1.为什么是Weex在公司快速发展的大环境下，App的更新迭代高速、高频，技术团队平均两周便可诞生一款中型App，但App团队只有6个人（iOS 、Android各3...

shuibo 2019-05-22 19:43 评论0 收藏0
跨平台技术演进

摘要：接下来，我将从原理优缺点等方面为大家分享跨平台技术演进。小程序年是微信小程序飞速发展的一年，年，各大厂商快速跟进，已经有了很大的影响力。下面，我们以微信小程序为例，分析小程序的技术架构。前言大家好，我是simbawu ，@BooheeFE Team Leader，关于这篇文章，有问题欢迎来这里讨论。随着移动互联网的普及和快速发展，手机成了互联网行业最大的流量分发入口。以及随着5G...

魏宪会 2019-08-30 15:43 评论0 收藏0
跨平台技术演进

摘要：接下来，我将从原理优缺点等方面为大家分享跨平台技术演进。小程序年是微信小程序飞速发展的一年，年，各大厂商快速跟进，已经有了很大的影响力。下面，我们以微信小程序为例，分析小程序的技术架构。前言大家好，我是simbawu ，@BooheeFE Team Leader，关于这篇文章，有问题欢迎来这里讨论。随着移动互联网的普及和快速发展，手机成了互联网行业最大的流量分发入口。以及随着5G...

MasonEast 2019-08-26 13:39 评论0 收藏0