[Flutter][iOS]混合开发初体验
通常我们面对的需求不是直接用flutter开发一个新app,而是希望在已有的项目中嵌入flutter,开发部分页面,根据开发情况逐渐进行过度.下面介绍一下iOS端如何与Flutter进行混编.
1.工程目录结构
因为是跨平台开发,通常有三个工程:iOS,安卓,flutter.由于本人是iOS开发,所以这里只列举iOS.目录结构如下:
-Flutter_iOS_App
-flutter_app
官方建议我们能将三个项目都放在同级目录中,另外flutter目前不能很好的支持bitcode,所以iOS工程中需要关闭.
2.创建flutter模块
在创建iOS项目后,需要创建对应的flutter模块.
进入到和iOS项目同级目录后,运行命令:
flutter create -t module flutter_app
// 这里有个注意点,官方对于flutter包命名要求是必须小写,并且单词间用 _ 隔开.不然很可能创建失败.
3.配置iOS项目的config文件
总共有如下三个文件:
-Flutter.xcconfig:指向flutter内部的Generated.xcconfig文件,主要是一些基础配置
-Debug.xcconfig:Debug环境配置文件
-Release.xcconfig:Release环境配置文件
Flutter.xcconfig文件内容:
// xxxxxxx用flutter的项目名称代替
#include "../xxxxxxx/.ios/Flutter/Generated.xcconfig"
Debug.xcconfig文件内容:
#include "Flutter.xcconfig"
// 如果使用了Cocoapods，那么需要引入 cocoapods 的config文件,xxxxxxx用iOS工程名代替
#include "Pods/Target Support Files/Pods-xxxxxxx/Pods-xxxxxxx.debug.xcconfig"
Release.xcconfig文件内容:
#include "Flutter.xcconfig"
// 如果使用了Cocoapods，那么需要引入 cocoapods 的config文件,xxxxxxx用iOS工程名代替
#include "Pods/Target Support Files/Pods-xxxxxxx/Pods-xxxxxxx.release.xcconfig"
4.配置config到iOS工程中
如图:
5.设置flutter脚本
在iOS工程内的target中,找到Build Phases 添加flutter执行脚本,会生成一个engine文件夹和app.framework:
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
这段脚本最好放在系统脚本的后面,运行完这段脚本后我们发现生成的两个framework在flutter项目内,所以这时候需要修改一下xcode_backend.sh脚本,让它们在iOS工程内.
找到脚本,注释掉如下代码:
local derived_dir="${SOURCE_ROOT}/Flutter"
# if [[ -e "${project_path}/.ios" ]]; then
# derived_dir="${project_path}/.ios/Flutter"
# fi
RunCommand mkdir -p -- "$derived_dir"
AssertExists "$derived_dir"
6.将生成的文件和framework拖入工程内,
将App.framework 和Flutter.framework添加到Embedded Binaries中.
7.改造Appledegate文件
如下代码:
// .h
#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>
@interface AppDelegate : FlutterAppDelegate <UIApplicationDelegate,FlutterAppLifeCycleProvider>
// .m
@implementation AppDelegate {
FlutterPluginAppLifeCycleDelegate *_lifeCycleDelegate;
}
- (instancetype)init {
if (self = [super init]) {
_lifeCycleDelegate = [[FlutterPluginAppLifeCycleDelegate alloc] init];
}
return self;
}
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
return [_lifeCycleDelegate application:application didFinishLaunchingWithOptions:launchOptions];;
}
// 如果有用到其他生命周期方法,按照上面的示例替换就行了
@end
8.本地跳转进入flutter页面
- (IBAction)push:(id)sender {
FlutterViewController *vc = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
vc.navigationItem.title = @"first flutter app";
[self.navigationController pushViewController:vc animated:YES];
}
此时用vscode打开flutter工程,然后终端cd到flutter工程内,执行:
flutter attach // 等待Xcode运行
运行xcode,成功后点击button,跳转进入flutter界面.
此时进入flutter项目,修改main.dart的title,然后在终端内键盘点击”r”,即可hot reload成功,title已经被成功修改.
好了,到此基本能明白混编是怎么一会儿事儿了,下一篇将要介绍,iOS和Flutter的交互过程.
