flutter原生感受,flutter需要会原生么

回到前台黑屏引发对Flutter项目生命周期与安卓原生生命周期的思考

目前我们是flutter项目,有个需求是需要在app内引导用户去appStore或是安卓的应用商店去评价,该需求我选用了两个插件 in_app_review 和 launch_review , 然而仔做的过程中发现一个问题,当弹出系统的跳转应用商店的弹框时,iOS是单一弹框,Android是弹出一个选择打开商店的弹窗,可选择打开一次或是始终选择某一个商店打开,此时锁屏,然后再解锁,发现iOS没啥问题,安卓系统弹框后的flutter页面黑屏了

创新互联是一家专业提供青铜峡企业网站建设,专注与成都网站建设、成都网站设计、html5、小程序制作等业务。10年已为青铜峡众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

看到这个现象,目测是由于安卓的生命周期和flutter的生命周期没有同步,以下是验证过程

安卓的MainActivity添加生命周期方法

flutter 添加生命周期方法

还是刚才的场景 锁屏 安卓和flutter的后台方法都调用,解锁回到前台 只有安卓的前台方法走 MainActivity会restart,flutter的resume方法,没有调用,验证了开始的猜想,是由于flutter没有检测到前台操作或是这种情况flutter不认为自己在前台,导致flutter没有执行页面的重新绘制导致黑屏

关于flutter的生命周期,查阅资料发现 我们可以手动刷新flutter页面的状态,即使用

我们只需要在MainActivity restart的时候调用上述 方法 告知flutter重绘,该问题就解决了

关于原生加载flutter页面 生命周期相关 看这里 能有一些启发

Android原生和Flutter使用过程的差异对比（二）

1、常用布局的对比

使用下来其他组件大致还算方便，但是相对布局而言使用便利程度上Android原生完胜，ConstraintLayout内部的所有子View可以设置互相之间的位置依赖关系。

而Flutter的Stack组件内部的Children只能通过外层包裹 Align后 固定位置，比如 Alignment.topLeft、Alignment.bottomRight 等。遇到复杂的堆叠布局需要通过外层包裹 Positioned 组件后设置固定的 top 和 left 距离以达到效果，内部子组件之间无法设置位置关联关系。

2、一些常用属性设置上的差异：

Margin外边距

Android：直接在布局文件对View设置android:layout_marginStart、android:layout_marginTop

Flutter：需嵌套 Container 组件并在内部设置具体的 margin 值

Padding内边距

Android：TextView、ImageView、各种Layout都可以直接在属性上设置android:paddingStart

Flutter：需嵌套 Padding 组件并在内部设置具体的值

组件的可见性

Android：每个view都可以通过setVisibility来设置可见、隐藏或者隐藏但占位

Flutter：没有单独设置组件是否显示的api，只能通过 bool 值控制是否添加该组件

事件监听

Android：常规的setOnClickListener和setOnLongClickListener设置单击和长按事件

Flutter：在需要添加事件监听的组件外层嵌套 InkWell 或 GestureDetector 并设置 onTap 等

3、生命周期

Android：

Activity和Fragment各自有完整的生命周期链路onCreate、onStart、onResume、onPause、onDestroy等

Flutter：

万物皆组件，组件继承 WidgetsBindingObserver 并重写 didChangeAppLifecycleState 函数进行监听

退回桌面依次执行inactive 》= paused，此时界面不可见用户不可操作，从桌面重新进入app执行resumed，状态较少如需在某些条件下触发特定操作可能要找别的方案，比如发通知之类的

Flutter与原生通信概述

flutter与原生通信主要有三种方式：MethodChannel、EventChannel、BasicMessageChannel，这三种方式均各有适用的场景：MethodChannel用于native与flutter的方法调用，EventChannel用于native单向的向flutter发送广播消息，BasicMessageChannel用于native与flutter之间的消息互发。

MethodChannel用于双方之间的方法互调，使用步骤是：

1.创建一个MethodChannel对象，传入MethodChannel名称。

2.使用setMethodHandle对对方调用自己的方法进行监听，通过回调中的MethodCall对象方法名判断、获取方法参数，并且返回调用结果。

3.使用invokeMethod来调用对方的方法，可传入方法名，方法参数，以及监听对方的回调结果。

以下是示例：

需要注意的是，MethodChannel的名称需要双方保持一致，否则就不是同一个MethodChannel了。另外这里的方法调用并不是像Java里面反射那样去先找到class示例对象再解析到相应的方法，而是将双方互发的消息包装成了MethodCall对象，拿到这个对象后通过MethodCall里面的方法名去判断要做什么操作，并不是直接就调用了自身（native或flutter）相对应的方法。具体要做什么操作、调用什么方法还是得自己去调用和实现。

EventChannel适用于native向flutter发送广播消息，只是单向的消息发送，native发，flutter收，返过来flutter并不能向native发送消息。例如native可将定位数据不断的报给flutter，或者录像数据等等，所有基于原生能力产生的数据都可以通过EventChannel进行发送。

步骤：

1.创建一个EventChannel对象，传入EventChannel名称。

2.flutter端调用receiveBroadcastStream进行广播消息注册，传入arguments参数即为广播名称，此参数是告诉native端你要接受的广播类型，判别是什么广播发送的数据。

