flutter与原生混编(iOS)

一、创建项目及配置
1,创建ios项目,同时在同一个根目录下创建flutter项目
flutter项目使用命令flutter create -t module xxxflutter项目名
如图


工程目录.png

2,将flutter项目以pod的形式加入ios项目
2.1,如果项目之前没有用过pod,则pod init创建podfile
如果使用过,直接进行步骤2.2。
2.2,podfile中添加

flutter_application_path = '../xxxflutter项目名'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

flutter_application_path是flutter项目的路径
2.3,target中加入(一次性将flutter的编译产物由此依赖进入iOS项目中,可跳过步骤3)

install_all_flutter_pods(flutter_application_path)

3,配置脚本(已完成步骤2.3可进行步骤4)
打开ios项目,在Build Phases中左上角添加Run Script


添加Run Script.png

Run Script内容.png
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed 

4,设置bitcode
Flutter 目前还不支持 BitCode,需要设置为No


图片.png

二、混编使以后添加的每个模块都以package形式,在module中pubspec.yaml文件中引用(基于内存消耗考虑)
1,页面跳转
原生处理:
flutter在iOS中的使用,主要是以FlutterViewController为载体,并在其内部采用FlutterEngine对视图进行渲染。
导入头文件:

#import <Flutter/Flutter.h>
初始化FlutterEngine:
FlutterEngine *engine = [[FlutterEngine alloc] initWithName:@"xxx"];//xxx是唯一标识
if ([engine run]) {
    self.flutterEngine = engine;
}
初始化flutter控制器
_flutterVC = [[FlutterViewController alloc] initWithEngine:self.flutterEngine nibName:nil bundle:nil];
跳转
//“channelA”与flutter定义的名字保持一致
FlutterMethodChannel *methodChannel = [FlutterMethodChannel methodChannelWithName:@"channelA" binaryMessenger:self.flutterVC];
//使用指定的参数调用指定的Flutter方法,“methodA”与flutter定义的名字保持一致
[methodChannel invokeMethod:@"methodA" arguments:nil];
根据flutter定义的方法名做相应的操作:在flutter页面点击按钮跳转至原生页面
[methodChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
    if ([call.method isEqualToString:@"next"]) { //”next“为flutter定义的方法
        NativeViewController *vc = [[NativeViewController alloc] init];
        [self.navigationController pushViewController:vc animated:YES];
    }
}];
[self.navigationController pushViewController:self.flutterVC animated:YES]; //跳转至flutter页面

flutter处理:
在module项目的main里

导入头文件
import 'package:flutter/services.dart';

定义channel,名字与原生保持一致

final MethodChannel _channelA = MethodChannel("methodA");
在init方法里添加在该channel上接收方法的回调
此处_pageIndex用来处理显示flutter哪个页面
_channelOne.setMethodCallHandler((call) {
  setState(() {
    _pageIndex = call.method;
  });
  return null;
});
flutter页面点击按钮跳转至原生页面
onTap: () {
  MethodChannel(“channelA”).invokeMethod(“next”); 
  //channel名字和method名字需与原生保持一致
}

2,数据传递
二者之间的数据传递iOS使用FlutterBasicMessageChannel类,flutter使用BasicMessageChannel类,用法与MethodChannel类似
原生处理:

初始化channel
self.msgChannel = [FlutterBasicMessageChannel messageChannelWithName:@“messageChannel" binaryMessenger:self.flutterVC];//同样 channel名字与flutter保持一致

接收数据:

处理接收到的flutter数据
[self.msgChannel setMessageHandler:^(id  _Nullable message, FlutterReply  _Nonnull callback) {
    NSLog(@"收到了来自flutter的消息:%@",message);
}];

发送数据:

在需要向flutter发送数据的地方调用
[self.msgChannel sendMessage:message];

flutter处理:

首先依然是导入头文件
import 'package:flutter/services.dart';

初始化channel,channel名字与原生保持一致
final BasicMessageChannel _msgChannel =
 BasicMessageChannel("messageChannel", StandardMessageCodec());
接收数据:
在init方法里添加在该channel上接收方法的回调
_msgChannel.setMessageHandler((message) {
  print("收到了来之iOS的消息:$message");
  return null;
});
发送数据:在需要的地方之间调用send方法即可
_msgChannel.send(message);

问题:


问题.png

网上搜的方法,在podfile最前边加eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)句话
执行pod install失败

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

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

target 'iosfix' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for iosfix
  install_all_flutter_pods(flutter_application_path)

  target 'iosfixTests' do
    inherit! :search_paths
    # Pods for testing
    install_all_flutter_pods(flutter_application_path)
  end

  target 'iosfixUITests' do
    # Pods for testing
    install_all_flutter_pods(flutter_application_path)
  end

end

于是又搜了下别的文章,添加的第二句话为load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb'),试了下成功了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354

推荐阅读更多精彩内容