【Flutter 极速指南】工作原理篇

这篇文章你能学习到：

• 绘图基本原理（OpenGL）
• Flutter 框架设计
• Flutter 布局机制
• Flutter 部件生命周期&状态控制
• Flutter 渲染
• Flutter 引擎
• Flutter 工程结构简介
• Flutter vs WebView vs ReactNative

绘图基本原理

我们先回顾一下计算机在屏幕上的绘图原理过程：

OpenGL

• CPU 将计算好的显示内容提交给 GPU
• GPU 使用 VRAM 中的数据和命令，完成图像渲染
• 将渲染好的结果存入帧缓冲区 (FrameBuffer)
• 然后视频控制器将帧缓冲区的数据传递给显示器显示

帧缓冲区：简称帧缓存或显存，它是屏幕所显示画面的一个直接映象，又称为位映射图(Bit Map)或光栅。帧缓存的每一存储单元对应屏幕上的一个像素，整个帧缓存对应一帧图像。

当然，Android、iOS 的 UI 渲染过程是如此，Flutter 也是如此，在整个 Flutter 架构中，Flutter 只关心向 GPU 提供显示数据，并不关心显示器、视频控制器以及 GPU 是如何工作的。

Graphics Pipeline

• GPU将信号同步到 UI 线程
• UI 线程用Dart来构建图层树
• 图层树在GPU 线程进行合成
• 合成后的视图数据提供给Skia 引擎
• Skia 引擎通过OpenGL 或者 Vulkan将显示内容提供给GPU

Flutter 框架设计

Flutter 整体框架是由 Dart 语言来实现的，它的层次非常清晰，每层（模块）的职责也相对单一，整个结构让 Flutter 框架在使用上来说更加容易和学习。框架的底层是 Flutter 引擎，它负责绘图、动画、网络、Dart 运行时等功能，是由 C++ 实现的，我们会在接下来的章节中介绍。

Architecture

• Framework
  • Meterial, Cupertino：针对 Android 的 Meterial 风格，和针对 iOS 的 Cupertino 风格；
  • Widgets：按钮、文本、输入框、图片等组件；
  • Rendering：渲染层，负责布局、绘制、合成等；
  • Animation, Painting, Gestures：动画、绘图、手势；
  • Foundation：最底层，提供上层需要使用的工具类和方法；
• Engine
  • Skia：图形绘制
  • Dart：语言运行时
  • Text：纹理

Flutter 布局机制

Flutter 提供众多的布局组件，这一点和其它 Web 前端框架的差别非常大，种类如下：

• 单个子元素的布局
  • Container
  • Padding
  • Center
  • Align
  • ... 多达18种
• 多个子元素的布局
  • Row
  • Column
  • Stack
  • ... 多达11种

Flutter 如此繁多的布局组件，对于开发者来说学习难度非常大，并且在不同的页面采用适合的组件非常难选，并且在复杂的布局结构中组件的嵌套非常的深和复杂，这几点绝对让一个 Web 前端开发人员鄙视。或许未来 Flutter 会有更加对开发人员友好的布局设计。

Flutter 部件生命周期&状态控制

Flutter 框架的 UI 是基于 Widget 的，一切皆 Widget，与 Vue、React 等前端框架一样，部件有自己的生命周期：

State Lifecycle

Flutter 渲染

Flutter 界面渲染分三个阶段：布局、绘制和合成。布局和绘制是在 Flutter 框架层完成的，合成则是由 Flutter 引擎来完成的。

Rendering Pipeline

• 动画的运行会改变部件状态（update state）
• 状态的改变会触发图层树的重建
• 根据新旧图层树的差异更新渲染树
• 新的渲染树合成新的图层列表
• 重新输出图层树

Flutter 引擎

Flutter 引擎是由 C++ 实现的，主要包含：Skia、Dart和Text 三大部分：

• Skia：是由 Google 提供的二维图形框架，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现。它运用在在 Chrome、Android、Firefox 等产品上。
• Dart：是 Dart 语言的运行时。
• Text：文字布局？？

Flutter 工程结构简介

通过 Flutter 插件可以自动创建 Flutter 项目，目录结构如下：

• android：Android 原生项目
• build
• ios：iOS 原生项目
• lib：Flutter 项目源代码
• test：单元测试
• .metadata
• .packages
• pubspec.lock：项目所有依赖，一颗依赖树
• pubspec.yaml：项目主依赖配置

Flutter vs WebView vs ReactNative

WebView

最早的跨平台解决方案，是借助 App 内部的 WebView 组件来实现的，也就是 App 内部的浏览器。但是由于它的性能、兼容性、稳定性都表现不够出色，并且在联调上有太多的障碍，导致这个技术已经不再流行。

Flutter vs Webview

说白了，其实它仅仅只是 Web 的开发，UI 和业务逻辑都是 Web 的部分，如果要调取 Native 的硬件设备，需要 Native 拦截特殊的 Http 请求从而获取硬件设备信息。当然它有自己的好处，更新快，有问题随时发布。

ReactNative

ReactNative 在 WebView 的方案上更进一步，借助 App 内置 Javascrpit 引擎，将 JavaScript 和 Native 进行桥接，直接通过 JavaScript 来调取 Native 的相关组件，在性能上比 WebView 要更胜一筹。

Flutter vs Reactnative

这种形势的跨平台并非真正意义的跨平台，如果要做 UI 或者新的组件时，还是需要在 iOS 和 Android 两端上都有对应接口的实现才行。由于有 JavaScript 桥接这一层，在性能上还是稍差于纯 Native 开发。但是即便于此，它低廉的学习成本，与 Web 前端开发方式一样有着直观易懂，以及极高的开发效率，得到了开发人员（尤其是 Web 前端）的青睐。

Flutter

Flutter 可以说是跨平台解决方案的再一次进化，它直接借助 OpenGL 通过 GPU 来绘制 UI，并且通过 C++ 直接和系统层交互。

Flutter

Flutter 可以说在性能更加的高，在跨平台解决方案上更加彻底，但是它的学习曲线相对陡峭，并且刚刚起步，生态还为形成，不过潜力还是非常大。

〖坚持的一俢〗