Native和Flutter混合开发ViewPager的解决方案

Flutter由于其可以比拟原生的页面渲染速度，越来越多的开发者和企业愿意使用Flutter来开发或者混合开发模式开发APP，来提升开发效率，降低开发成本。贝壳在IPD和Android平板上，也进行了大量的Flutter实践。

其中有一个场景如下：

这个场景中，可以通过上下滑动来进行页面切换，而且其中一个是地图页面，这个页面是Native页面，而其它页面我们打算用Flutter来开发，想要实现这种效果就需要Native和Flutter在同一级页面的混合。最后的效果就是上下滑动或者点击左侧TAB可以任意切换Native和Flutter页面。

这种场景我们最先想到的就是用ViewPager+Fragment来开发，这是合理的解决方案，更好的消息是ViewPager2已经支持了上下滑动进行页面切换。

挺简单的不是吗？我们开始吧。

第一步：创建FlutterFragment

第二步：创建NativeFragment 省略...

第三步：组装ViewPager 省略...

非常简单吧，一定不要高兴的太早，高兴太早的结果就是各种问题就会从四面八方不断涌出。

这个是原生的滚动冲突问题，老生常谈，网上解决方案数不胜数。咱们简单数一下，一般我们解决这种事件冲突大多数的方法就是继承ViewPager重写它的OnInterceptTouchEvent方法重新定义拦截规则或者重写它的dispatchTouchEvent方法重新定义事件的分发规则，但是ViewPger2有一个问题，如下：

ViewPager2是 final 的类，他不允许被继承，那么这给我们解决这个问题，提供了一些的难度，但是问题不大，我们可以通过重写Fragment中外层的滚动控件，来实现同样的效果，原理类似,简单带过一下

同上面的原理一致，Native的ViewPager拦截了滑动事件，Flutter页面就没法滚动了，我们没法向上面一样去从Flutter页面中控制ViewPager的事件拦截。

那么，Native到Flutter的滑动事件是如何传递的呢？

Native到Flutter的事件传递过程示意图：

这个图显示了Native到Flutter的事件传递过程，其实中间的传递过程我们并不关心，我们只关心传递链末端的事件结果，或者说，我们可以从其它角度来探索这个问题，我们只要知道Flutter页面滚动到底部或者顶部就可以了。

方案示意图：

2-1、ViewPager如何释放事件

2-2、如何确定Flutter页面的滚动位置？

想要确定Flutter页面的滚动位置，我们就要了解Dart语言的滚动机制，但是flutter的滚动机制不是我们要重点讨论的对象，而且要深入了解滚动原理我们需要用一篇甚至几篇的文章来解析，这里我们大概说一下flutter的滚动处理流程：

当手指在屏幕上滑动额时候，首先通过RawGestureDetector收集手势信息（里面处理了手势竞争），竞争结束后将手势信息到Scrollable中。Scrollable接受到信息后，通过ScrollPosition进行滑动控制包含：

（1）修改偏移量，通知Viewport绘制不同的区域 

（2）通知ScrollController,进行观察者的通知。

判断滚动位置的方式：

我们可以自定义ScrollController，在这个controller中添加一个listener，通过上面的监听来判断滚动位置。

但是对于我们这个场景来说ScrollController并不能完全满足我们的需求。

ScrollController的主要作用：

-----控制滚动控件的滚动位置

-----获取当前的滚动位置

对于解决滚动冲突来说这是不够的，从Android的解滚动冲突的经验来说，我们需要让父控件拦截或者透传我们的滚动事件，如果是这样的话我们还需要能够拦截滚动事件的传递，而ScrollController不能为我们提供这类的帮助。

Android的事件传递机制我们是清楚的（从上到下的(不拦截)传递，从下到上的拦截（不传递）），Flutter中有没有类似的事件传递机制呢？

很高兴，有！Notification。

通知（Notification） 是 Flutter 中重要的机制，在 Widget 树中的任一节点都以分发通知，通知会沿着当前节点向上传递冒泡，其父节点都可以用 NotificationListener 来监听或拦截通知。

Flutter中很多地方使用了通知，如可滚动组件（Scrollable Widget）滑动时就会分发滚动通知（ScrollNotification），而Scrollbar正是通过监听ScrollNotification来确定滚动条位置的。

而NotificationListener正式用来监听Notification的

ScrollView的注释中也明确说明，我们可以用NotificationListener来监听滚动位置而不用使用ScrollController

对于滚动事件来说Notification有下面几种：

 ScrollStartNotification：开始滚动

 ScrollUpdateNotification：正在滚动

 ScrollEndNotification : 结束滚动

 OverscrollNotification：滚动到边界

 OverscrooNotification？这不就是我们需要的吗~

代码如下:

这样我们就很简单的能够知道是不是滚动到边界了，我们还不知道是滚动到顶部还是底部，怎么办？继续

通过ScrollStartNotification记录了初始位置后，通过滚动位置的差值来判断滚动方向和边界位置，然后向native发送通知（这里向Native发送通知也就是Flutter和Native的通信就不具体说了，我这里Andorid用的是EventBus，IOS用的是notification），Native收到通知后，ViewPager回收触摸事件自己处理，这样ViewPager就可以翻页了!

我们用上面的自定义的NotificationListener包裹了我们的Flutter页面，发现可滚动的Flutter页面已经没问题了，但是不可滚动的Flutter页面无法通过滚动切换ViewPager。原因是，这类页面不会发出ScrollNotification，我们需要添加手势监听来解决。

添加手势监听解决滚动冲突：

这样我们这个自定义的NotificationListener基本完成，我们可以用它来包装我们的widget，放到Native的ViewPager中使用了。

Native的处理

当然，Native侧我们还需要做一定的处理，来呼应Flutter给到的消息通知，Native侧，接收到滚动到边界的通知后，还需要让ViewPager重新拿回事件处理权，处理页面切换。

效果图：

但是这时又遇到了一个问题：

如果是相邻的Flutter页面进行切换会出现 闪屏的情况。

闪屏现场如下：

闪屏的原因：Tab2和Tab3的flutter页面使用的是同一个FlutterEngine去绑定。

在Flutter1.12上，当它们之间发生切换的时候，会先执行FlutterView的detachFromFlutterEngine()方法将当前FlutterFragment的FlutterView和FlutterEngine解绑；然后去和另外一个FlutterFragment的FlutterView进行重新绑定，重新绑定是需要一定的时间的，所以会在下一个Flutter页面真正显示出来之前先显示之前绑定的页面，然后下一个FlutterView真正绑定建立连接之后会重新刷新视图发生变化，这就造成了Tab切换视图的闪屏问题。

当然我们可以给每一个Flutter页面单独开一个引擎来解决这个问题，但是这种方式对内存和性能的消耗是挺大的，我这里用了一种巧妙的方式来解决了这个问题：把所有相邻的Flutter页面用Flutter的PageView包裹起来，这样相邻的Flutter页面就相当于一个页面一个引擎，Flutter页面的切换就仅仅是Flutter中PageView的切换而已，不需要引擎的解绑和绑定了。

修改前：

修改前的方案是正常的一个tab对应一个Fragment，而创建Flutter Fragment时都用的同一个引擎，所以在页面切换时，就会进行引擎的解绑和绑定而出现上面的闪屏问题。

修改后：

如上图所示，4个tab对应了2个Fragment，其中一个Fragment对应的是Flutter的PageView，这样通过Native和Flutter之前的通信来实现每个4个tab对应的4个页面。这样在切换Flutter页面时，就仅仅是Flutter 的PageView内部切换而不存在引擎的解绑和绑定问题了。