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

相关推荐
叠叠乐6 分钟前
robot_state_publisher 参数
java·前端·算法
Kiri霧6 分钟前
Range循环和切片
前端·后端·学习·golang
小张快跑。15 分钟前
【Java企业级开发】(十一)企业级Web应用程序Servlet框架的使用(上)
java·前端·servlet
小白阿龙24 分钟前
Flex布局子元素无法垂直居中
前端
秋田君34 分钟前
前端工程化部署入门:Windows + Nginx 实现多项目独立托管与跨域解决方案
前端·windows·nginx
江城开朗的豌豆1 小时前
阿里邮件下载器使用说明
前端
半兽先生1 小时前
Web 项目地图选型指南:从 Leaflet 到 MapTalks,如何选择合适的地图引擎?
前端
hssfscv1 小时前
Javaweb 学习笔记——html+css
前端·笔记·学习
Mr.Jessy2 小时前
JavaScript高级:深浅拷贝、异常处理、防抖及节流
开发语言·前端·javascript·学习