共计 6617 个字符，预计需要花费 17 分钟才能阅读完成。
本文首发于微信公众号「Android 开发之旅」，欢迎关注，获取更多技术干货
前言
前一篇文章讲解了 Android 原生工程如何集成 Flutter 项目的具体过程，Flutter 混合开发 (一)：Android 项目集成 Flutter 模块详细指南 , 本篇将带着大家来一起学习原生 iOS 项目如何集成 Flutter。
因为每个版本的集成逻辑都是有差别的，所以这里交代下本篇文章的集成版本:
Flutter（channel dev，v1.10.16）
dart（v2.7.0）
Xcode（v11.2）
cocoapds（1.8.4）
创建 Flutter module
假如 iOS 项目的路径是这样的：flutter/flutter_hybrid/iOS Project, 那么我们需要在 iOS Project 上一层目录 flutter_hybrid 中创建 Flutter module。
| cd flutter/flutter_hybrid/ | |
| flutter create -t module flutter_module |
输入后控制台打印如下：
| $ flutter create -t module flutter_module | |
| Creating project flutter_module... | |
| flutter_module/test/widget_test.dart (created) | |
| flutter_module/flutter_module.iml (created) | |
| flutter_module/.gitignore (created) | |
| flutter_module/.metadata (created) | |
| flutter_module/pubspec.yaml (created) | |
| flutter_module/README.md (created) | |
| flutter_module/lib/main.dart (created) | |
| flutter_module/flutter_module_android.iml (created) | |
| flutter_module/.idea/libraries/Flutter_for_Android.xml (created) | |
| flutter_module/.idea/libraries/Dart_SDK.xml (created) | |
| flutter_module/.idea/modules.xml (created) | |
| flutter_module/.idea/workspace.xml (created) | |
| Running "flutter pub get" in flutter_module... 1.2s | |
| Wrote 12 files. | |
| All done! | |
| Your module code is in flutter_module/lib/main.dart. |
看到 All done 就表示我们项目创建好了。整个 module 目录和原生 Flutter 基本一样，主要就是 Android、iOS 的宿主工程和 lib 目录以及 pubspec.yaml 文件。
添加 Flutter module 依赖
为 iOS 项目添加依赖需要使用 CocoaPods，如果你还没有用到 CocoaPods，可以参考 https://cocoapods.org/ 上面的说明来安装 CocoaPods。
如果你的项目之前没有使用过 cocoapods，那么需要进行初始化生成 podfile 文件，进入 iOS 项目的根目录执行：
pod init
然后打开 podfile 文件，进行配置：
| # 配置 | |
| flutter_application_path = '../flutter_module/' | |
| load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb') | |
| target 'iOSFlutterHybrid' do | |
| # Comment the next line if you don't want to use dynamic frameworks | |
| use_frameworks! | |
| # Pods for iOSFlutterHybrid | |
| # 配置 | |
| install_all_flutter_pods(flutter_application_path) | |
| target 'iOSFlutterHybridTests' do | |
| inherit! :search_paths | |
| # Pods for testing | |
| end | |
| target 'iOSFlutterHybridUITests' do | |
| # Pods for testing | |
| end |
配置添加好后在项目根目录运行以下命令进行安装：
pod install
控制台输出：
| Analyzing dependencies | |
| Downloading dependencies | |
| Installing Flutter (1.0.0) | |
| Installing FlutterPluginRegistrant (0.0.1) | |
| Installing flutter_module (0.0.1) | |
| Generating Pods project | |
| Integrating client project | |
| [!] Please close any current Xcode sessions and use `iOSFlutterHybrid.xcworkspace` for this project from now on. | |
| Pod installation complete! There are 3 dependencies from the Podfile and 3 total pods installed. | |
| [!] Automatically assigning platform `iOS` with version `13.2` on target `iOSFlutterHybrid` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`. |
这里我们看到有三个依赖安装完成了。并提醒我们关闭当前项目，在根目录下面使用 iOSFlutterHybrid.xcworkspace 来打开运行项目。这里可能很多人在执行命令的时候会发现提示 0 个依赖完成。这里有可能是你的 Xcode 版本的问题。因为 Flutter 要求最低版本是 10.2 及以上。
当在 flutter_module/pubspec.yaml 中添加一个 Flutter 插件时，需要在 flutter_module 目录下运行：
flutter packages get
来刷新 podhelper.rb 脚本中的插件列表，然后在 iOS 目录下运行：
pod install
这样 podhelper.rb 脚本才能确保添加的插件和 Flutter.framework 能够添加到 iOS 项目中。
目前 Flutter 还不支持 Bitcode，所以集成了 Flutter 的 iOS 项目需要禁用 Bitcode。
在以下路径下找到 Bitcode 并禁用：
Build Settings->Build Options->Enable Bitcode
flutter 以前的版本是需要添加 build phase 以构建 Dart 代码，但是最新的版本已经不需要添加了，可以自动构建。
调用 Flutter module
Flutter 为我们提供了两种调用方式：FlutterViewController 和 FlutterEngine，FlutterEngine 在使用的时候会有一些问题，将在下文进行说明。
FlutterViewController 方式：
我们打开 ViewController.m 文件，在里面添加一个加载 flutter 页面的方法并且添加一个按钮看来调用：
| #import "ViewController.h" | |
| #import <Flutter/Flutter.h> | |
| #import "AppDelegate.h" | |
| @interface ViewController () | |
| @end | |
| @implementation ViewController | |
| - (void)viewDidLoad {[super viewDidLoad]; | |
| UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; | |
| [button addTarget:self action:@selector(handleButtonAction) forControlEvents:UIControlEventTouchUpInside]; | |
| [button setTitle:@"加载 Flutter" forState:UIControlStateNormal]; | |
| [button setBackgroundColor:[UIColor blueColor]]; | |
| button.frame = CGRectMake(100, 100, 160, 60); | |
| [self.view addSubview:button]; | |
| } | |
| - (void)handleButtonAction{FlutterViewController *flutterViewController =[FlutterViewController new]; | |
| // 设置路由参数 | |
| [flutterViewController setInitialRoute:@"route2"]; | |
| [self presentViewController:flutterViewController animated:false completion:nil]; | |
| } | |
| @end |
当我们运行项目点击加载 Flutetr 按钮时，将会调用 Flutter 页面。和 Android 项目集成一样，这里的 setInitialRoute 可以设置一个 json 数组来传递需要交互的参数。并在 Flutter 中使用 window.defaultRouteName 来获取传递的参数。
FlutterEngine 方式：
我们需要在 AppDelegate 中对 FlutterEngine 进行初始化。打开 AppDelegate.h 文件：
| #import <UIKit/UIKit.h> | |
| #import <Flutter/Flutter.h> | |
| @interface AppDelegate : FlutterAppDelegate | |
| @property (nonatomic,strong) FlutterEngine *flutterEngine; | |
| @end |
在打开 AppDelegate.m 文件：
| // 如果你需要用到 Flutter 插件时 | |
| #import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> | |
| #include "AppDelegate.h" | |
| @implementation AppDelegate | |
| - (BOOL)application:(UIApplication *)application | |
| didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil]; | |
| [self.flutterEngine runWithEntrypoint:nil]; | |
| [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine]; // 如果你需要用到 Flutter 插件时 | |
| return [super application:application didFinishLaunchingWithOptions:launchOptions]; | |
| } | |
| @end |
然后在 ViewController.m 文件定义的 handleButtonAction 中调用：
| - (void)handleButtonAction{FlutterEngine *flutterEngine = [(AppDelegate *)[[UIApplication sharedApplication] delegate] flutterEngine]; | |
| FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil]; | |
| [flutterViewController setInitialRoute:@"route2"]; | |
| [self presentViewController:flutterViewController animated:false completion:nil]; | |
| } |
当我们运行项目点击加载 Flutter 按钮时，将会调用 Flutter 页面。前文讲到使用 FlutterEngine 会有问题，就是我们 setInitialRoute 传递的参数在 flutter 中永远获取到的都是“/”，这个是 Fltter SDK 的一个 Bug，所以如果必须依赖 setInitialRoute，还是使用 FlutterViewController 的形式来加载 Flutter 模块。
热重启 / 重新加载
大家在写纯 Flutter 应用的时候，知道是有热重启 / 重新加载功能的，但是在做混合开发的过程中，你会发现热重启 / 重新加载功能失效了。那么如何在混合开发中开启热重启 / 重新加载功能呢？
- 首先接入我们的设备或者模拟器
- 将我们的 App 关闭，退出后台，在 terminal 中运行 flutter attach 命令
| $ flutter attach | |
| Waiting for a connection from Flutter on Android SDK built for x86... |
复制代码此时就在等待设备的连接。这里要注意的是，如果电脑连接了多台设备需要使用 -d 命令来指定一台设备，参数为设备的 id。
flutter attach -d '你的设备 id'
然后启动我们的应用会看到控制台输出：
| Done. | |
| Syncing files to device Android SDK built for x86... 1,393ms | |
| ???? To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R". | |
| An Observatory debugger and profiler on Android SDK built for x86 is available at: http://127.0.0.1:59354/zRsDBfpesrk=/ | |
| For a more detailed help message, press "h". To detach, press "d"; to quit, press "q". |
这样就表示我们连接成功了。在输出的日志中也告诉了我们如何使用热重启 / 重新加载功能。
在 Terminal 中输入以下命令：
r : 热加载；R : 热重启；h : 获取帮助；d : 断开连接；q : 退出；
这里的的 d 和 q 的命令都有退出调试，区别在于 d 命令只是单纯的断开而 q 命令会将应用退到后台。
调试 Dart 代码
同样在混合开发过程中我们如何调试 dart 代码呢？
- 关闭我们的应用
- 点击 Android Studio 工具栏上的 Flutter Attach 按钮 (需要安装 Flutter 与 Dart 插件)
- 启动我们的应用
接下来就可以像调试普通 Flutter 项目一样来调试混合开发模式下的 Dart 代码了。
总结
本文主要是讲解了 iOS 集成 Flutter 项目的步骤，其中也遇到了一些问题，由于我的 Xcode 版本较低，在集成的过程中 iOS 项目的依赖一直失败。最后才发现是 Xcode 的版本问题。这里花费了很多时间去排查问题，所以大家在集成的过程中有问题可以关注公众号加我微信，给我留言，我会帮助大家解决问题。
全部 Demo 源码已经上传到后台，关注公众号回复「混合开发」即可获得下载链接。
如果你觉得文章还不错，请大家点赞分享下，你的肯定是对我最大的鼓励和支持。
推荐阅读
Flutter 开发必备 Dart 基础：Dart 快速入门
Flutter 混合开发 (一)：Android 项目集成 Flutter 模块详细指南
扫描下方二维码关注公众号，获取更多技术干货。
