深入解析Flutter架构

想要成为一名优秀的Android开发，你需要一份完备的 知识体系，在这里，让我们一起成长为自己所想的那样~。

本文旨在对Flutter的架构进行高层次的概述，包括构成其设计的核心原则和概念。

Flutter是一个跨平台的UI工具包，它的设计目的是允许跨iOS和Android等操作系统的代码重用，同时也允许应用程序直接与底层平台服务对接。其目标是让开发者能够交付在不同平台上感觉自然的高性能应用，在尽可能多的代码共享的同时，拥抱存在差异的地方。

在开发过程中，Flutter应用运行在一个虚拟机中，该虚拟机提供有状态的变化热重载，而不需要完全重新编译。发布时，Flutter应用直接编译成机器代码，无论是Intel x64，还是ARM指令，如果针对Web，则编译成JavaScript。该框架是开源的，采用允许的BSD许可证，并拥有一个繁荣的第三方包生态系统，补充核心库功能。

本概述分为若干部分。

• layer model：建Flutter的部分。
• Reactive user interfaces：lutter用户界面开发的核心概念。
• widgets：lutter用户界面的基本构件。
• rendering process：lutter如何将UI代码转化为像素。
• platform embedders：移动和桌面操作系统执行Flutter应用程序的代码。
• Integrating Flutter with other code：于Flutter应用程序可用的不同技术的信息。
• Support for the web：于Flutter在浏览器环境下的特性的总结。

Achitectural layers

Flutter被设计成一个可扩展的、分层的系统。它作为一系列独立的库存在，每个库都依赖于底层。任何一层都没有特权访问下面的一层，框架层的每一部分都被设计成可选择和可替换的。

对底层操作系统而言，Flutter应用程序与其他本地应用程序一样，以相同的方式进行打包。一个平台特定的嵌入器提供了一个入口点；与底层操作系统协调，以访问服务，如渲染表面、可访问性和输入；并管理消息事件循环。嵌入器是用适合平台的语言编写的：目前Android的Java和C++，iOS和macOS的Objective-C/Objective-C++，Windows和Linux的C++。使用嵌入器，Flutter代码可以作为一个模块集成到现有的应用程序中，也可以是应用程序的全部内容。Flutter包含了许多针对常见目标平台的嵌入器，但也存在其他嵌入器。

Flutter的核心是Flutter引擎，它主要用C++编写，支持所有Flutter应用所需的基元。每当需要绘制新的帧时，该引擎负责对合成场景进行光栅化。它提供了Flutter核心API的低层实现，包括图形（通过Skia）、文本布局、文件和网络I/O、可访问性支持、插件架构以及Dart运行时和编译工具链。

该引擎通过dart:ui暴露给Flutter框架，它将底层的C++代码封装在Dart类中。这个库暴露了最底层的基元，例如用于驱动输入、图形和文本渲染子系统的类。

通常情况下，开发人员通过Flutter框架与Flutter进行交互，Flutter框架提供了一个用Dart语言编写的现代、反应式框架。它包括一套丰富的平台、布局和基础库，由一系列的层组成。从底层到顶层，我们有：

• 基础类和构件服务，如动画，绘画和手势，在底层基础上提供了常用的抽象。
• 渲染层提供了一个处理布局的抽象。通过这一层，你可以建立一个可渲染对象的树。你可以动态地操作这些对象，树会自动更新布局以反映你的变化。
• widgets层是一个组成抽象。渲染层中的每个渲染对象在widgets层中都有一个对应的类。此外，widgets层还允许你定义可以重用的类的组合。这是引入反应式编程模型的一层。
• Material和Cupertino库提供了全面的控件集，这些控件使用widget层的组合基元来实现Material或iOS设计语言。

Flutter框架相对较小；许多开发者可能会用到的更高级别的功能都是以包的形式实现的，包括像摄像头和webview这样的平台插件，以及像字符、http和动画这样的平台无关的功能，这些都是建立在核心Dart和Flutter库的基础上的。其中一些包来自更广泛的生态系统，涵盖应用内支付、苹果认证和动画等服务。

这篇综述的其余部分从UI开发的反应式范式开始，大致浏览了各个层次。然后，我们描述了如何将widget组合在一起，并将其转换为可作为应用程序的一部分进行渲染的对象。我们描述了Flutter如何在平台层面与其他代码进行交互，然后简要总结了Flutter的Web支持与其他目标的不同之处。

Reactive user interfaces

从表面上看，Flutter是一个被动的、伪声明式的UI框架，开发者提供一个从应用状态到界面状态的映射，当应用状态发生变化时，框架在运行时承担更新界面的任务。这种模式的灵感来自于Facebook为自己的React框架所做的工作，其中包括对很多传统设计原则的重新思考。

在大多数传统的UI框架中，用户界面的初始状态被描述一次，然后由用户代码在运行时响应事件单独更新。这种方法的一个挑战是，随着应用程序的复杂性增加，开发人员需要意识到状态变化如何在整个UI中级联。例如，考虑以下UI。

有很多地方可以改变状态：颜色框、色调滑块、单选按钮。当用户与用户界面交互时，变化必须反映在其他每个地方。更糟糕的是，除非小心翼翼，否则对用户界面的一个部分的微小改变可能会对看似不相关的代码产生涟漪效应。

一种解决方案是像MVC这样的方法，通过控制器将数据变化推送到模型，然后模型通过控制器将新的状态推送到视图。然而，这也是有问题的，因为创建和更新UI元素是两个独立的步骤，很容易不同步。

Flutter与其他反应式框架一样，采用了另一种方法来解决这个问题，通过明确地将用户界面与其底层状态解耦。使用React风格的API，你只需要创建UI描述，而框架则负责使用这一个配置来创建和/或适当更新用户界面。

在Flutter中，widget（类似于React中的组件）由不可变的类来表示，这些类用于配置对象树。这些widgets用于管理单独的对象树进行布局，然后用于管理单独的对象树进行合成。Flutter的核心是一系列机制，用于有效地行走树的修改部分，将对象树转换为低级对象树，并在这些树上传播变化。

一个widget通过覆盖build()方法来声明其用户界面，build()方法是一个将状态转换为UI的函数。

UI = f(state)