flutter学习3—flutter与iOS混合开发
2022-05-26 本文已影响0人
钢板军
前言
你已经有了iOS工程，想集成flutter模块到现有工程实现混合开发
一、现有工程集成flutter模块方式
一共有2种方式：
1、Frameworks方式集成
2、CocoaPods集成(可以热重载，推荐使用)
二、Frameworks集成方式
假如你的现有iOS工程是"FlutteriOSDemo"，flutter工程是“flutterdemo”
在iOS工程目录下新建一个文件夹，我这里命名为“Flutter”，如图：
image.png
cd到flutter工程，执行命令如下：
flutter build ios-framework --output=/Users/mybook/Desktop/FlutterNativeDemo/FlutteriOSDemo/Flutter
/Users/mybook/Desktop/FlutterNativeDemo/FlutteriOSDemo/Flutter 这个为iOS工程里“Flutter”文件夹路径
此命令会将flutter工程打包为framework，存放在“Flutter”文件夹中，生成三种环境的framework，如图：
image.png
每个文件夹下有两个framework，如图：
image.png
打开iOS工程，选择一种环境的framework拖到工程的Link Binary With Libraries下：
注意：Embed选择Embed & Sign
image.png
至此，flutter就集成到了iOS工程中了，你可以到AppDelegate.h引入flutter库，就可以开发了
image.png
注意⚠️：
三、CocoaPods集成
你需要准备好iOS工程和flutter module工程，并且它们在同一文件夹下。
小编这里现有iOS工程是"IOSAppDemo"，flutter module工程是“fluttermodule”。
注意⚠️：
如何创建flutter module
1、命令行方式
cd你想要存放flutter module的文件夹下(与iOS工程是同一个目录)
$ flutter create --template module fluttermodule
2、vs code创建方式
第一步：
用vs code打开命令面板（快捷键shift + command + P），输入Flutter: New Peoject
image.png
第二步：
选择Module，然后输入名称即可
image.png
在iOS工程Podfile里添加配置
如果你的iOS工程还没有创建Podflile，cd到你的iOS工程，执行以下命令:
$ vim Podfile
然后添加如下代码:
flutter_application_path = '../fluttermodule'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
target "IOSAppDemo" do
use_frameworks!
install_all_flutter_pods(flutter_application_path)
end
post_install do |installer|
flutter_post_install(installer) if defined?(flutter_post_install)
end
最后pod install
实现热重载：
第一步：
将iOS工程运行起来
第二步：
vs code控制面板输入：Debug：Attach to Flutter on Device
image.png
