开启生长之旅！这是我参加「日新计划 12 月更文应战」的第6天，点击检查活动概况

Flutter 多引擎系列：《Flutter 多引擎烘托，在稿定 App 的实践》等等，专栏里可检查

布景

前一段时间有个需求是在一个翻滚杂乱的 Native 页面（多级翻滚嵌套）中，嵌入一个 Flutter 列表组件。

先说定论

Flutter + Native 混合嵌套体验并不好，且需求花费更多的保护本钱。已然做不到降本增效，那也没必要做这种 KPI 式的工作。所以最后仍是用 Native 的 scrollView 来落地。

但整个探索进程仍是值得分享给各位同学了解一下。

进程

全体验证进程是在 iOS 上进行的（究竟笔者是个 iOSer [手动狗头]）。

还有一点要说一下测验工程找不到了 … 只有其时文档上留的一些截图，所以没办法直接代码上加注释。

提前做

在 iOS 上，FlutterView 呼应优先级很低，Flutter 呼应的是 touch 相关事情，会被上层的手势拦截，假如上层有滑动或许点击事情就会产生 Flutter 操作上无呼应的问题。

(关于 Flutter 呼应原理这儿不过多论述，有兴趣的同学能够找一下相关的文章)

处理方式上，在 FlutterViewController 上添加常用的点击、滑动等手势，来保证 FlutterView 作为子视图能优先呼应而不被父视图上的手势事情拦截。

- (void)setupGestureRecognizer {
    // 添加滑动手势
    UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] init];
    panGestureRecognizer.cancelsTouchesInView = NO;
    [self.flutterViewController.view addGestureRecognizer:panGestureRecognizer];
    // 添加点击手势
    UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] init];
    tapGestureRecognizer.cancelsTouchesInView = NO;
    [self.flutterViewController.view addGestureRecognizer:tapGestureRecognizer];
}

计划一：各自处理翻滚

Native 的 UIScrollView 和 FlutterView 是彼此独立，处理本身翻滚。

适用场景：不需求惯性联动的场景（比方上滑后吸顶，再次滑动再进行 flutter 翻滚）。

关键测验代码如下：

Flutter 多引擎渲染，混合嵌套滚动探索

测验上，超越必定翻滚间隔就禁用 Native UIScrollView 翻滚，再次翻滚时, FlutterView 就会呼应并翻滚。

优点是不需求什么抵触处理。当然在需求联动场景，便是完全的撕裂，不符合咱们的要求。

计划二：Native 操控，Flutter 跟从

Native UIScrollView 呼应手势事情，Flutter 根据 messageChannel 实时传输的翻滚间隔跟从翻滚。

关键测验代码如下：

Flutter 多引擎渲染，混合嵌套滚动探索

gridViewComponent 是测验用的 Flutter UI 翻滚组件，供给了一个封装好的 scrollTo 办法，内部是 messageChannel 进行通信。

效果如下（这儿要吐槽一下，还不支撑传视频，所以转的 gif，有些糊）：

原理简单的说，便是FlutterView不呼应手势，翻滚由外部 UIScrollView 统一操控，FlutterView 反馈给 iOS 当时内部翻滚的状况。

优点：

能跟现有 Native 代码较好的融合，也不需求更多的改造现有代码逻辑。

缺陷：

  • 割裂了 Flutter 的完整性，Flutter 需求添加更多的逻辑判断（比方翻滚是否究竟，加载更多或许也不能用第三方库）。
  • （需测验）messageChannel 通信上性能不算太好，或许要验证各类机型是否会呈现抖动问题。

计划三：Flutter 操控，Native 跟从

FlutterView 呼应手势事情，获取到的翻滚参数，回传给 Native，来操控 UIView 的布局方位。

关键测验代码如下：

Flutter 多引擎渲染，混合嵌套滚动探索

gridViewComponent 供给了一个封装好的 handleScroll 的回调办法，把翻滚 Y 轴信息传回 Native，Native 从头布局 UIView。

效果如下：

能够看到小绿块（UIView）方位的确在跟从 FlutterView 翻滚变化。

优点：FlutterView 逻辑上更完整。

缺陷：在 Native 上要处理更多的逻辑。

后续

在 Android 上还有另一个问题，Android 设备品种繁复，各种魔改，比方 Flutter 在Android 华为设备存在翻滚惯性跟其他机型不一致的问题，惯性偏短。

所以定论上，Flutter 多引擎烘托来做部分嵌套翻滚不大可行。需求踩更多的坑。

假如对你开发学习上有丝丝效果，请点个赞[开心] ～