【一探究竟】Flutter究竟是什么？

时间 2019-11-06

标签一探究竟 flutter 究竟什么繁體版

原文原文链接

起源

咱们从官网的介绍开始提及。web

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.浏览器

Flutter 是 Google 的 UI 工具包，用于从单个代码库构建漂亮的、本地编译的移动、web 和桌面应用程序。架构

因此正如咱们（看了不少网上的文章后）所知，Flutter是一个开源的、跨平台的UI框架，用它开发的应用程序都具备高保真度和高性能表现。app

但也许咱们不知道或不太明白的是：框架

到底什么是UI框架?
到底什么是高保真度？
到底什么是高性能表现？
Flutter是如何作到跨平台的？
Flutter是如何作到高保真度的？
Flutter是如何作到高性能表现的？

以上问题咱们将各个击破，不过在开始前咱们先插播一段Flutter背景简介~函数

Flutter背景简介

Flutter的前身是 Google 内部孵化的Sky项目，于2014年10月在 GitHub 上开源一年后，于2015年10月正式改名为Flutter。工具

Flutter是众多跨平台框架中的一个，其不一样之处在于采用了自绘UI+原生的实现方案，相比于H5+原生和JavaScript开发+原生渲染类的方案，这是一种更为完全的方案，而且它天生具有两大优势：布局

在不一样平台的 UI 表现可作到高保真度、高一致性
绘制 UI 的性能和原生控件接近

Flutter的目标在于作全平台！开发者只需使用同一套基准代码，即可为移动平台、桌面端和网页端开发应用。而目前来看Flutter所支持或将支持的平台已经有 Android、iOS、Fuchsia、Chrome OS，另外我认为将来支持鸿蒙OS（一款让咱们引觉得傲的操做系统）也必将是件水到渠成的事~post

更多背景相关知识我在拜读的文章中贴出了连接，你们可自行食用。性能

到底什么是UI框架?

咱们把UI和框架拆开，分别来作解释。

UI是User Interface的缩写，是用户界面的意思，但在咱们软件领域广泛的认识里，UI设计实际是指软件的人机交互、操做逻辑、界面美观性的总体设计，因此UI就是指软件的交互操做和视觉效果。

框架在百度百科上的释义以下（你们感觉下）：

框架（framework）是一个框子——指其约束性，也是一个架子——指其支撑性。是一个基本概念上的结构，用于去解决或者处理复杂的问题。

而在咱们软件领域，框架能够理解为是一个用来开发软件的工具包，它已处理好了通用的、基础性的工做，而且制定好了使用规则。

因此总结一下，UI框架就是指用来开发软件的工具包，且该软件能够带有交互操做和美观的视觉效果。

到底什么是高保真度？

（这词乍一看怪吓人的，让人头皮发麻，萌生吐意🤮，谁叫我不是厦大的呢？）

高保真是声音技术领域的专业术语，是指与原来的声音高度类似的重放声音。

但在咱们软件领域，高保真度其实就是高还原度的意思，旨在能够像素级还原UI稿的交互与视觉效果。

到底什么是高性能表现？

（如下提及性能的时候，都指的是在软件开发领域~）

性能是个司空见惯的词，但性能究竟是什么意思呢？可能在咱们心中是既知道又说不清楚的含糊状态。

性能的英文是Performance，它也有表现、工做状况的意思。

当提及性能的时候，咱们都能联想起一些关键词，好比：启动速度、内存使用优化、布局优化、电量优化、包瘦身等等。

因此综上能够感觉出来，性能是一个软件多维度指标表现状况的代名词，高性能表现就是指软件各项指标都表现优异。（该快的快、该少的少、该大的大😁、该小的小）

Flutter是如何作到跨平台的？

这里搬出Flutter官方分层架构图，在大的层次上，从上到下依次分为以下三层（能够看出 Framework 层内部又会分层）：

