Flutter简介

作者: Flutter编程指南 | 来源:发表于2018-10-23 19:53 被阅读48次

    前言

    随着移动开发技术的日渐成熟,一些厂商开始考虑跨平台技术的解决方案,从早期的Cordova、Xamarin,再到后来的React Native和Weex等等,可谓是百家齐放,每种框架都有各自的优缺点,但目标都是一致的,就是提升应用的开发效率,降低研发成本,一套代码运行多个平台。这些框架除了Xamarin外都是采用Web端技术开发移动端应用,但提供比Web更好的用户体验。

    以上框架中Cordova其实是一个Webapp框架,提供了针对iOS、Android、WP、BlackBerry等不同系统最常用的Native API调用能力,其本质还是由webkit做UI渲染,因此其性能和原生相比还有很大差距;而Xamarin笔者了解不多,又是个收费的项目,不再做扩展,有兴趣的可自行了解;React Native和Weex原理基本一样,都是基于js的开发框架,React Native基于React.js,Weex基于Vue.js,其本质都是通过虚拟DOM驱动原生组件的渲染,因此性能和体验比较接近原生,然而其需要通过桥接器来驱动原生渲染的过程,导致其在性能上与原生还是有一定差距。基于以上框架的缺点,Flutter框架应运而生。

    Flutter面世

    Flutter是Google在2015年推出的移动UI框架,可快速在iOS和Android上构建高质量的原生用户界面。

    Flutter第一次亮相于2015年5月Dart开发者峰会上,初始名字叫做“Sky”,后更名为Flutter,Flutter使用Dart语言开发,Dart是Google于2011年推出的新的计算机编程语言。

    Flutter特点

    • 快速开发

    由于Flutter选用了Dart作为其开发语言,Dart既可以是AOT(Ahead Of Time)编译,也可以是JIT(Just In Time)编译,其JIT编译的特性使Flutter在开发阶段可以达到亚秒级有状态热重载,从而大大提升了开发效率。

    • 性能优越

    使用自带的高性能渲染引擎(Skia)进行自绘,渲染速度和用户体验堪比原生。

    • 富有表现力的精美UI

    Flutter内置众多精美的Material Design和Cupertino(iOS风格)小部件,开发者可快速构建精美的用户界面,以提供更好的用户体验。

    Flutter框架

    Flutter系统架构图

    flutter_system_overview.png

    如上图所示为Flutter官方给出的系统架构图,可以看出Flutter框架分为三层:Framework层、Engine层和Embedder层。

    • Framework层:由Dart来实现,包含众多安卓Material风格和iOS Cupertino风格的Widgets小部件,还有渲染、动画、绘图和手势等。Framework包含日常开发所需要的大量API,普通应用开发熟悉这些API的使用基本OK了,不过很多特殊场景的控件需要自己根据实际情况进行自定义。Framework层的源码地址:https://github.com/flutter/flutter/tree/master/packages/flutter/lib

    • Engine层:由C/C++实现,是Flutter的核心引擎,主要包括Skia图形引擎、Dart运行时环境Dart VM、Text文本渲染引擎等;如果想深入了解Flutter原理,建议阅读该层的源代码。源代码地址:https://github.com/flutter/engine

    • Embedder层:主要处理一些平台相关的操作,如渲染Surface设置、本地插件、打包、线程设置等。

    Flutter原理

    无论是iOS还是安卓都是提供一个平台的View给Flutter层,页面内容渲染交由Flutter层自身来完成,所以其相对React Native等框架性能更好。Flutter中图形渲染流程:

    flutter_graphics_pipeline.png

    大致流程如下:

    1. GPU的Vsync信号同步到UI线程
    2. UI线程使用Dart来构建抽象的视图结构
    3. 视图结构在GPU线程中进行图层合成
    4. 合成后的视图数据提供给Skia图形引擎处理成GPU数据
    5. 数据再通过OpenGL或Vulkan提供给GPU进行渲染

    写在最后

    本篇简单介绍了一下Flutter的特点和其框架基本原理,后续随着最佳实践的分享,回过头来看这篇文章会更清晰一些,敬请期待!

    相关文章

      网友评论

        本文标题:Flutter简介

        本文链接:https://www.haomeiwen.com/subject/kptzzftx.html