Flutter跨平台自绘引擎

Flutter 不使用WebView，也不使用操作系统的原生控件 Flutter使用自己的高性能渲染引擎来绘制widget。
在Android和iOS上UI的一致性，避免对原生控件依赖而带来的限制及高昂的维护成本。

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

Flutter默认支持iOS、Android、Fuchsia（Google新的自研操作系统）三个移动平台。
Flutter亦可支持Web开发（Flutter for web）和PC开发

Flutter高性能

Flutter高性能靠两点保证
首先，Flutter APP采用Dart语言开发 Dart在 JIT（即时编译）模式下，速度与 JavaScript基本持平。
但是 Dart以 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方式运行如Java、Python，
可以在第一次执行时编译成中间字节码、然后在之后执行时可以直接执行字节码   AOT的标准 看代码在执行之前是否需要编译，只要需要编译 都属于AOT。



Flutter为什么选择Dart语言？
对比Dart和JavaScript

  1. 开发效率高


    Dart运行时和编译器支持Flutter的两个关键特性的组合：

    基于JIT的快速开发周期

    Flutter在开发阶段采用 JIT模式， 避免 每次改动都要进行编译 节省 开发时间；

    基于AOT的发布包

    Flutter在发布时 通过AOT生成高效的ARM代码 保证应用性能  JavaScript 不具有这个能力。


  2. 高性能

    Flutter 旨在提供流畅、高保真的的UI体验。 Flutter  能够在每个动画帧中运行大量的代码。  Dart支持AOT 比JavaScript更好。

  3. 快速内存分配


    Flutter框架使用函数式流，  依赖于底层的内存分配器。 Chrome V8的JavaScript引擎在内存分配上也已经做的很好   而Dart也正好满足。

  4. 类型安全


    Dart是类型安全的语言，支持静态类型检测， 可以在编译前发现 类型的错误，并排除潜在问题。 JavaScript是 弱类型语言，  给JavaScript代码 静态类型检测的扩展语言和工具 如：微软的TypeScript以及Facebook的Flow。 Dart本身就支持静态类型，这是它的一个重要优势。

  5. Dart团队

    举足轻重 有Dart团队的积极投入，Flutter团队可以获得更多、更方便的支持，Dart团队专门为Flutter构建 Dart VM之前已经针对吞吐量进行了优化，团队优化VM的延迟时间 对于Flutter的工作负载更为重要。

Flutter框架结构 学习过程就是 按图索骥

图1-1

Flutter Framework

纯 Dart实现的 SDK

  • 底下两层（Foundation和Animation、Painting、Gestures）在Google的 视频中被合并为一个dart UI层，对应的是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层，然后实现真正的绘制逻辑。

总结

Flutter框架本身有着良好的分层设计 如何学习Flutter资源

  • Flutter官网的资源是快速入门的最佳方式，是了解最新Flutter发展动态的地方，去官网看看有没有新的动态

  • 源码注释应作为学习Flutter的第一文档，Flutter SDK的源码是开源的，注释详细，多示例 源码结合注释可以 解决大多数问题。

  • 如果遇到的问题在StackOverflow上也没有找到答案，可以去github flutter 项目下提issue。

  • Gallery是Flutter官方示例APP，里面有丰富的示例，Gallery的源码在Flutter源码“examples”目录下。