Flutter初探分析

2018 12.06

Let's go

以下为正文，推荐官网APIFlutter，如果觉l得英文看着费劲Flutter中文网，但是其更新速度比官网慢一下，我在写的时候还没有更新到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模式）

历程

环境构建

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

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

构建方式

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

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

Flutter技术要点

1.widget

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

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

State存在生命周期如下：

其中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通过原生控件渲染。

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

与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体积：

iOS Flutter>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年，所以不是很成熟，稳定性较差，所以如何选择就看你们了！

最新消息