Flutter简介

Flutter 是什么？

Flutter是Google开源的跨平台UI工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。

为什么使用 Flutter？

Flutter 的优势是什么？它能够帮你：

• 高性能

  • Flutter使用Skia作为其2D渲染引擎来绘制widget，布局数据由Dart语言直接控制，不需要像RN那样在JavaScript和Native之间通信频繁同步布局信息，性能可以媲美原生应用。

• 高效率

  • Flutter APP采用Dart语言开发，Dart支持JIT（即时编译）模式和AOT模式，在开发阶段，JIT模式的热重载能力，使代码修改直接反映到UI上，提升开发效率；在Release阶段，AOT模式 极大提高App运行时性能。

• 高复用

  • 在Flutter的世界里，万物皆为widget，这使得组件复用变得十分简单。
  • Flutter使用Skia作为其2D渲染引擎来绘制widget。这样可以严格保证UI上的多端一致性，真正意义上的一套代码多端运行，多端一致。

Flutter框架结构

我们看一下Flutter官方提供的Flutter框架图，如下：

• Flutter本身有很好的分层设计，自上而下依次是Framework、Engine、Embedder。

• Framework层通常又分为三层，自上而下分别是：

  • Widgets层
    • Widgets层是Flutter提供的的一套基础组件库，在基础组件库之上，Flutter还提供了 Material 和Cupertino两种视觉风格的组件库。而我们Flutter开发的大多数场景，只是和这两层打交道。
  • Rendering层
    • Rendering层是一个抽象的布局层，它依赖于Dart UI层，Rendering层会构建一个UI树，当UI树有变化时，会计算出有变化的部分，然后更新UI树，最终将UI树绘制到屏幕上，这个过程类似于React中的虚拟DOM。Rendering层可以说是Flutter UI框架最核心的部分，它除了确定每个UI元素的位置、大小之外还要进行坐标变换、绘制(调用底层dart:ui)。
  • Dart UI层
    • Dart UI层是Flutter引擎暴露的底层UI库，提供动画、手势及绘制能力。

• Engine层

  • 这是一个纯 C++实现的 SDK，其中包括了 Skia引擎、Dart运行时、文字排版引擎等。在代码调用 dart:ui库时，调用最终会走到Engine层，然后实现真正的绘制逻辑。

• Embedder层

  • embedder 为engine提供四个task runner，将引擎移植到平台的中间层代码 同时负责渲染设置，原生插件，打包，线程管理，事件循环交互操作等。