> For the complete documentation index, see [llms.txt](https://devbook.site/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://devbook.site/2-ji-cheng/ios-xiang-mu-ji-cheng-flutter.md).
# 第1节：iOS项目集成Flutter
本节学习内容：在已有的iOS项目中集成Flutter，以使得您的iOS项目中的部分界面/功能可以通过Flutter来实现。
本节学习用时：**30分钟**
本节学习方式：动手实践
本节目录：
一、集成方式介绍
二、集成方法一：手动配置iOS与Flutter的混编环境
三、集成方法二：Pod集成Flutter方式
四、集成后调用Flutter界面的代码编写
### 一、集成方式介绍
本节将介绍两种在已有的iOS项目中集成Flutter的方法，分别为①手动配置iOS与Flutter的混编环境、②Pod集成Flutter方式。
下面表格是两种集成Flutter的方法比较：
| | 手动集成Flutter | Pod集成Flutter |
| -------------------- | ------------------- | --------------------------------------------- |
| 集成速度 | 需要自己建立文件、进行相应配置，并替换 | 执行Pod及Run Script即可 |
| Flutter项目更新时 | 每次都需要替换 | 不用替换 |
| Flutter项目与iOS同时路径变更时 | 不影响iOS工程 | Flutter工程需要重新编译执行；
然后iOS工程需再重新执行Pod
|
### 二、集成方法一：手动配置iOS与Flutter的混编环境
#### 1.1 集成后的最后项目结构如图：
> 
#### 1.2 集成后的最后文件结构如图：
> 
#### 1.3 详细的集成实现步骤如下：
* ①、通过终端命令在指定目录(这里我们选择iOS项目的同级目录)创建myfluttermodule。`flutter create -t module myfluttermodule`
* ②、Xcode：创建iOS项目，设为myiosproject；
* ③、Xcode：创建配置衔接文件
* 在②中建立的iOS项目中新建`Config`目录，用于存放/管理接下来Xcode工程需要创建的的配置衔接文件；
* 选择创建`Configuration Settings File`文件，分别创建名为 `Flutter.xcconfig`、`Debug.xcconfig`、`Release.xcconfig`的三个配置文件；
> 
* 完善`Flutter.xcconfig`、`Debug.xcconfig`、`Release.xcconfig`三个配置文件的内容为分别如下：
> Flutter.xcconfig 配置文件内容如下：
>
> ```
> //Flutter.xconfig,用于指向外目录flutter module的`Generated.xcconfig`文件路径引用文件
>
> //这里填写前面建立的 myfluttermodule 的Generated.xcconfig的路径
> #include "../../myfluttermodule/.ios/Flutter/Generated.xcconfig"
> ENABLE_BITCODE=NO
> ```
>
> Debug.xcconfig 配置文件内容如下：
>
> ```
> //Debug.xconfig，Xcode的环境配置文件
>
> #include "Flutter.xcconfig"
> //#include "../Pods/Target Support Files/******.debug.xcconfig"//pod路径
> #include "../Pods/Target Support Files/Pods-myiosproject/Pods-myiosproject.debug.xcconfig"//pod路径
> FLUTTER_BUILD_MODE=debug
> ```
>
> Release.xcconfig 配置文件内容如下：
>
> ```
> //Release.xconfig，Xcode的环境配置文件
>
> #include "Flutter.xcconfig"
> //#include "../Pods/Target Support Files/******.release.xcconfig"//pod路径
> #include "../Pods/Target Support Files/Pods-myiosproject/Pods-myiosproject.release.xcconfig"//pod路径
> FLUTTER_BUILD_MODE=release
> ```
* 修改Xcode Project的环境配置选择
> 
* ④、Xcode -> Target -> Build Phases -> New Run Script Phase，添加要执行的脚本内容引入`xcode-backend.sh`，此步很重要。
```
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
```
> 
* ⑤、添加/替换flutter编译产物，**如果之前已添加，则这里每次有有新的时候，注意要替换掉，否则界面还是旧的。**
> 即复制 myfluttermodule/.ios/Flutter下的`App.framework`、`engine`、`flutter_assets`进行替换。
>
> 然后Xcode重新编译即可。
>
> 注意：`flutter_assets` 并不能使用`Create groups` 的方式添加，只能使用`Creat folder references` 的方式添加进Xcode项目内，否则跳转flutter会页面渲染失败（页面空白）。
* ⑥、至此，恭喜你，到这里您可向往常一样直接执行已集成Flutter的Xcode项目了。
### 三、集成方法二：Pod集成Flutter方式
#### 2.1 最后的项目结构如图：
> 
#### 2.2 实现步骤如下：
* ①、通过终端命令在指定目录(这里我们选择iOS项目的同级目录)创建myfluttermodule。`flutter create -t module myfluttermodule`。这里因为我们已经在1中实现，所以不再重复创建。
* ②、Xcode：创建myiosproject2；添加如Podfile，及在Podfile中如结构图中所示，补充
```
flutter_application_path = './../myfluttermodule/'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
```
后，执行pod install
> 
* ③、Xcode -> Target -> Build Phases -> New Run Script Phase，添加要执行的脚本内容引入`xcode-backend.sh`，此步很重要。同1中一样的做法。
* ④、至此，混编环境配置成功！
### 四、集成后调用Flutter界面的代码编写
```
#import "AppDelegate.h"
#import
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
// ViewController *viewController = [[ViewController alloc] init];
// UIViewController *rootViewController = [[UINavigationController alloc] initWithRootViewController:viewController];
UIViewController *rootViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
}
```
而后，正常执行Xcode项目即可。
## 三、更多混编
更多混编知识，请查看[官网：使用平台通道编写平台特定的代码](https://flutterchina.club/platform-channels/)
> 
## 附：