混合栈产生原因
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页面的话，可以进行状态保存，具体流程如下图：
问题与不足
多引擎模式
多引擎模式的最大问题是引擎的内存开销很大，在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为主，我们的方式也是个参考。
