iOS馋评、Flutter混合開(kāi)發(fā)中，經(jīng)常會(huì)遇到向已有項(xiàng)目中引入Flutter的情況瞳抓。為了模擬這種情況下引入Flutter的場(chǎng)景埃疫，我會(huì)新建一個(gè)iOS工程，然后在新的iOS工程中孩哑，引入Flutter栓霜。
大致步驟如下：
1.新建iOS工程，使用CocoaPods管理工程横蜒；
2.新建Flutter Module胳蛮；
3.iOS接入flutter module；
4.編寫(xiě)測(cè)試代碼丛晌，查看結(jié)果;
當(dāng)然前提是Mac電腦已經(jīng)配置了Flutter環(huán)境變量仅炊，并安裝了Cocoapods管理工具，這里不詳述了茵乱，需要的可自行百度茂洒。
1、新建iOS工程，使用CocoaPods管理工程
新建文件夾FlutterMixDemo督勺，并在目錄下新建Xcode project : ios_app;
啟動(dòng)終端在FlutterMixDemo/ios_app目錄下依次執(zhí)行一下命令：
pod init
pod install
2渠羞、新建Flutter Module
打開(kāi)終端切換到iOS_Flutter_MixBuilder目錄下，執(zhí)行下面命令：
flutter create -t module my_flutter
my_flutter為module的名字智哀，執(zhí)行完命令等待即可次询。
創(chuàng)建完成build一下，命令如下：
flutter build ios
如果執(zhí)行上面的命令出現(xiàn)證書(shū)相關(guān)錯(cuò)誤瓷叫，也可以使用下方的指令在build的時(shí)候選擇不簽名屯吊，命令如下：
flutter build ios --no-codesign
3、iOS接入flutter module
官方給出了三種接入方案摹菠，這三種方案各有優(yōu)缺點(diǎn)盒卸，我們先簡(jiǎn)單看看這三種方案：
使用 CocoaPods 和 Flutter SDK 集成：ios項(xiàng)目中用CocoaPods直接接入管理flutter module。這種方案需要所有開(kāi)發(fā)人員都配置flutter環(huán)境次氨，且安裝CocoaPods蔽介；優(yōu)點(diǎn)是通過(guò)CocoaPods自動(dòng)集成，配置簡(jiǎn)單煮寡。
在 Xcode 中集成 frameworks：將flutter module先build成FrameWork文件虹蓄，然后在ios項(xiàng)目中引入文件。這種方案的優(yōu)點(diǎn)是ios開(kāi)發(fā)人員不需要flutter環(huán)境幸撕，且項(xiàng)目不需要安裝CocoaPods薇组；缺點(diǎn)是每次修改都需要重新build，重新導(dǎo)入坐儿。
通過(guò)CocoaPods打包Framework：與2類(lèi)似律胀，只不過(guò)在build時(shí)加入--cocoapods參數(shù)：flutter build ios-framework --cocoapods --xcframework --no-universal --output=some/path/MyApp/Flutter/。打包出來(lái)的是Flutter.podspec 文件挑童，ios項(xiàng)目中通過(guò)CocoaPods管理集成累铅。這個(gè)方案的與2方案差不多跃须，缺點(diǎn)也是每次改動(dòng)需要重新build站叼，優(yōu)點(diǎn)是ios開(kāi)發(fā)人員不需要flutter環(huán)境。
所以要根據(jù)自身的情況來(lái)選擇符合自己的方案菇民。官方推薦第一種方案尽楔，我也嘗試了第一個(gè)方案，并很順利的引入了Flutter第练，如果你想嘗試其它兩種方式阔馋，可以自行百度指引，本文就不多做延伸了娇掏。
使用Cocoapods+Flutter SDK引入
先打開(kāi)上一步創(chuàng)建的iOS項(xiàng)目的podfile文件呕寝，并在開(kāi)頭添加上下面的代碼：
flutter_application_path = '../my_flutter/'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
post_install do |installer|
flutter_post_install(installer)
end
然后在target中添加：
target 'xxx' do
install_all_flutter_pods(flutter_application_path)
end
修改后的podfile文件如下：
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
flutter_application_path = '../my_flutter/'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
post_install do |installer|
flutter_post_install(installer)
end
target 'ios_app' do
use_frameworks!
install_all_flutter_pods(flutter_application_path)
end
最后終端切換到iOS_Flutter_MixBuilder目錄下，執(zhí)行下面命令：
pod install
CocoaPods會(huì)自動(dòng)將flutter module編輯出的產(chǎn)物集成到ios項(xiàng)目中婴梧。如果沒(méi)有問(wèn)題下梢，執(zhí)行?+B 編譯項(xiàng)目就會(huì)成功客蹋。
4、編寫(xiě)測(cè)試代碼孽江，查看結(jié)果
我們?cè)赩iewController原生controller界面讶坯，添加代碼實(shí)現(xiàn)跳轉(zhuǎn)到Flutter界面FlutterViewController，
#import "ViewController.h"
#import <Flutter/Flutter.h>
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
UILabel *label = [[UILabel alloc]init];
label.textAlignment = NSTextAlignmentCenter;
label.numberOfLines = 0;
label.textColor = [UIColor blackColor];
label.text = @"這是原生界面\n點(diǎn)擊跳轉(zhuǎn)Flutter";
[self.view addSubview:label];
CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
label.frame = CGRectMake((screenWidth-200)/2, (screenHeight-40)/2, 200, 60);
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[self jumpToFlutterViewController];
}
- (void)jumpToFlutterViewController {
FlutterViewController *vc = [[FlutterViewController alloc]init];
[self presentViewController:vc animated:YES completion:nil];
}
@end
參考資料：
[稀土掘金]Flutter岗屏、iOS混合開(kāi)發(fā)實(shí)踐
[阿里云開(kāi)發(fā)者社區(qū)]Flutter混合開(kāi)發(fā)：在已有iOS項(xiàng)目中引入Flutter（上）
