阅读 692

Flutter初探分析

2018 12.06

最新消息

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

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模式)

历程

历程.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体积:

  • 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年,所以不是很成熟,稳定性较差,所以如何选择就看你们了!
关注下面的标签,发现更多相似文章
评论