天吶!你竟然不知道Flutter中的"通知冒泡"

CoorChice發表於2019-04-15

目錄傳送門:《Flutter快速上手指南》先導篇

在 Flutter 中,有種由 Widget 樹下層往上層傳遞事件的機制,被稱為 "通知冒泡"

這種機制的實現,就是 NotificationListener

使用 NotificationListener 可以監聽格式各樣的事件通知。

NotificationListener(
    // 此處能夠收到各種各樣的事件
    onNotification: (notify) {
      switch (notify.runtimeType) {
        case ScrollStartNotification:
          print("ScrollStart");
          break;
        case ScrollUpdateNotification:
          print("ScrollUpdate");
          break;
        case ScrollEndNotification:
          print("ScrollEnd");
          break;
        case OverscrollNotification:
          print("Overscroll");
          break;
        case LayoutChangedNotification:
          print("LayoutChanged");
          break;
        case SizeChangedLayoutNotification:
          print("SizeChangedLayout");
          break;
        case UserScrollNotification:
          print("UserScroll");
          break;
        case KeepAliveNotification:
          print("KeepAlive");
          break;
        case MyNotification:
          print("CustomScroll");
          break;
      }
    },
    child: MyWidget())
複製程式碼

這些事件,是來自於由 child 開始的檢視樹中的各個節點發出的。

比如,可滑動的 Widget 都會發出 ScrollNotification 系列的事件通知,你可以使用 NotificationListener 包裹它們,然後開始接收這些事件通知。

現在,看看如何傳送一個自定義的事件通知。

1.先自定義一個 Notification

class MyNotification extends Notification {
  MyNotification(this.msg);
  final String msg;
}
複製程式碼

2.在子節點中傳送通知

Builder(builder: (context) {
  return GestureDetector(
    onTap: () {
      // 只需要呼叫 dispatch 即可
      MyNotification('Haha!').dispatch(context);
    },
    child: Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
  );
}
複製程式碼

⚠️ 注意,由於 dispatch() 需要節點的 context,而不是 build(BuildContext context) 中的根 context,所以需要使用 Builder,包裹一下節點 Widget,以獲得該位置的 context。

目錄傳送門:《Flutter快速上手指南》先導篇

如何找到我?

傳送門:CoorChice 的主頁

傳送門:CoorChice 的 Github


相關文章