189 8069 5689

flutter原生,flutter原生webview交互

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

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

创新互联主要从事成都网站建设、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务富县,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

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#语言基础的程序员会比较容易学习。

flutter跳转原生页面后的穿透问题

现象:

flutter页面通过present跳转原生页面后,原生页面上的点击会首先响应下面的flutter页面中的内容(比如按钮什么的)。

这是flutter框架一直存在的一个bug。在github上有相关的issue。

原因推测:

推测是flutter对控制器(或者view)加了分类,重写了控制器的点击事件,用来计算是否在对应的点击位置有flutter响应事件。没有的话再扔出去点击事件。

解决方案1:

在原生控制器中,加入点击事件的几个方法的空实现,用以覆盖flutter框架中的实现:

-(void)touchesBegan:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesMoved:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesCancelled:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesEnded:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

让事件不被flutter截获即可。

解决方案2:

直接切换window的根控制器到原生控制器即可。别忘暂时保存flutter控制器。

在返回时再切换回flutter中。

解决方案3:

在flutter跳转到原生页面之前,在flutter中加上一个蒙层,用来隔绝手势往flutter下面的view传递。原生页面返回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原生webview交互
本文URL:http://cdxtjz.cn/article/dsgejss.html

其他资讯