Flutter 混合開發(集成到原生 iOS 項目)

對於 Flutter 的業務應用，咱們更但願它能夠集成到已有的項目中，這篇詳細的介紹下如何將 Flutter 集成到 iOS 項目工程中，對於後續的通訊、交互、管理等內容會在後面的篇章中介紹。

建立 Flutter 模塊

建立 iOS 工程項目，命名爲 FlutterMixDemo ，固然你也能夠用已有的工程來集成。

注意1：將咱們項目 BitCode 選項設置爲 NO ， Flutter 目前還不支持。

接下來咱們須要建立 Flutter 模塊，進入已有工程目錄，這裏拿個人工程目錄舉例：

flutterMix/FlutterMixDemo/  (FlutterMixDemo 是個人 iOS 工程項目)
進入在 flutterMix 目錄下，終端執行命令：
flutter create -t module flutter_module

注意2：flutter_module 是本身命名的，但要記得字母都要小寫，否則會報錯。

該命令會建立一個 Flutter 項目模塊，咱們能夠看下它的項目結構及內容。

將 Flutter 模塊以 pods 的方式加入到已有項目中

在咱們的已有項目 FlutterMixDemo 中初始化 pods ，固然若是你的項目中已初始化過 pods ，請忽略。

cd FlutterMixDemo
pod init

這時咱們項目中會多一個 Podfile 文件，咱們在該文件最後面添加命令以下：

target 'FlutterMixDemo' do
end
# 新加命令
flutter_application_path = '../flutter_module'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

注意3：flutter_application_path 是 Flutter 模塊的路徑，記得修改成你的模塊名稱。

添加好後，運行命令

pod install

配置 Dart 編譯腳本

在項目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

使用 FlutterViewController

全部的 Flutter 頁面公用一個Flutter實例 (FlutterViewController) 。

咱們已點擊按鈕後跳入 Flutter 頁面舉例：

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = UIColor.whiteColor;
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button addTarget:self
               action:@selector(jumpToFlutter)
     forControlEvents:UIControlEventTouchUpInside];
    [button setTitle:@"jump to flutter" forState:UIControlStateNormal];
    [button setBackgroundColor:[UIColor orangeColor]];
    button.titleLabel.font = [UIFont systemFontOfSize:20 weight:UIFontWeightBold];
    button.frame = CGRectMake(95.0, 210.0, 160.0, 44.0);
    [self.view addSubview:button];
}

- (void)jumpToFlutter {
    FlutterViewController* flutterViewController = [[FlutterViewController alloc] init];
    [self.navigationController pushViewController:flutterViewController animated:YES];
}

不過這樣跳轉後自己 Flutter 頁面也會有一個導航欄，原生也有一個，形成重複。固然咱們能夠把 Flutter 頁面的 appBar 去掉就能夠，以下：

appBar: AppBar(
        title: Text('Flutter Page') ,
        leading: IconButton(icon: Icon(Icons.arrow_back_ios), onPressed:()=>Navigator.pop()),
      ),

不過針對總體的設計、管理、交互如何去處理優化，也是一個值得討論的話題，我會接下來再介紹。