Flutter 中的 ScrollNotification 为啥收不到

1. 需求

在做智家 APP 悬浮窗优化需求时，需要获取列表的滑动并通知悬浮窗进行收起或全部显示。

基础库同事已经把基础逻辑整理好如下：

NotificationListener<ScrollNotification>(
  onNotification: (notification){
      //1.监听事件的类型
      if (notification.depth == 0 && notification.metrics.axis == Axis.vertical) {
          if (notification is ScrollStartNotification) {
            print("开始滚动...");
          } else if (notification is ScrollUpdateNotification) {
            //当前滚动的位置和总长度
            if (!scrolling) {
                scrolling = true;
                UIMessage.fireEvent(ScrollPageMessage(scrolling));
            }
          } else if (notification is ScrollEndNotification) {
            print("滚动结束....");
            if (scrolling) {
                scrolling = false;
                UIMessage.fireEvent(ScrollPageMessage(scrolling));
            }
          }
      }
      return false;
},
  child: ListView.builder(
    itemCount: 100,
    itemBuilder: (context, index) {
        return ListTile(title: Text("$index"),);
    }),
);

逻辑很简单，用 NotificationListener 把我们的列表包装一下运行一下测试一下，没问题就把代码提交一下。不管懂不懂 Flutter 中的 ScrollNotification 的逻辑，工作简简单单，任务快速完成。

NotificationListener<ScrollNotification>(
  onNotification: (ScrollNotification notification){
   /// 处理 notification 逻辑
    return false;
  },
  /// EasyReresh 为包含 Head 的方便下拉刷新的组件
  child: EasyRefresh(
    child: ListView()
  )
 )

运行起来效果很正常，能正常收到 ScrollNotification 。

但是需求要求下拉时不能收起悬浮窗。那很很简单，下拉是 EasyRefresh 的行为，那用 NotificationListener 包一下 EasyRefresh 的 child 就好了。代码改成下面的样子

EasyRefresh(
    child: NotificationListener<ScrollNotification>(
      onNotification: (ScrollNotification notification){
       /// 处理 notification 逻辑
        return false;
      },
      child: ListView()
     )
)

运行一下发现 onNotification 不回调，这是为什么？

2. ScrollNotification 冒泡原理

ScrollNotification 是 Flutter 中常见通知，用于通知页面滑动。

以下为从 ScrollNotification 的产生到获取来说明滑动通知的流程

触发页面滑动的原因有两种，手动和程序控制。手动则涉及 GestureDetector ，程序控制则可以调用 ScrollController 的 jumpTo(double value) 方法。

因为程序控制相对监听手势滑动更简单，所以从 ScrollController.jumpTo(double value) 入手，看一下里面有没有发送 ScrollNotification

/// scroll_controller.dart
void jumpTo(double value) {  
  assert(_positions.isNotEmpty, 'ScrollController not attached to any scroll views.');  
  for (final ScrollPosition position in List<ScrollPosition>.from(_positions))  
    position.jumpTo(value);  
}

当调用 ScrollController 的 jumpTo(double value) 时会继续调用 ScrollPosition 的 jumpTo(double value)。ScrollPosition 是抽象类，具体实现类有多种，以滑动常见的 Listview 为例会调用 scroll_position_with_single_context.dart 中 ScrollPositionWithSingleContext。

/// scroll_position_with_single_context.dart
@override  
void jumpTo(double value) {  
  goIdle();  
  if (pixels != value) {  
    final double oldPixels = pixels;  
    forcePixels(value);  
    didStartScroll();  
    didUpdateScrollPositionBy(pixels - oldPixels);  
    didEndScroll();  
  }  
  goBallistic(0.0);  
}

从上面代码中的可以看到这里调用了开始滑动，滑动中，结束滑动，正好对应 ScrollNotification 的三个实现子类 ScrollStartNotification ScrollUpdateNotification ScrollEndNotification

继续跟踪

///scroll_position.dart
void didUpdateScrollPositionBy(double delta) {  
  activity!.dispatchScrollUpdateNotification(copyWith(), context.notificationContext!, delta);  
}

/// scroll_activity.dart
  void dispatchScrollUpdateNotification(ScrollMetrics metrics, BuildContext context, double scrollDelta) {
    ScrollUpdateNotification(metrics: metrics, context: context, scrollDelta: scrollDelta).dispatch(context);
  }

跟踪到重点了，这里是分发通知逻辑

///notification_listener.dart

void dispatch(BuildContext? target) {  
  // The `target` may be null if the subtree the notification is supposed to be  
  // dispatched in is in the process of being disposed.  target?.visitAncestorElements(visitAncestor);  
  target?.visitAncestorElements(visitAncestor);
}

...

@protected  
@mustCallSuper  
bool visitAncestor(Element element) {  
  if (element is StatelessElement) {  
    final StatelessWidget widget = element.widget;  
    /// 遇到 NotificationListener 组件则调用它的 _dispatch 方法，并根据返回值判断是否继续_
    if (widget is NotificationListener<Notification>) {  
      if (widget._dispatch(this, element)) // that function checks the type dynamically  
        return false;  
    }  
  }  
  return true;  
}

