Flutter开发者自己的技术社区

Flutter简介

编程指南 flutterc 507℃ 0评论

前言

随着移动开发技术的日渐成熟,一些厂商开始考虑跨平台技术的解决方案,从早期的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

如上图所示为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

大致流程如下:

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

写在最后

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

说明:

文章转载自对应的“Flutter编程指南”微信公众号,更多Flutter相关技术文章打开微信扫描二维码关注微信公众号获取。

转载请注明:Flutter中文社区 » Flutter简介

喜欢 (1)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址