iOS 与 Flutter 混编

现阶段Flutter应用,大部分是在原有项目基础上进行开发,那就意味着势必要搞明白Flutter跟iOS和Android的原生代码是怎么进行交互的.

最近参照官方文档 (Last updated August 23, 2019)

传送门

先搞明白 怎么从 原生界面跳转到 Flutter渲染的界面
先看一眼图

屏幕快照 2019-10-09 05.57.24 PM.png

点击 Press Me 按钮 跳转到 Flutter 界面

根据官方文档, 我们先把层级目录做好
直接看图吧

WeChatb0a35d8725f34cd7f5679ec37bd0142d.png

一、简单来说 就是我们最好要保证项目的层级和flutter_module的层级在同一层级

flutter_module 创建方式 官网已经给了
命令行 cd 到 最外层目录 执行

flutter create -t module my_flutter

执行完后系统就会总动生成一个 ==my_flutter== 文件 这个名字可以随意取

二、之后就是配置我们自己的iOS项目, 官方文档目前是使用的 cocoapods
如果电脑上没有安装cocoapods的话,可以网上搜索一下安装教程,
我们默认项目是有cocoapods

配置项目只需要在Podfile 加入几行命令就可以

1.Add the following lines to your Podfile:

flutter_application_path = 'path/to/my_flutter/'
  load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

2.For each Xcode target that needs to embed Flutter, call

install_all_flutter_pods(flutter_application_path).
  target 'MyApp' do
    install_all_flutter_pods(flutter_application_path)
  end

完整podfile如下

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '9.0'
inhibit_all_warnings!

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

target 'HybridNativeAppWithFlutter' do
  install_all_flutter_pods(flutter_application_path)
end

# 注意注意注意注意注意

1. flutter_application_path = '../flutter_module' 这里的 /flutter_module 一定要跟上一层你自己创建的 flutter 名称相同

2.HybridNativeAppWithFlutter 要跟你的项目名称相同

确认无误执行

pod install

如果执行成功,那么我们的配置基本就完成了,如果失败,仔细检查上面的两处注意是否出现了问题

三、 接下来就是AppDelegate的代码
直接贴官方的

#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>

@interface AppDelegate : FlutterAppDelegate
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@end

#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> // Only if you have Flutter Plugins

#include "AppDelegate.h"

@implementation AppDelegate

// This override can be omitted if you do not have any Flutter Plugins.
- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil];
  [self.flutterEngine runWithEntrypoint:nil];
  [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

之后,在你需要跳转的界面

#import <Flutter/Flutter.h>
#import "AppDelegate.h"
#import "ViewController.h"

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button addTarget:self
               action:@selector(handleButtonAction)
     forControlEvents:UIControlEventTouchUpInside];
    [button setTitle:@"Press me" forState:UIControlStateNormal];
    [button setBackgroundColor:[UIColor blueColor]];
    button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
    [self.view addSubview:button];
}

- (void)handleButtonAction {
    FlutterEngine *flutterEngine = [(AppDelegate *)[[UIApplication sharedApplication] delegate] flutterEngine];
    FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
    [self presentViewController:flutterViewController animated:false completion:nil];
}
@end

OK,搞定

最后, 网上很多关于iOS配置Flutter的文章很多,但是大部分都比较过时,而且以现在的Flutter版本集成,很容易出现问题,建议大家还是按照官方文档走