本文主要作为混合的基础理解和应用。

1.创建项目Flutter Module;可以显示隐藏文件(Mac是command+shift+.),展开看到.ios目录结构

frc 15bdcd4496aaa61c4a114739b9a5ddf9 - 使用flutter_boost实现iOS / Flutter 混合开发
Flutter Module初始目录结构

2.flutter项目引入库flutter_boost Git地址

frc 78004863222af4cbf25e7e9fe80f7584 - 使用flutter_boost实现iOS / Flutter 混合开发
flutter_boost

2.1.将已有项目导入到.ios同级目录,.ios是隐藏文件,为什么放这只是因为路径简单而已

frc ad9be03658c31ebb438016426851f10e - 使用flutter_boost实现iOS / Flutter 混合开发
已有ios项目建议目录结构

3.关键:iOS运行flutter,可以理解为引入一个三方的sdk,只是这个sdk是flutter提供的,那就需要我们把sdk配置到我们的项目中。

模拟真正的项目,我的测试项目里面有一个自己建的库LXCategory;

在第一张目录结构里面找到这个文件Generated.xcconfig,这里面包含了一些宏,告诉了我们flutter的一些配置,我们可以找到一个Config的文件夹,里面有三个配置文件,拷贝进iOS项目中。

frc 11d3620671040e3f7619c6f8d40ab9dd - 使用flutter_boost实现iOS / Flutter 混合开发
Config配置文件

我们以Debug.xcconfig为例看一下里面有什么:里面包含了Flutter.xcconfig和一个Pods-xxx.debug.xcconfig(这个就是图中可以找到的Pods库的配置文件,左下;所以将其改成跟项目中一致)

frc a78726629da3bdc901d4aa99f9ea922f - 使用flutter_boost实现iOS / Flutter 混合开发
示例Debug.xcconfig

frc fb345f98a2b3840de451501648bde375 - 使用flutter_boost实现iOS / Flutter 混合开发

Flutter.xcconfig里面只有两行代码,第一行就是引用了Generated.xcconfig,当然就是为了拿到这些配置,第二行将bitcode属性设置成NO。这个目录是拷贝过来的,路径肯定是错的,改一下路径:#include “../.ios/Flutter/Generated.xcconfig”

上面操作就是为了引用Generated.xcconfig,可以在xcode创建配置文件操作。(当然也可以看下这个配置里面的东西然后自己写一个配置到项目中)

现在配置一下引用路径,其实做了这些只是拿到了这些路径并配置:

frc 5d5009a45613b5acf0573163804f1201 - 使用flutter_boost实现iOS / Flutter 混合开发
配置引用宏路径

这时候我们去Build Phases -> + New Run Script Phase,然后添加

/bin/sh “$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh” build

执行Flutter库下的脚本 xcode-backend.sh。

运行一下项目,再看一下目录结构:多了两个framework:App.framework就是我们的flutter项目执行出来的东西,相当于里面运行起来就是我们的flutter项目,flutter项目代码产物;Flutter.framework是我们的flutter库。

frc 1198c06d42fa6e6025a58157461c4819 - 使用flutter_boost实现iOS / Flutter 混合开发
执行Flutter库下的脚本 xcode-backend.sh之后目录结构

上面的步骤已经实现绑定关系了,但是对于flutter项目引用库还不够,下面是flutter_boost操作;

4.运行flutter项目,可以看到.symlinks目录下链接的库,这是在iOS项目中要用到的

frc 950281f68832857ace19a34e63237511 - 使用flutter_boost实现iOS / Flutter 混合开发
flutter项目引用库至iOS路径

最简便的操作是拷贝.ios路径下的Podfile里面的代码,放到iOS项目中的Podfile里面去(拷代码要改路径)。但是不知道有没有人跟我一样执行后出错了,那么就按路径引入吧。

不拷代码,就相当于没有执行podhelper.rb。这时候我们还要多引入两个库支持Flutter和FlutterPluginRegistrant。

flutter_boost 还要求add libc++ into “Linked Frameworks and Libraries”。

frc 946b163abd91dbf3cd1564654973f2d3 - 使用flutter_boost实现iOS / Flutter 混合开发
引入flutter支持的iOS本地库

!!注意!!:#use_frameworks!//注释掉,导致不能生成pods headers

第四步目的:导入关联库。

5.接下来就是运行了,pod install 之后。库和头文件都能使用运用了。这时候要把App.framework拖进iOS项目中来,再打开Build Phases -> + New Copy Files Phase,选择Frameworks,添加App.framework。(这样就要去每次flutter项目写完之后,打开iOS项目运行,再拷贝App.framework过来使用运行,让我想到了另一个操作:在flutter项目同级目录下建立podspec,将App.framework模拟成本地库去使用,就变成每次运行,pod,再运行,可能说法上没什么区别,但是项目管理上会好很多,见下)

5+.今天试了一下建立podspec,证明是可以的。今天拿的是一个很早以前玩的项目,也就是是真的一个flutter正式项目和一个iOS正式项目。

frc 791af6d7b0ad2bafc2d49b3dfbab5e87 - 使用flutter_boost实现iOS / Flutter 混合开发
podspec示例1
frc 6ee85f11a0dec6fd88faa6cc0700c299 - 使用flutter_boost实现iOS / Flutter 混合开发
App.podspec
frc e9b125f154d3d0647bb267efa9dc662e - 使用flutter_boost实现iOS / Flutter 混合开发
podspec示例2

5+的步骤可以完全替代5,使用本地库的方法引入资源;

6.正式项目中,在flutter正式项目中因为没有podhelper.rb,但是第4步可以不用那么复杂,可以直接从ios中的Podfile拷贝代码过来用,反正都是引入关联库而已,不过要注意路径!正式项目中还缺少第四步中的一个东西FlutterPluginRegistrant,这是绑定关联库的联系文件,同样看上图(图:podspec示例2),我对它也建立了一个podspec。本地podspec里面的内容的只有那么一两行是有用的,所以其他随便写。

frc 4a2670f3918345464bf882b1afd797b9 - 使用flutter_boost实现iOS / Flutter 混合开发
GeneratedPluginRegistrant.podspec

完整flutter项目:Flutter下的rss_readneed

完整ios项目:readneed

上面的关联关系是FlutterSome和RssReadNeed在同一级目录(主要就是涉及到一些路径问题,相对路径)

frc 00eaa0fc4dba484184e699ea6f2e2cc7 - 使用flutter_boost实现iOS / Flutter 混合开发

注意事项:

a.Flutter的库的路径在Generated.xcconfig里面,这个按本机的来配;默认创建Flutter项目时这个就是对的,当然前提是电脑里面要有库;

b.导入config路径配置上,执行Flutter库下的脚本 xcode-backend.sh,核心;

c.导入关联库,特别是Flutter和FlutterPluginRegistrant必须要有,核心;千万不要使用use_frameworks!

d.产物App.framework必须进入项目中,可以建立podspec引入。如果是手动需要添加:Build Phases -> + New Copy Files Phase,选择Frameworks,添加App.framework。

使用flutter_boost实现iOS / Flutter 混合开发