前言

Flutter和iOS支持两种形式的混编，一种是某一些页面全是用flutter去绘制，另外一只是flutter页面作为iOS某个控制器页面的一部分去展示，后面会逐步去介绍这两种方式的实现

本篇文章主要介绍在iOS项目中添加Futter模块

1、如果你还没开始在macOS上搭建Flutter开发环境可以参考官方文档：入门: 在macOS上搭建Flutter开发环境。

2、在flutter和iOS混编过程中我们需要用到Android Studio或者Visual Studio Code 来编写dart相关的代码及第三方库的管理，具体的配置步骤可以参考官方文档： 配置编辑器。

3、如果你对flutter和iOS的区别还不是很了解可以先了解下官方文档 Flutter for iOS 开发者。

一、创建Xcode项目

用Xcode创建一个iOS项目命名为Flutter_iOS

iOS项目.png

然后cd到项目的根目录Flutter_iOS

执行命令 flutter create -t module my_flutter

创建flutter模块.png

二、将 Flutter 模块以 pods 的方式加入到已有项目中

在我们的已有项目 Flutter_iOS 中初始化 pods ，如果你的项目中已初始化过 pods ，请忽略。

cd 项目根目录

pod init

这时我们项目中会多一个 Podfile 文件，我们在该文件最后面添加命令如下：

vim podfile

target 'Flutter_iOS' do

# Uncomment the next line if you're using Swift or would like to use dynamic frameworks

# use_frameworks!

# Pods for Flutter_iOS

end

# 新加命令

flutter_application_path = '../flutter_module'

eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

注意：flutter_application_path 是 Flutter 模块的路径，记得修改为你的模块名称。

添加后保存退出，运行命令

pod install

三、配置 Dart 编译脚本

Xcode->Build Phases ->点击左上角➕号按钮->选择 New Run Script Phase ，添加如下脚本：

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

四、设置BitCode

Flutter 目前还不支持 BitCode,点击将我们项目 BitCode 选项设置为 NO

Xcode->Build Settings ->Build Options->将BitCode 选项设置为 NO

五、添加跳转代码

使用 FlutterViewController

所有的 Flutter 页面公用一个Flutter实例 (FlutterViewController) 。

#import "ViewController.h"

#import

#import

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad

{

[super viewDidLoad];

// Do any additional setup after loading the view.

}

- (IBAction)pushToFlutterVC:(UIButton *)sender

{

FlutterViewController *flutterVC = [[FlutterViewController alloc] init];

[self presentViewController:flutterVC animated:YES completion:nil];

}

@end

六、运行和热更新

项目可以在Android Studio上进行dart相关语言的编写，但是需要使用Xcode运行整个项目的代码

混编后原先的热更新不能用，但是我们可以通过如下方式实现：

首先退出模拟器上运行的项目

cd到flutter_module工程路径，执行

flutter attach

attach成功之后，运行xcode，更新直接press 'r'

在Android Studio中修改dart文件，press 'r'直接可以看到修改之后的显示