2.native调用setStreamHandler方法进行广播消息监听，onListen回调里会有一个arguments参数，这里及为flutter注册的广播类型，若flutter端没有注册，则native端不会收到这个回调，也就无法进行消息发送。收到flutter端的广播注册后，根据arguments可判断广播类型，然后根据EventChannel.EventSink来进行消息发送，EventSink.success()即可将消息发送给flutter端。

3.flutter进行广播注册会返回一个streamSubscription类型的对象，该对象可以进行消息的停止，native可在onCancel回调里面收到。

示例如下：

BasicMessageChannel就是比较常用的消息互发，使用步骤如下：

1.创建BasicMessageChannel对象，传入BasicMessageChannel名称。还需传入编解码方式（可以自己实现），系统提供了一些列的编解码方式，后续会介绍到。

2.使用setMessageHandler方法进行消息监听，也可进行回复。

3.使用send方法进行消息发送。

无论哪种方式的消息传递，最终都是将自定义数据转化为二进制数据进行传递，flutter提供的编解码方式分为MethodCodec和MessageCodec两种，EventChannel和MethodChannel使用的就是MethodCodec，BasicMessageChannel使用的是MessageCodec。MethodCodec其实就是在MessageCodec的基础上将数据包装了一下，使其转化为MethodCall对象方便使用。

MethodCodec源码：

MethodCodec提供了两种方式：JSONMethodCodec和StandardMethodCodec，前一种就是JSON和MethodCall对象之间的互转，后一种则是根据传入的数据基本类型（String，Integer等）来进行互转。

MessageCodec则提供了四种方式，如下图，具体就不详细讲述了，看看名字就知道是怎么回事，可以直接去看源码。最常用和默认的就是StandardMessageCodec方式。

从上面的使用方式可以看出，每一种Channel在创建的时候都需要传递一个BinaryMessenger，这个接口可以在FlutterEngine里面拿到，因此需要在FlutterActivity里面实现configFlutterEngine方法里面重写这个方法。FlutterActivity在attach FlutterEngine之后就会调用这个configFlutterEngine方法，通过flutterEngine.getPlugins().add(FlutterPlugin)方法可以FlutterPlugin的回调方法里进行数据的初始化和销毁工作。如下图

这个回调方法里的FlutterPluginBinding提供了一些我们可能会用到的对象，如下：

Flutter开发App和原生iOS开发App各有什么优缺点？

自己写flutter也有段时间了,这次来聊聊flutter开发App和原生iOS开发App各有什么优缺点.

不废话,直奔主题????

为什么Flutter开发APP性能最接近原生，前端程序员请关注

Flutter是谷歌公司推出的跨终端的开发框架，支持Android、iOS和WEB终端。1.0版在2018年12月5日发布，目前的最新版本是1.5，它采用的开发语言是Dart，Dart也是谷歌开发的计算机编程语言，语法类似C，是编译型语言：

hello world例子，打印字符串“Hello World!”：

1、没有桥接层

React Native、Weex等技术都是跨终端的框架，然而性能跟原生App存在很大差距。这是由于它们的工作原理决定的：

React Native、Weex等技术多了一个桥接层，所以界面渲染会慢一些，由于UI渲染非常频繁，想要不卡顿，基本上比较难，性能和用户体验跟原生代码有差距。而这恰恰是Flutter的优势所在：

Dart可以被编译成不同平台的本地代码，让Flutter不通过桥接层直接跟平台通信，自然性能会快一些。

2、编译执行

JavaScript是解释执行的，Dart是编译执行的，性能谁好一目了然。

3、Flutter Engine虚拟机

Flutter是依靠Flutter Engine虚拟机在iOS和Android上运行的，Flutter Engine使用C/C++编写，开发人员通过Flutter框架直接和API在内部进行交互，所以具有输入低延迟和UI渲染高帧速率的特点。除了这特点之外，Flutter还提供了自己的小部件，Flutter小部件是使用从React获取灵感的现代框架构建的。 中心思想是您使用小部件构建UI。

窗口小部件根据其当前配置和状态描述了它们的视图。 当窗口小部件的状态发生更改时，窗口小部件会重建其描述，框架将根据前面的描述进行区分，以确定底层呈现树从一个状态转换到下一个状态所需的最小更改。可以直接在OS平台提供的画布上进行描绘，也就是一些核心类库直接放到虚拟机里面，调用起来更快。

从它的系统结构可以看出，类似安卓的ART(Android Run Time)虚拟机，同样采用AOT(Ahead of TIme)技术，会在APP安装时就编译成机器语言，不再解释执行，从而优化了APP运行的性能。

4、自带渲染引擎

Flutter使用谷歌自己的Skia渲染引擎，而Android系统自带Skia引擎，iOS平台上Flutter也会把Skia引擎打包到APP中，从而实现了高效渲染。而React Native通过桥接层访问原生UI，操作频繁就容易出性能问题。

综合所述，Flutter 是性能最接近原生代码 的一种开发框架，未来也会是构建谷歌Fuchsia应用的主要方式，前途不可限量，唯一的问题就是需要学习一门新的语言：Dart，而有Java或者C#语言基础的程序员会比较容易学习。