欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

为您解码网站建设的点点滴滴

Flutter初探分析

发表日期:2018-12 文章编辑:小灯 浏览次数:3449

最新消息

Flutter在12月5号发布了最新的稳定版本1.0,象征着Flutter新技术提上了征程,期待着他能靠一己之力改变移动端开的格局!
Flutter1.0官方推文

Let’s go

以下为正文,推荐官网APIFlutter,如果觉l得英文看着费劲[Flutter中文网(https://flutterchina.club/),但是其更新速度比官网慢一下,我在写的时候还没有更新到1.0版本。

引言

移动端至少分为3大格局,Android开发,iOS开发和React Native开发。React Native将iOS和Android的开发平台相互融合通过js解释器构建,完成开发一次,两端都能使用的技术方案。但是React Native技术是FaceBook开发的,抛开技术性问题不谈,其开源类型非BSD项目,FaceBook还是对其拥有控制权,所以大公司都摒弃了React native的开发。(具体协议可自行查看)。

简介

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。(除非特别说明,其开源协议是BSD模式)

历程
历程.png
环境构建

(笔者为android开发,只细谈安卓方向)

  • FlutterSDK1.0 、AndroidSDK、jdk8.0、Dart插件
  • Android studio 、IDE、VS Code等任何编辑器


    Android Studio编译.png
构建方式

Flutter与用于构建移动应用程序的其他大多数框架不同,因为Flutter既不使用WebView,也不使用操作系统的原生控件。相反,Flutter使用自己的高性能渲染引擎来绘制界面

Flutter架构层级.png

Flutter中使用轻量的C++构建底层,使用Dart语言开发编译,使用Skia 2D渲染引擎渲染自己的weight控件。

Flutter技术要点
1.widget

简单的可以理解为view,整个Flutter应用都是使用的widget树构建UI,在构建过程中使用不同的widget控间嵌套来实现界面。
1).StatelessWidget
没有状态的组建,StatelessWidget创建一次,永远不会改变其外观,在build中搭建widget树布局。


StatelessWidget.png

2).StatefulWidget
根据收到的数据或yoghurt输入动态更改状态,creatState中创建一个State对象,而其State对象存在生命周期,可以进行setState操作动态更新界面的显示。


StatefulWidget.png

State存在生命周期如下:

state生命周期.png

其中reassemble:是在开发中的热更新才会调用的生命周期,这是与rn不同的地方。

2.实现网络加载

使用http请求,调用dio第三方库获取数据渲染到界面中,使用async await返回Future对象。

3.与原生交互(Android)

Android中:

public class FlutterToNative implements MethodChannel.MethodCallHandler { public static String NAME = "com.kang.economicanalysis/plugin"; private Activity activity;FlutterToNative(Activity activity){ this.activity = activity; }public static void registerWidth(PluginRegistry.Registrar registrar){ MethodChannel channel = new MethodChannel(registrar.messenger(), NAME); FlutterToNative instance = new FlutterToNative(registrar.activity()); //setMethodCallHandler在此通道上接收方法调用的回调 channel.setMethodCallHandler(instance); }@Override public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) { //通过MethodCall可以获取参数和方法名,然后再寻找对应的平台业务,本案例做了2个跳转的业务//接收来自flutter的指令oneAct if (methodCall.method.equals("ToOne123")) {//跳转到指定Activity Intent intent = new Intent(activity, OneActivity.class); activity.startActivity(intent);//返回给flutter的参数 result.success("success"); } //接收来自flutter的指令twoAct else if (methodCall.method.equals("ToOne")) {//解析参数 String text = methodCall.argument("flutter");//带参数跳转到指定Activity Intent intent = new Intent(activity, OneActivity.class); intent.putExtra("flutter", text); activity.startActivity(intent);//返回给flutter的参数 result.success("从原生传回来的参数"); } else { result.notImplemented(); } } } 

在MainActivity中进行调用:

public class MainActivity extends FlutterActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); GeneratedPluginRegistrant.registerWith(this); //交互 FlutterToNative.registerWidth(registrarFor(FlutterToNative.NAME)); } } 

flutter代码中:

//获取到插件与原生的交互通道 static const jumpPlugin = const MethodChannel('com.kang.economicanalysis/plugin'); 
//原生交互传递值,获取返回值SetState更新到UI中 Future<Null> _ToNative() async { Map<String, String> map = { "flutter": "flutter" }; String result = await jumpPlugin.invokeMethod('ToOne', map); setState(() { _data = result; }); } 

这样就结束了!
在Flutter中使用的是通道的方式构建与原声的交互,通道建立完毕后随时调用,随时通信,还可以使用这种方式拓展控件,例如:flutter不支持webview,可以使用Android原生的webview通过addContentView(),添加到Flutter使用。flutter-webview

底层架构对比

React Native使用js语言开发,形式模仿React框架,执行需要js解释器,UI通过原生控件渲染。


React Native.png

Flutter直接使用原生的canvas,在其自带的Skia 2D引擎上渲染UI,不通过间接转换,节省时间


Flutter.png
与React Native对比

1.开发差异:

  • 基于js的ES6开发,遵循react前端框架开发
  • 使用Dart语言开发,纯面向对象开发,使用widget搭建布局

2.友好性:

  • Flutter对Android友好
  • React Native对iOS友好

3.控件影响

  • Flutter控件是由自己定义的,所以其渲染速度十分快速,
  • Flutter的控件在iOS和Android上的效果基本完全一致,而React Native存在将RN控件转换为原生控件的过程,存在一定的差异。
  • 在Android和iOS的控件发生更新后需要将更新同时更新到Flutter的控件中,由于是一家公司,所以Android控件容易更新,然而iOS控件的更新可能较慢。

4.效率:

  • Flutter的渲染UI效率较高,刷新率高,FPS较高。

5.动态化:

  • Flutter目前不支持代码的热更新,但是开发者给出思路(Dart to JS)
  • React Native加载jsbundle文件,目前存在多种热更新方案。

6.App体积:

  • iOSFlutter>React Native (iOS需要额外集成skia引擎,而android自带)
  • Android Flutter<React Native (Android中加入OkHttp导致体积增大)
  • Flutter预览版更新后App体积再次缩小30%

7.平板适配性:

  • Flutter没有对平板进行适配

8.兼容性:

  • Flurrer提供的widget都是基于skia引擎实现和精心定制的,与具体平台没有关系,所以能保持很高的跨OS跨OS Version的兼容性。flutter从更基础的曾磨平了平台的差异,站在更宽广、更可控的一个基础平台上去演变和发展。

9.稳定性:

  • Flutter才出现稳定1.0版本,而RN已经出来3年了,所以React Native的稳定性更好
其他
  • '_'代表私有,可修饰成员和类
  • 使用Router和Navigator实现路由导航(push/pop, eg:pushAndRemoveUtil == SingleTask)
  • 支持动画、手势、暂不支持Echarts
  • 打包形式与原生相同
  • colors 只支持16进制
  • 资源文件需要在配置文件pubspec.yaml中引用方可使用
总结
  • 总体上来说,Flutter的技术比React Native技术更加新颖,性能更好,渲染速度更快,各方面都更加优秀,而且Flutter的开源模式为BSD,也优于React Native。
  • Flutter出来的时间只有1年,所以不是很成熟,稳定性较差,所以如何选择就看你们了!

本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户学习参考,本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容,请及时与我们联系,并提供相关证据,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:http://dengtar.com/18378.html
相关APP开发
 八年  行业经验

多一份参考,总有益处

联系深圳网站公司塔灯网络,免费获得网站建设方案及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:余经理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.