flutter滚动视图之ProxyWidget、ProxyElement、NotifiableElementMixin源码解析(八)

ProxyWidget

scala 复制代码
/// 一个拥有子组件(child)的组件,它本身不会去构建新的组件。
///
/// 通常作为其他组件的基类使用,比如 [InheritedWidget] 和 [ParentDataWidget]。
///
/// 参见:
///
///  * [InheritedWidget] ------ 为后代组件提供可读取的环境状态的组件。  
///  * [ParentDataWidget] ------ 为子组件的 [RenderObject] 填充 [RenderObject.parentData],  
///    从而配置父组件的布局。  
///  * [StatefulWidget] 和 [State] ------ 可以在生命周期内多次构建、变化的组件。  
///  * [StatelessWidget] ------ 在给定配置和环境状态下始终以相同方式构建的组件。  
///  * [Widget] ------ 总览 Flutter 中所有组件的基类。
abstract class ProxyWidget extends Widget {
  /// 创建一个拥有且仅能拥有一个子组件的组件。
  const ProxyWidget({super.key, required this.child});

  /// 该组件在树中的子组件。
  ///
  /// {@template flutter.widgets.ProxyWidget.child}
  /// 此组件只能有一个子组件。  
  /// 如果要布局多个子组件,请让该组件的 child 使用 [Row]、[Column] 或 [Stack] 之类  
  /// 拥有 `children` 属性的组件,然后将多个子组件传递给它们。
  /// {@endtemplate}
  final Widget child;
}

_NotificationElement

scala 复制代码
/// 一个用于承载 [NotificationListener] 的 Element。
class _NotificationElement<T extends Notification> extends ProxyElement
    with NotifiableElementMixin {
  _NotificationElement(NotificationListener<T> super.widget);

  @override
  bool onNotification(Notification notification) {
    final NotificationListener<T> listener = widget as NotificationListener<T>;
    // 如果监听器提供了 onNotification 回调,并且通知类型匹配 T,
    // 则调用回调并返回其结果。
    if (listener.onNotification != null && notification is T) {
      return listener.onNotification!(notification);
    }
    // 否则返回 false,表示允许通知继续冒泡。
    return false;
  }

  @override
  void notifyClients(covariant ProxyWidget oldWidget) {
    // Notification 树不需要去通知客户端。
  }
}

方法 onNotificationNotifiableElementMixin提供

NotifiableElementMixin

csharp 复制代码
/// 将此 mixin 添加到类上,可以接收由子元素分发的 [Notification] 对象。
///
/// 参见:
///   * [NotificationListener] ------ 一个允许消费通知的组件。
mixin NotifiableElementMixin on Element {
  /// 当合适类型的通知到达此树中该位置时被调用。
  ///
  /// 返回 true 表示取消通知冒泡;返回 false 表示允许通知继续向上分发到更多的祖先节点。
  bool onNotification(Notification notification);

  @override
  void attachNotificationTree() {
    // 绑定通知树节点,将当前元素挂载到父节点的通知树上
    _notificationTree = _NotificationNode(_parent?._notificationTree, this);
  }
}

_NotificationNode

kotlin 复制代码
class _NotificationNode {
  _NotificationNode(this.parent, this.current);

  /// 当前节点,持有实现了 [NotifiableElementMixin] 的 Element。
  NotifiableElementMixin? current;

  /// 父节点,用于形成通知冒泡链。
  _NotificationNode? parent;

  /// 分发通知。
  ///
  /// 先交给当前节点的 [onNotification] 处理:
  /// - 如果返回 true,表示拦截通知,停止冒泡。
  /// - 如果返回 false,表示继续冒泡,则交由父节点处理。
  void dispatchNotification(Notification notification) {
    if (current?.onNotification(notification) ?? true) {
      return;
    }
    parent?.dispatchNotification(notification);
  }
}

🔎 解释:

  • _NotificationNode 就是一个 链表结构 ,把一层层 Element(实现了 NotifiableElementMixin 的,比如 NotificationListener)串联起来。
  • 当某个子组件调用 notification.dispatch(context) 时,通知会沿着这条链 一层层往上冒泡
  • 在冒泡过程中,每个节点都会调用自己的 onNotification,决定是否拦截(返回 true)还是继续向上传递(返回 false)。

Element - dispatchNotification

typescript 复制代码
@override
void dispatchNotification(Notification notification) {
  _notificationTree?.dispatchNotification(notification);
}

Element 里实现的。

这个方法就是 Notification 冒泡的入口

🔎 整体流程回顾

子组件触发通知

ini 复制代码
notification.dispatch(context);

Element 转交给 NotificationTree

javascript 复制代码
void dispatchNotification(Notification notification) {
  _notificationTree?.dispatchNotification(notification);
}
  • Element 不直接处理,而是交给 _notificationTree(也就是 _NotificationNode 链表)。

_NotificationNode 遍历

javascript 复制代码
void dispatchNotification(Notification notification) {
  if (current?.onNotification(notification) ?? true) {
    return; // 如果返回 true 就拦截
  }
  parent?.dispatchNotification(notification); // 否则继续往上
}
  • 这里的 current 就是 _NotificationElement

_NotificationElement.onNotification

kotlin 复制代码
@override
bool onNotification(Notification notification) {
  final NotificationListener<T> listener = widget as NotificationListener<T>;
  if (listener.onNotification != null && notification is T) {
    return listener.onNotification!(notification); // 调用开发者传入的回调
  }
  return false;
}

这就是写的 NotificationListener(onNotification: ...) 被调用的地方。

相关推荐
MediaTea34 分钟前
Python 第三方库:lxml(高性能 XML/HTML 解析与处理)
xml·开发语言·前端·python·html
西陵39 分钟前
Nx带来极致的前端开发体验——使用MF进行增量构建
前端·javascript·架构
Nicholas681 小时前
flutter滚动视图之ProxyWidget、ProxyElement、NotifiableElementMixin源码解析(九)
前端
JackieDYH1 小时前
vue3中reactive和ref如何使用和区别
前端·javascript·vue.js
ZZHow10242 小时前
React前端开发_Day4
前端·笔记·react.js·前端框架·web
前端开发爱好者2 小时前
弃用 html2canvas!快 93 倍的截图神器
前端·javascript·vue.js
ss2733 小时前
手写MyBatis第39弹:深入MyBatis BatchExecutor实现原理与最佳实践
前端·javascript·html
leon_teacher3 小时前
HarmonyOS权限管理应用
android·服务器·前端·javascript·华为·harmonyos
lumi.3 小时前
HarmonyOS image组件深度解析:多场景应用与性能优化指南(2.4详细解析,完整见uniapp官网)
前端·javascript·小程序·uni-app·html·css3
OEC小胖胖4 小时前
动态UI的秘诀:React中的条件渲染
前端·react.js·ui·前端框架·web