Flutter混合栈实践

混合栈产生原因

Flutter热度很高，无论大小公司都跃跃预试，接入的形式可能是：

*已有项目为主部分模块接入Flutter，
*新开Flutter项目部分Native，
*完全Flutter项目

除了最后一种情况不用考虑混合栈的问题，上面两种情况都需要考虑Native和Flutter的交互，其中Native和Flutter间的页面就是要讲述的混合栈问题。

一个场景：

Flutter Page1 -> Native Page1 -> Flutter Page2 -> Native Page1 -> Flutter Page1

解决方案

• 多引擎模式
  Google工程师建议是：对于连续的Flutter页面（Widget）只需要在当前FlutterViewController打开即可，对于间隔的Flutter页面我们初始化新的引擎。

• 咸鱼团队：flutter_boost
  flutter_boost弱化了flutter page的概念，每个flutter page的都有一个Native的ViewController或者Activity容器去承载，将Flutter像WebView那样来使用，采用共享引擎模式实现，由Native容器Container通过消息驱动Flutter页面容器Container，从而达到Native Container与Flutter Container的同步目的，Flutter渲染是由Native容器去驱动的。

• 我们的尝试
  我们项目以Flutter为主，原生模块主要是Hybrid页面，也是采用共享引擎模式，通过消息驱动混合栈间的跳转，如图所示:

  
  混合栈通信.png

由于承载Flutter的项根控制器FlutterViewController不带导航栏的，所以推出Hybrid页面时只能模态推出，这样造成了动画效果的割裂，我们采用的方式是自定义转场动画，核心代码如下：
推出

- (void)presentViewController:(id <UIViewControllerContextTransitioning>)transitionContext
{
    UIView *fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
    UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];
    UIView *containerView = [transitionContext containerView];
    [containerView addSubview:toView];
    
    CGRect frame = toView.frame;
    frame.origin.x = [[UIScreen mainScreen] bounds].size.width;
    toView.frame = frame;
    
    // 保存当前页面的截图
    self.snapshotView = [fromView snapshotViewAfterScreenUpdates:NO];
    
    [UIView animateWithDuration:[self transitionDuration:transitionContext] delay:0
                        options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
        CGRect frame = toView.frame;
        frame.origin.x = 0;
        toView.frame = frame;
    } completion:^(BOOL finished) {
        [transitionContext completeTransition:YES];
    }];
}

返回

- (void)dismissViewController:(id <UIViewControllerContextTransitioning>)transitionContext toRight:(BOOL)toRight
{
    UIView *fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
    UIView *containerView = [transitionContext containerView];
    
    // 展示上个页面的截图
    [containerView addSubview:self.snapshotView];
    [containerView addSubview:fromView];
    
    [UIView animateWithDuration:[self transitionDuration:transitionContext] delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        CGRect frame = fromView.frame;
        frame.origin.x = (toRight ? 1 : -1) * [[UIScreen mainScreen] bounds].size.width;
        fromView.frame = frame;
    } completion:^(BOOL finished) {
        [self.snapshotView removeFromSuperview];
        self.snapshotView = nil;
        [transitionContext completeTransition:YES];
    }];
}

如果需要保存之前的Hybrid页面的话，可以进行状态保存，具体流程如下图：

混合栈.png

问题与不足

• 多引擎模式
  多引擎模式的最大问题是引擎的内存开销很大，在Xs Max上测试新开一个引擎会增加100M左右内存，此外每个引擎有自己独立的isolate，isolate之间是不共享内存空间的，虽然可以通过Sourcport的方式实现通信，但维护起来比较复杂。

• flutter_boost
  flutter_boost是个很不错的框架，对于已有项目部分模块接入Flutter来说是个不错的选择，有一点需要注意的是，flutter_boost更改了flutter默认创建的根控制器，添加了NavigationController，这样对flutter pub库来说可能会造成影响，在我们调研过程中已经发现的库有BSImagePicker图片选择库，
  这个库会获取根控制器，由于根控制器发生了变化，获取不到，可能会造成crash。

let controller : FlutterViewController = app.delegate!.window!!.rootViewController as! FlutterViewController;

• 我们的方式
  我们自定义的混合栈实践，更适合Flutter为主的项目，采用共享引擎模式，减少了内存的开销，缺点是不够独立，混合层级太深的话，状态保存会有些困难，暂时还不足以成为一个独立的框架，不过也是一个可行的方案，已经在项目中运行。
  后续计划是将混合栈独立成一个框架：建立单独的通信、状态保存管理完善、双端统一。

具体选择哪种方式，还要结合自己的业务进行，如果Native为主可以选择flutter_boost，如果flutter为主，我们的方式也是个参考。