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: ...) 被调用的地方。

相关推荐
tao35566712 分钟前
【用AI学前端】HTML-02-HTML 常用标签(基础)
前端·html
2601_9495328415 分钟前
Psello HTML Template: A Developer‘s Deep-Dive Review and Guide - Download Free
前端·windows·html·seo·wordpress·gpl
CappuccinoRose16 分钟前
CSS前端布局总指南
前端·css·学习·布局·flex布局·grid布局·float布局
穿过锁扣的风27 分钟前
如何操作HTML网页
前端·javascript·html
San30.34 分钟前
从零构建坚固的前端堡垒:TypeScript 与 React 实战深度指南
前端·react.js·typescript
yunhuibin1 小时前
VideoPipe环境搭建及编译ubuntu240403
前端·人工智能
CHANG_THE_WORLD1 小时前
PDF文档结构分析 一
前端·pdf
东东5161 小时前
果园预售系统的设计与实现spingboot+vue
前端·javascript·vue.js·spring boot·个人开发
rainbow68892 小时前
Python学生管理系统:JSON持久化实战
java·前端·python
打小就很皮...2 小时前
React Router 7 全局路由保护
前端·react.js·router