Flutter与原生的混编（iOS）
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页面，当仍然存在以下问题：
- 卡顿问题
- 内存泄露问题
- 状态保持问题
原生拉起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混原生，所以谷歌并不推荐这种方式。
