Flutter与原生的混编（iOS）

概述

尽管Flutter的初衷是用Flutter构建一个完整的APP而不是简单的页面，但在实际开发中不可避免得需要与原生代码进行通讯混编，而混编的两种方案，即Flutter混合原生和原生混合Flutter，也是实际开发中需要作出抉择的，本文也会做一定的探讨。
由于个人的技术局限性，我只对iOS部分做研究。

Flutter与原生交互的通道--Channel

Channel是Flutter与原生交互的一个重要对象，Flutter（或原生）可以创建创建一个指定名字的Channel对象，利用channel对象发送消息，而另一段即原生（或Flutter）也可以拿到同样名字的Channel对象，监听channel对象的回调方法，这样就可以实现远程flutter与原生的互调了。

Flutter中：

// 初始化
MethodChannel channel = MethodChannel("channel");
// 调用名为"channel"的方法
channel.invokeMethod("method");

OC中：

// 创建FlutterViewController
FlutterViewController *vc = [[FlutterViewController alloc] init];
// 创建channel，name与Flutter中的Channel的name保持一致
FlutterMethodChannel *channel = [FlutterMethodChannel methodChannelWithName:@"channel" binaryMessenger:vc];
// 设置channel的回调
[channel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
        if ([call.method isEqualToString:@"method"]) {
            NSLog(@"did call");
        }
    }];

相反的如果我们要在OC中调用Flutter也是一样的，同样是利用channel进行消息的传递，这里就不在赘述。

Channel的分类

除了MethodChannel，还有BasicMessageChannel和EventChannel两种

• MethodChannel：用于传递方法调用。
• BasicMessageChannel：用于传递字符串和半结构化的信息。
• EventChannel: 用于数据流的通信。

而BasicMessageChannel和EventChannel可以进行连续通讯，而MethodChannel是一次消息通讯。

Flutter混原生

谷歌是推荐开发使用这种模式进行混编，而调用原生页面也相当简单，我们只需要使用channel，就可以调起原生页面。

在Flutter项目的目录中找到ios文件夹，这一部分便是Flutter项目的iOS部分。
在Appdelegate.m中

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];
    
    FlutterViewController * vc = (FlutterViewController *)self.window.rootViewController;
    
    FlutterMethodChannel *methodChannel = [FlutterMethodChannel methodChannelWithName:@"method" binaryMessenger:vc];

    UIViewController * nativeVC = [[UIViewController alloc] init];
    [methodChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
        if ([call.method isEqualToString:@"show"]) {
            [vc presentViewController:nativeVC animated:YES completion:nil];
        }
    }];
    
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

我们可以持有channel对象，同样通过channel给flutter发送消息，把iOS执行的结果返回给Flutter。

原生混Flutter

然而除非是一个全新的项目，现实开发更多是要在一个原有的原生项目中嵌入Flutter页面，而Flutter也提供了相应的支持。

FLutter项目嵌入

首先创建Flutter Module,命名为flutter_module，将module项目和原生项目放到同级目录，然后在Podfile文件中：

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

flutter_application_path = '../flutter_module'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'OCMixFlutterDemo' do
  install_all_flutter_pods(flutter_application_path)
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for OCMixFlutterDemo

end

执行pod install命令

通过cocoapods，Flutter 模块就嵌入原生项目工程了。

Flutter页面调用

通过导入<Flutter/Flutter.h>,就可以调用Flutter页面了。

#import <Flutter/Flutter.h>

...
FlutterViewController *vc = [[FlutterViewController alloc] init];
[self presentViewController:vc animated:YES completion:nil];
...

可以看到调起的页面是main.dart中的页面，如果要吊起指定的flutter页面，可以通过
[vc setInitialRoute:@"flutter1"];
传递指定标示路由，然后在main.dart中通过window.defaultRouteName拿到InitialRoute现实对应的Flutter页面（通过StatefulWidget变化页面），

原生调Flutter性能优化

尽管上述代码已经实现了原生调起Flutter页面，当仍然存在以下问题：

1. 卡顿问题
2. 内存泄露问题
3. 状态保持问题

原生拉起Flutter页面的时候会发现明显的卡顿，这是因为创建一个大内存占用的FlutterViewController是很消耗性能，所以我们可以考虑缓存的策略，用空间换时间的方法，解决卡顿的问题。

@interface ViewController ()

@property(strong, nonatomic)FlutterMethodChannel *channel;
// flutter引擎，可以缓存Flutter页面
@property(strong, strong)FlutterEngine *engine;

@end

@implementation ViewController

...

- (FlutterEngine *)engine {
    if (!_engine) {
        FlutterEngine *engine = [[FlutterEngine alloc] initWithName:@"raymond"];
        if (engine.run) {
            _engine = engine;
        }
    }
    return _engine;
}

// 调起Flutter页面
- (void)flutterAction:(id)sender {
    FlutterViewController *vc = [[FlutterViewController alloc] initWithEngine:self.engine nibName:nil bundle:nil];
    
    // 路由需要在engine创建时传递，所以这里可以通过FlutterMethodChannel参数展示指定的页面
    _channel = [FlutterMethodChannel methodChannelWithName:@"MyApp" binaryMessenger:vc];
    [_channel invokeMethod:@"show" arguments:@"one"];
    
    [self presentViewController:vc animated:YES completion:nil];
}
...

@end

我们可以通过一个单例持有Engine，通过Engine创建FlutterViewController，避免每次创建时消耗的大量性能，而持有Engine，也能保持Flutter模块状态，不需要保存到原生项目中，解决了状态保持的问题

另外FlutterViewController也存在着内存泄露（Flutter Bug，暂时无法解决），一个FlutterViewController从页面上消失后仍然会有2MB的内存泄露，虽然暂时无法解决，我们可以用一个单例持有一个FlutterViewController，通过channel来决定显示那个页面，避免每次创建一个新的FlutterViewController造成性的内存泄露。

原生混Flutter性能明显不如Flutter混原生，所以谷歌并不推荐这种方式。