Flutter简介
来源flutter中文网Flutter中文网
Flutter
是跨平台
、高保真
、高性能
。开发者可以通过Dart语言
开发 App,一套代码同时运行在iOS 和 Android
平台。Flutter
提供了丰富的组件、接口,开发者可以很快地为Flutter
添加native扩展
。同时Flutter
还使用 Native`引擎渲染视图,这无疑能为用户提供良好的体验。
跨平台自绘引擎
Flutter
与用于构建移动应用程序的其它大多数框架不同,因为Flutter
既不使用WebView
,也不使用操作系统的原生控件。 相反,Flutter
使用自己的高性能渲染引擎来绘制widget。这样不仅可以保证在Android
和iOS
上UI的一致性,而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。
Flutter
使用Skia
作为其2D
渲染引擎,Skia
是2D
图形处理函数库,包含字型、坐标转换,以及点阵图都有高效能且简洁的表现,Skia
是跨平台的,并提供了非常友好的API
,目前Google Chrome浏览器
和Android均采用Skia
作为其绘图引擎。
目前
Flutter
默认支持iOS、Android、Fuchsia(Google新的自研操作系统)三个移动平台
。但Flutter
亦可支持Web
开发(Flutter for web)和PC开发,本书的示例和介绍主要是基于iOS
和Android
平台的,其它平台读者可以自行了解。
高性能
Flutter高性能
主要靠两点来保证,首先,Flutter APP
采用Dart
语言开发。Dart
在JIT
(即时编译)模式下,速度与JavaScript
基本持平。但是Dart
支持AOT
,当以AOT
模式运行时,JavaScript
便远远追不上了。速度的提升对高帧率下的视图数据计算很有帮助。其次,Flutter
使用自己的渲染引擎来绘制UI
,布局数据等由Dart
语言直接控制,所以在布局过程中不需要像RN那样要在JavaScript
和Native
之间通信,这在一些滑动和拖动的场景下具有明显优势,因为在滑动和拖动过程往往都会引起布局发生变化,所以JavaScript
需要和Native
之间不停的同步布局信息,这和在浏览器中要JavaScript
频繁操作DOM
所带来的问题是相同的,都会带来比较可观的性能开销。
采用Dart语言开发
这是一个很有意思,但也很有争议的问题,在了解
Flutter
为什么选择了Dart
而不是JavaScript
之前我们先来介绍两个概念:JIT
和AOT
。
目前,程序主要有两种
运行方式:静态编译
与动态解释
。静态编译的程序在执行前全部被翻译为机器码
,通常将这种类型称为AOT (Ahead of time)即 “提前编译”
;而解释执行的则是一句一句边翻译边运行,通常将这种类型称为JIT(Just-in-time)即“即时编译”
。AOT程序
的典型代表是用C/C++
开发的应用,它们必须在执行前编译成机器码,而JIT
的代表则非常多,如JavaScript、python
等,事实上,所有脚本语言都支持JIT模式。但需要注意的是JIT和AOT
指的是程序运行方式,和编程语言并非强关联的,有些语言既可以以JIT方式
运行也可以以AOT方式
运行,如Java、Python
,它们可以在第一次执行时编译成中间字节码、然后在之后执行时可以直接执行字节码,也许有人会说,中间字节码并非机器码,在程序执行时仍然需要动态将字节码转为机器码,是的,这没有错,不过通常我们区分是否为AOT
的标准就是看代码在执行之前是否需要编译,只要需要编译,无论其编译产物是字节码还是机器码,都属于AOT
。在此,读者不必纠结于概念,概念就是为了传达精神而发明的,只要读者能够理解其原理即可,得其神忘其形。
现在我们看看 Flutter为什么选择Dart语言
?笔者根据官方解释以及自己对Flutter
的理解总结了以下几条(由于其它跨平台框架都将JavaScript作为其开发语言,所以主要将Dart和JavaScript做一个对比):
- 开发效率高
Dart
运行时和编译器支持Fluttr
的两个关键特性的组合:
基于JIT的快速开发周期:
Flutter
在开发阶段采用,采用JIT
模式,这样就避免了每次改动都要进行编译,极大的节省了开发时间;
基于
AOT
的发布包:Flutter
在发布时可以通过AOT
生成高效的ARM代码
以保证应用性能。而JavaScript则不具有这个能力
。
- 高性能
Flutter
旨在提供流畅、高保真的的UI体验
。为了实现这一点,Flutter
中需要能够在每个动画帧中运行大量的代码。这意味着需要一种既能提供高性能的语言,而不会出现会丢帧的周期性暂停,而Dar
t支持AOT
,在这一点上可以做的比JavaScript
更好。
- 快速内存分配
Flutter
框架使用函数式流,这使得它在很大程度上依赖于底层的内存分配器。因此,拥有一个能够有效地处理琐碎任务的内存分配器将显得十分重要,在缺乏此功能的语言中,Flutter
将无法有效地工作。当然Chrome V8
的JavaScript
引擎在内存分配上也已经做的很好,事实上Dart开发团队
的很多成员都是来自Chrome
团队的,所以在内存分配上Dart
并不能作为超越JavaScript
的优势,而对于Flutter
来说,它需要这样的特性,而Dart也正好满足而已。
- 类型安全
由于Dart
是类型安全的语言,支持静态类型检测,所以可以在编译前发现一些类型的错误,并排除潜在问题,这一点对于前端开发者来说可能会更具有吸引力。与之不同的,JavaScript
是一个弱类型语言,也因此前端社区出现了很多给JavaScript
代码添加静态类型检测的扩展语言和工具,如:微软的TypeScript
以及Facebook
的Flow
。相比之下,Dart
本身就支持静态类型,这是它的一个重要优势。
-
Dart
团队就在你身边
看似不起眼,实则举足轻重。由于有Dart
团队的积极投入,Flutter
团队可以获得更多、更方便的支持,正如Flutter官网
所述“我们正与Dart
社区进行密切合作,以改进Dart
在Flutter
中的使用。例如,当我们最初采用Dart
时,该语言并没有提供生成原生二进制文件的工具链(这对于实现可预测的高性能具有很大的帮助),但是现在它实现了,因为Dart
团队专门为Flutter构建
了它。同样,Dart VM
之前已经针对吞吐量进行了优化,但团队现在正在优化VM的延迟时间,这对于Flutter的工作
负载更为重要。”
Flutter框架结构
41c572c46e0fb4db39b3dc235ba02758Flutter Framework
这是一个纯 Dart实现的 SDK,它实现了一套基础库,自底向上,我们来简单介绍一下:
底下两层(
Foundation
和Animation、Painting
、Gestures
)在Flutter
中的dart:ui
包,它是Flutter
引擎暴露的底层UI库,提供动画、手势及绘制能力。
Rendering层
,这一层是一个抽象的布局层,它依赖于dart UI
层,Rendering
层会构建一个UI
树,当UI
树有变化时,会计算出有变化的部分,然后更新UI
树,最终将UI
树绘制到屏幕上,这个过程类似于React
中的虚拟DOM
。Rendering
层可以说是Flutter UI
框架最核心的部分,它除了确定每个UI
元素的位置、大小之外还要进行坐标变换、绘制(调用底层dart:ui
)。
Widgets层
是Flutter
提供的的一套基础组件库,在基础组件库之上,Flutter
还提供了Material
和Cupertino
两种视觉风格的组件库。而我们Flutter
开发的大多数场景,只是和这两层打交道。
Flutter Engine
这是一个纯 C++
实现的 SDK
,其中包括了 Skia引擎
、Dart
运行时、文字排版引擎等。在代码调用 dart:ui
库时,调用最终会走到Engine
层,然后实现真正的绘制逻辑
网友评论