Flutter多个页面广播通知传值

2,535 阅读1分钟

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

为何需要广播通知传值?

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

效果如下gif:

Untitled.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<String, dynamic> postNameMap = Map<String, dynamic>();

  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);

最后

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