有关 Flutter 的前世今生

Flutter 是什么

• Flutter 是 Google 开发的一套全新的跨平台,开源UI框架,支持iOS、Android系统开发，并且成为Google下一代操作系统Fuchsia的UI框架

• 2018 年 12 月初,Google 正式发布了开源跨平台 UI 框架 Flutter 1.0 Release 版本

• Flutter 从浏览器而来，借鉴和简化了很多Web相关设计思路，并且抛弃历史和Web兼容问题，是一个全新的自绘引擎跨平台技术方案

Dart 语言

2011 年 10 月，在 GOTO 大会上，Google 发布了一种新的编程语言 Dart。Dart 的诞生正是要解决 JavaScript 在语言本质上无法改进的缺陷。

虽然 Google 在不遗余力的推广 Dart 的使用，但是由于 JavaScript 应用众多，包括Node.js 的崛起，使得 Dart 的普及程度并没有达到很好的效果，可是说是遭受了重大挫折。

也正式因为这样，Dart 也开始转型， Google 内部孵化了移动开发框架 Flutter，快速步入移动开发的领域，而在 Google 未来的操作系统 Fuchsia 中，Dart 更是被指定为官方的开发语言。

由此转变 Dart 像是迎来了人生第二春，在 Flutter 上大放异彩，目前主要发力的移动端开发上，支持 Android 和 iOS 双平台，Web 端优化改进也在进行中，通过一套自绘引擎达到可以媲美原生系统性能的效果。

对于 Flutter 的未来还是很期待的，下面来说说 Dart 语言的优势:

• Google 主导研发，下一代操作系统开发语言
• Dart 一般情况下是运行 DartVM 上，但是也可以编译为 ARM 代码直接运行在硬件上
• Dart 同时支持 AOT 和 JIT 两种编译方式，可以更好的提高开发以及 App 的执行效率
• Dart 可以利用独特的隔离区（Isolate）实现多线程。而且不共享内存，可以实现无锁快速分配
• Tree Shaking、Hot Reload、多生代无锁垃圾回收
• 分代垃圾回收，适合 UI 框架中常见的大量 Widgets 对象创建和销毁的优化
• Dart 有很丰富的三方库

更多插件可以查看Dart 官方插件: https://pub.dev

Flutter 技术优势

• Google 最为其强大的技术支持后盾
• Flutter 是彻底的跨平台方案，自己实现一套自绘引擎框架
• Flutter 提供了丰富的Widget库(控件库)
• 继承了Dart 语言所有特性，一套代码做到在 Android 和 iOS 平台效果一致以及高效的Hot Reload能快速辅助开发调试；
• 强大的 Skia 渲染引擎，可最大程度上保证不同平台的体验一致性

不过也有不太友好的地方，比如：

• 有一些功能不能直接使用 Dart 获取，而是需要通过编写平台插件来获得平台相应的能力，比如：定位、拍照等功能

综上：Flutter 的优势还是挺具有吸引力的，也非常值得学习。

Skia

上面有提到 Skia 引擎，这里在科普一下

• Skia 是 Google 2005年收购的一家图像绘制引擎，目前应用在 Google 的各种产品线上，比如：Android、Chrome等
• Skia 是一款用 C++ 开发的、性能彪悍的 2D 图像绘制引擎，其前身是一个向量绘图软件。在图形转换、文字渲染、位图渲染方面都表现卓越，并提供了开发者友好的 API
• Skia 也是Flutter 底层图像渲染引擎，通过两者的深度优化，Flutter 具备了彻底的跨平台渲染能力，最大限度地抹平平台差异，提高渲染效率与性能

Flutter 系统架构

Flutter 架构分层

• Embedder 是操作系统适配层，实现了渲染 Surface 设置，线程设置，以及平台插件等平台相关特性的适配。从这里我们可以看到，Flutter 平台相关特性并不多，这就使得从框架层面保持跨端一致性的成本相对较低。

• Engine 引擎层主要包含 Skia、Dart 和 Text，实现了 Flutter 的渲染引擎、文字排版、事件处理和 Dart 运行时等功能。Skia 和 Text 为上层接口提供了调用底层渲染和排版的能力，Dart 则为 Flutter 提供了运行时调用 Dart 和渲染引擎的能力。而 Engine 层的作用，则是将它们组合起来，从它们生成的数据中实现视图渲染。

• Framework 层则是一个用 Dart 实现的 UI SDK，包含了动画、图形绘制和手势识别等功能。为了在绘制控件等固定样式的图形时提供更直观、更方便的接口，Flutter 还基于这些基础能力，根据 Material 和 Cupertino 两种视觉设计风格封装了一套 UI 组件库。

Flutter Widget

Widget 树

Flutter 中一切皆 Widget

• Widget：描述一个UI元素的配置数据，并不是最终绘制在设备屏幕上的显示元素，它只是描述显示元素的一个配置数据
• Element：真实屏幕上显示元素，Widget只是描述Element的配置数据

一个Widget 可以对应多个Element 日常多操作的是Widget部分,当然可以自定义Widget 或者 Element

常见的Widget子类为StatelessWidget(无状态)和StatefulWidget(有状态)；

• StatelessWidget：内部没有保存状态，UI界面创建后不会发生改变
• StatefulWidget：内部有保存状态，当状态发生改变，会触发更新

后面会逐步介绍 Widget 控件使用

Flutter 绘制过程

页面中的各界面元素（Widget）以树的形式组织，即控件树。Flutter 通过控件树中的每个控件创建不同类型的渲染对象，组成渲染对象树。而渲染对象树在 Flutter 的展示过程分为四个阶段：布局、绘制、合成和渲染

• 布局元素：决定页面元素在屏幕上的位置和大小，类似 Android 中的 Measure 操作
• 绘制阶段：将页面元素绘制成它们应有的样式
• 合成阶段：按照绘制规则将之前两个步骤的产物组合在一起
• 渲染：合并完成后，Flutter 会将几何图层数据交由 Skia 引擎加工成二维图像数据，最终交由 GPU 进行渲染，完成界面的展示。

Flutter 未来

当我们在思考要不要学习的时候？在思考 Flutter 行不行啊？，有些人已经上手了，所以勇敢选择，你的未来就有可能不一样。

更多内容可关注公众号查看