背景:
随着当下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轮子成熟的优势。
网友评论