最新消息

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://www.dengtar.com/18378.html