flutter语言已经发布2年多的时间了,现在flutter版本也已经比较稳定,据笔者了解,很多公司已经开始尝试使用flutter进行项目开发,比如大家熟悉的闲鱼。flutter由于跨端、原生的体验、简洁的dart语言编写、丰富的flutter组件等优势,我们公司也有app开始采用flutter开发。当项目早期功能比较少的情况,我们采用的纯flutter开发,随着项目的进展,功能的丰富,包括第三方SDK的接入,比如推送、分享、地图等等,由于有些三方还不支持flutter语言的集成等原因,我们就需要转变为原生与flutter混编的模式。那么要进行混编,第一步就是进行iOS原生与flutter混编环境的配置,下面简要的说一下环境配置的步骤:
一、创建flutter项目模块:
利用终端命令行先进入iOS项目目录下:
cd /Users/Dustin/Desktop/pms-ios
利用终端命令行创建flutter模块:(flutter_module自己命名的,记得字母都要小写,不然会报错)
flutter create -t module flutter_module
如下示图1:
二、Pod引入flutter模块:
1、如果项目中没有用到cocoaPods,先初始化pod,终端运行命令:
pod init
查看项目目录中会多一个 Podfile 文件,我们在该文件最后面添加命令如下:
target 'AizhizuPartner' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!
# Pods for AizhizuPartner
end
flutter_application_path = 'flutter_module'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
#其中flutter_application_path为flutter模块相对于podfile文件的位置。
2、添加好后,终端运行命令:
pod install
三、项目中配置 Dart 编译脚本
在iOS项目Build Phases 选项中,点击左上角➕号按钮,选择 New Run Script Phase ,Run Script下添加如下脚本:
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
如下示图2所示:
四、项目中使用FlutterViewController,尝试原生和flutter交互
如下代码所示:
- (IBAction)jumpToFlutter:(UIButton *)sender {
[self.navigationController pushViewController:self.flutterVC animated:YES];
}
- (FlutterViewController *)flutterVC{
if (!_flutterVC) {
_flutterVC = [[FlutterViewController alloc] init];
UIView *splashView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight)];
splashView.backgroundColor = [UIColor whiteColor];
_flutterVC.splashScreenView = splashView;//flutter渲染是异步的,如果是第一次渲染,并且没有设置splashScreenView,则默认加载启动页图片
}
return _flutterVC;
}
五、需要注意的:
需要注意的是iOS原生跳转flutter时,第一次跳转会异步渲染flutter环境,因此,FlutterViewController实例有个splashScreenView属性,防止用户在打开flutter页面时会有一个中间的空档,如果我们没有设置此属性,iOS默认将app应用的LaunchStoryboard设置为此属性的值,默认可能设置成功也可能设置失败,取决于你APP的启动图片是否是用LaunchStoryboard来设置的,所以,没有特殊情况,最好手动设置一下此属性;另外,混编最好将FlutterViewController的实例对象设置为单例,以避免用户跳转flutter页面多次异步初始化flutter环境。