/// framework.dart

void visitAncestorElements(bool visitor(Element element)) {  
  assert(_debugCheckStateIsActiveForAncestorLookup());  
  Element? ancestor = _parent;  
  /// 循环获得 父 Element 并传给 visitor 方法
  while (ancestor != null && visitor(ancestor))  
    ancestor = ancestor._parent;  
}

/// notification_listener.dart
  bool _dispatch(Notification notification, Element element) {
    if (onNotification != null && notification is T) {
      final bool result = onNotification!(notification);
      return result == true; // so that null and false have the same effect
    }
    return false;
  }

把上面三段组合起来看，

visitAncestorElements 用来循环向上查找父 Element，停止条件是父 Element 是 null 或者 visitor 方法返回了 false
visitAncestor 方法再遇到 NotificationListener 方法时会调用它的 _dispatch() 方法，之后又调用了 onNotification() 方法
onNotification 返回 true 则冒泡停止，事件不再向父传递，返回 false 则冒泡继续向上传。所以修改 onNotification() 的返回值可以拦截冒泡。

以上是冒泡的产生和传递，通过以上的代码可以想到使用 NotificationListener 将组件包起来即可得到组件上传的通知。

NotificationListener<ScrollNotification>(  
  onNotification: (ScrollNotification notification) {  
    /// deal notification
    return false;  
  },  
  child: ListView()
)

以上是 ScrollNotification 的产生，传递，接受的流程。

3. 问题分析

假如有下面布局代码，当滑动页面时，下面的两个 onNotification 一定能收到回调么？

/// EasyRefresh 为自定义组件

NotificationListener<ScrollNotification>(
        onNotification: (ScrollNotification notification) {
          print('outer onNotification $notification');
          return false;
        },
        child: EasyRefresh(
          child: NotificationListener<ScrollNotification>(
                /// 这里的 onNotification 收到回调么？
                onNotification: (ScrollNotification scrollNotification) {
                  print('inner onNotification $scrollNotification');
                  return false;
                },
                child: CustomScrollView(
                  shrinkWrap: true,
                  physics: ClampingScrollPhysics(),
                  slivers: <Widget>[
                        SliverToBoxAdapter(
                          /// ListView
                          child: ListView.builder(
                                  controller: _scrollController,
                                  shrinkWrap: true,
                                  itemCount: 100,
                                  physics: NeverScrollableScrollPhysics(),
                                  itemBuilder: (BuildContext context, int index) {
                                        return Text('data $index');
                                  }),
                        )
                  ],
                ),
          ),
        ))

按照刚才的分析中只要ListView滑动，在 ListView 与外层的 NotificationListener 中间没有其他的组件拦截，则内外层的 NotificationListener 都应该会被回调 onNotification 方法。

然而在实际测试中，只有外层的 outer onNotificationxxxx 被打印出来，内层的 inner onNotificationxxx 没有打印。

按理说既然外部都收到 ScrollNotification 通知了，内部应该更能收到通知才对。但是查看 EasyRefresh 源码，把它解构出来，得到如下代码。这段代码也是只会打印最外层的 outer onNotification xxx 。这是因为手势滑动时其实是最外层的 CustomScrollView 带着 ListView 滑动，CustomScrollView 发送了 ScrollNotification 而不是 ListView 。所以内部的 NotificationListener 没有回调 onNotification。

NotificationListener<ScrollNotification>(
        onNotification: (ScrollNotification notification) {
          print('outer onNotification ${notification}');
          return false;
        },
        child: CustomScrollView(
          slivers: [
                SliverToBoxAdapter(
                        child: NotificationListener<ScrollNotification>(
                  onNotification: (ScrollNotification notification) {
                        print('middle onNotification ${notification}');
                        return false;
                  },
                  child: NotificationListener<ScrollNotification>(
                        onNotification: (ScrollNotification scrollNotification) {
                          print('inner onNotification $scrollNotification');
                          return false;
                        },
                        child: CustomScrollView(
                          shrinkWrap: true,
                          physics: ClampingScrollPhysics(),
                          slivers: <Widget>[
                                SliverToBoxAdapter(
                                  child: ListView.builder(
                                          controller: _scrollController,
                                          shrinkWrap: true,
                                          itemCount: 100,
                                          physics: NeverScrollableScrollPhysics(),
                                          itemBuilder: (BuildContext context, int index) {
                                                return Text('data $index');
                                          }),
                                )
                          ],
                        ),
                  ),
                ))
          ],
        ))

如何让 ListView 可以滚动？给 ListView 一个固定高度，并且 physics 不是 NeverScrollableScrollPhysics()

Container(
  height: 600,
  child: NotificationListener<ScrollNotification>(
        onNotification:
                (ScrollNotification scrollNotification) {
          print(
                  'inner onNotification $scrollNotification');
          return false;
        },
        child: ListView.builder(
                shrinkWrap: true,
                controller: _scrollController,
                itemCount: 100,
                // physics: NeverScrollableScrollPhysics(),
                itemBuilder:
                        (BuildContext context, int index) {
                  return Text('data $index');
                }),
  ),
)