IOS native 嵌入Flutter模块之简单使用

背景:

 随着当下Flutter技术越来越成熟以及原生开发技术基本上已经碰到了技术壁垒,更多的中小公司越来越偏向使用Flutter来进行编程来节省成本。而中大型公司也可以在现有的app中使用flutter进行相应模块的编程。。。。。。。。

在现实的开发场景中,绝大多数中大型公司或者已经有一些技术沉淀的公司基本上都有了原生app (java/object-c)的项目。而且在经过前几年互联网内卷的高度热度下,各种成熟的轮子已经制造出来,所以说现在基本上不太可能抛弃原来的各种技术沉淀而从新开始新的研发。那么在项目中,如果想使用到flutter的技术,混合编译就成了我们必须要了解的内容。今天就在项目中套入了一个简单的flutter模块来讲解一下如何在原生的ios项目中添加flutter模块。并进行简单的通讯,同时给出了一个简单的架构思想,在今后的项目开发中,如何从当下琳琅满目的技术站中挑选合适当前公司的技术手段。



本篇讲解代码实现的功能是:在原生的app项目中的tabbar中添加一个flutter的模块,并且这个模块可以跳换到原生的ViewController (类似于原来的reactNative)实现功能跳转,并且可以在native端进行刷新数据并且通知flutter模块进行数据通信。首先看一下效果图:


flutter模块


native模块


向flutter发消息更新数据

项目中的人才模块是使用flutter语言来进行编写的,但是人才模块的数据是在原生端获取的(这里一会我会解释为什么放在原生端)。在点击flutter页面之后会跳转到原生的个人信息页面,在个人信息页面可以编辑个人信息,之后可以对当前人才进行删除,然后返回flutter并且刷新相应的数据。


代码方面这里没有很难的地方,我只贴主要代码:

首先我们这个人才模块是一个ViewController它继承自FlutterViewController同时需要支持代理<FlutterStreamHandler,FlutterBinaryMessenger>这些代理主要是进行native and flutter交互用的。 

Flutter模块调用native

Flutter向native发出信号是通过FlutterMethodChannel这个类,这个类可以建立一个单向通道,用户flutter向原生发送消息。其call.argument就是传过来的参数,这个通道的传递原理是通过二进制流进行传递的(看协议也可以看出来FlutterBinaryMessenger)

建立通信通道

下面是flutter端发送消息至native的代码

//flutter调用原生

static const methodChannel =MethodChannel('com.flutterToNative');

methodChannel.invokeMethod('backToNative',{"type":"push"});



Native调用Flutter

Native调用Flutter主要是通过FlutterEventSink这个类,建立通信通道,然后通过block传入我们想要传递给Flutter的参数。

在建立好events之后,我们可以在需要的地方直接调用self.eventSink(你要发送的数据) 给Flutter端,而在Flutter端只需要进行相应的接受就可以了。下面是Flutter端接受的相关代码。

//原生调用flutter的通道

//注意这里的com.nativeToFlutter一定要与原生的名称相同,不然没办法通信

static const eventChannel =EventChannel('com.nativeToFlutter');

@override

void initState() {

// TODO: implement initState

  super.initState();

//监听接收消息

  eventChannel.receiveBroadcastStream().listen(_getData,onError: _getError);

//注意这个_getData 就是接受消息并处理的方法

}

data中放置的就是eventsSink传送过来的数据,这些数据都遵循binary协议,也就是说这些通信信道中传递的数据都是binary流。


以上把flutter和native双向通信的dart和object-c代码都贴出来了, 如果是swift和安卓基本上也大差不差api调用一下即可。 下面说亮点自己使用时候觉得需要注意的地方。

1.首先说一下数据源,为什么我的数据源写在原生端,flutter端不行吗?

其一,如果了解过flutter渲染原理的朋友都知道flutter其实也是通过skia引擎通过编译成硬件识别的代码的。而ios加载flutter模块的时候是以一个bundle的方式引进的,这就导致了一个问题。flutter在和native混编的时候在启动native代码时候是没有办法热重载的,每一次加载flutter代码都需要打一次包,如果把数据源放到flutter端那么每一次就需要启动两次代码,改起来比较麻烦。

其二,虽然说flutter是统一了多端,但是最终的终端还是落地在各个操作系统上的。那么每个端在处理网络请求或者一些nativeapi的时候肯定有细微差别,例如ios 和andriod的白名单,推送时候andriod和ios的数据格式不同,都难免要在各端做单读的处理。所以对于native加入flutter模块这种方法,把数据写在原生端进行数据和模块分离是一个稳妥也是不容易出问题的方法。

2.什么样的模块适合做flutter呢?

站在开发效率最大化的角度我来谈一下我的看法,在以往沉重的组件化开发中,我们通常会遇到这一类问题,例如基础库A和基础库B引用了同一个第三方库,但是他们引用的版本不同,所以在上层封装的时候往往会报错误,让我们进行A库和B库对第三方C库的依赖版本统一,才能继续进行编程。

那么在flutter编程中也有同样的道理,众所周知,flutter是有自己的skia渲染引擎的,它可以通过自己的意愿去渲染出不同的UI,这些UI和IOS和安卓的baseFrameWork是没有冲突的,但是如果我们在flutter中引用了一些相关的插件涉及到native的第三方库,并且这些插件我们在原生中也引用到那么就有可能引起不必要的麻烦。

所以我的建议是:在编程中,一些不依赖于native插件的模块可以统一出来用纯flutter语言进行编写,例如新闻列表页,二级展示页,或者电商的商品展示页面,或者一些复杂的UI界面,可以通过dart优秀的编程模式替代原生繁琐的代码来大大节省时间和用功成本,提高人效。


3.我理想的设计模式、代码架构?

在当今注重人效的大背景下,如何发挥出一个公司员工的最大潜能,提升用功效率已经成为一个不可避免的问题。那么如何提升效率我给出自己的一点想法。

根据实际的开发经验,如果一个公司同时具备ios andriod flutter的开发能力,那么可以通过模块化/组件化的思想来进行混合开发,提高代码的复用效率。

 用native套一个壳子,里面的主模块都用flutter搭建(例如类新闻类的app 一二级页面完全可以用flutter做),具体的落地功能都由native模块实现,这样既可以节省大量的开发成本也可以充分发挥当下native轮子成熟的优势。


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

推荐阅读更多精彩内容