Framework框架层：一个纯Dart实现的SDK（一套基础库），负责 UI 相关的事情，如：动画、widget、绘图、手势、基础能力等。（咱们的应用就是围绕这层来构建的）
- 在该层内部 Foundation 和 Animation、Painting、Gestures 对应的是 Flutter 中的dart:ui 包，它是 Flutter 引擎暴露的底层 UI 库，用来提供动画、手势及绘制等能力。
Engine引擎层：一个纯C++实现的SDK，主要包括 Skia 引擎（开源的二位图形库）、Dart 运行时、GC垃圾回收、编译模式支持、Text 文字排版引擎等。
Embedder嵌入器层：见名知意是将 Flutter 移植到各平台的中间层代码，作好这一层的适配 Flutter 基本能够嵌入到任何平台上去。它主要包括渲染Surface设置、原平生台插件、打包、线程管理、事件循环交互操做等。

因此能够看出在设计上Embedder层要作的工做就是隔离并适配不一样平台的差别，保证对上层暴露统一的API，以此来达到跨平台的目的。不管如今的Android、iOS仍是将来的Fuchsia、鸿蒙OS，亦或是其余嵌入式操做系统（好比树莓派上的系统 Raspbian ），理论上 Flutter 都是能够跨上去的😎。

以上是针对跨操做系统而言的，在最近刚发步的 Flutter 1.9 中Flutter for web的支持虽然还处于预览版，但 flutter_web 这个 repo 已经合并到了 flutter 的主 repo，这也是一个重要的里程碑了。那么Flutter是如何作到支持Web的呢？

如架构图所示，Framework 层在移动和 web 平台是共享的，固然为了支持 web ，官方对dart:ui库作了新的适配。而后即是使用基于 DOM、Canvas 和 CSS 的代码替换了移动平台上 Skia 实现的引擎层，当咱们为 Web 平台编译 Flutter 代码时，应用、Flutter 框架、以及 Web 版本的 dart:ui 库都将编译为 JavaScript ，能够运行在任何现代浏览器上。

Flutter是如何作到高保真度的？

根据前文这个问题能够转化为：Flutter是如何作到能够像素级还原UI稿的交互与视觉效果的？

这点首先得益于选择了自绘UI的技术方向，基于这个方向 Flutter 在 Engine 层使用了跨平台自绘引擎Skia和文字排版引擎来作底层渲染（或是for web 的引擎代码），在 Framework 层构建了一整套本身的UI系统，而不依赖任何原生的控件。如此一来，布局、动画、手势、绘制等全权尽在掌控之中，要作到高保真也就手到擒来了。

下面引用《Flutter 实战》一书中，关于 Skia 的一段描述：

Flutter使用Skia做为其2D渲染引擎，Skia是Google的一个2D图形处理函数库，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现，Skia是跨平台的，并提供了很是友好的API，目前Google Chrome浏览器和Android均采用Skia做为其绘图引擎。

Flutter是如何作到高性能表现的？

首先高或低是个相对的概念，而 Flutter 的高性能来自于两个比较：

如下两点引用自《Flutter 实战》一书

Flutter APP 采用 Dart 语言开发。Dart 在 JIT（即时编译）模式下，速度与 JavaScript 基本持平。可是 Dart 支持 AOT，当以 AOT 模式运行时，JavaScript 便远远追不上了。速度的提高对高帧率下的视图数据计算颇有帮助。

Flutter 使用本身的渲染引擎来绘制 UI ，布局数据等由 Dart 语言直接控制，因此在布局过程当中不须要像 RN 那样要在 JavaScript 和 Native 之间通讯，这在一些滑动和拖动的场景下具备明显优点，由于在滑动和拖动过程每每都会引发布局发生变化，因此 JavaScript 须要和 Native 之间不停的同步布局信息，这和在浏览器中要 JavaScript 频繁操做 DOM 所带来的问题是相同的，都会带来比较可观的性能开销。

文末

因此综上所述，Flutter 究竟是什么呢？在我看来，它或将是终端开发的将来。

我的能力有限，若有不正之处欢迎你们批评指出，我会虚心接受并第一时间修改，以不误导你们。