Flutter多個頁面廣播通知傳值

LMou發表於2019-05-23

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

複製程式碼

最後

程式碼可能寫的不好,只是提供一個自己的想法。

相關文章