前言
Flutter和iOS支持兩種形式的混編，一種是某一些頁面全是用flutter去繪制图筹，另外一只是flutter頁面作為iOS某個控制器頁面的一部分去展示净薛，后面會逐步去介紹這兩種方式的實現
本篇文章主要介紹在iOS項目中添加Futter模塊
1、如果你還沒開始在macOS上搭建Flutter開發(fā)環(huán)境可以參考官方文檔：入門: 在macOS上搭建Flutter開發(fā)環(huán)境楞泼。
2炮捧、在flutter和iOS混編過程中我們需要用到Android Studio或者Visual Studio Code 來編寫dart相關的代碼及第三方庫的管理庶诡，具體的配置步驟可以參考官方文檔： 配置編輯器。
3寓盗、如果你對flutter和iOS的區(qū)別還不是很了解可以先了解下官方文檔 Flutter for iOS 開發(fā)者灌砖。
一、創(chuàng)建Xcode項目
用Xcode創(chuàng)建一個iOS項目命名為Flutter_iOS
然后cd到項目的根目錄Flutter_iOS
執(zhí)行命令
flutter create -t module my_flutter
二傀蚌、將 Flutter 模塊以 pods 的方式加入到已有項目中
在我們的已有項目 Flutter_iOS 中初始化 pods 基显，如果你的項目中已初始化過 pods ，請忽略善炫。
cd 項目根目錄
pod init
這時我們項目中會多一個 Podfile 文件撩幽，我們在該文件最后面添加命令如下：
vim podfile
target 'Flutter_iOS' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
# use_frameworks!
# Pods for Flutter_iOS
end
# 新加命令
flutter_application_path = '../flutter_module'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
注意：flutter_application_path 是 Flutter 模塊的路徑，記得修改為你的模塊名稱箩艺。
添加后保存退出窜醉，運行命令
pod install
三、配置 Dart 編譯腳本
Xcode->Build Phases ->點擊左上角?號按鈕->選擇 New Run Script Phase 艺谆，添加如下腳本：
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
四榨惰、設置BitCode
Flutter 目前還不支持 BitCode,點擊將我們項目 BitCode 選項設置為 NO
Xcode->Build Settings ->Build Options->將BitCode 選項設置為 NO
五、添加跳轉代碼
使用 FlutterViewController
所有的 Flutter 頁面公用一個Flutter實例 (FlutterViewController) 静汤。
#import "ViewController.h"
#import <Flutter/Flutter.h>
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
}
- (IBAction)pushToFlutterVC:(UIButton *)sender
{
FlutterViewController *flutterVC = [[FlutterViewController alloc] init];
[self presentViewController:flutterVC animated:YES completion:nil];
}
@end
六琅催、運行和熱更新
項目可以在Android Studio上進行dart相關語言的編寫，但是需要使用Xcode運行整個項目的代碼
混編后原先的熱更新不能用虫给，但是我們可以通過如下方式實現：
首先退出模擬器上運行的項目
cd到flutter_module工程路徑藤抡，執(zhí)行
flutter attach
attach成功之后，運行xcode抹估，更新直接press 'r'
在Android Studio中修改dart文件缠黍，press 'r'直接可以看到修改之后的顯示
