[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的交互过程.