flutter架构（1）：概述

相关系列文章：
flutter架构（2）：Widget
flutter架构（3）：渲染和布局
flutter架构（4）：平台嵌入混编
flutter架构（5）：web支持

Flutter architectural overview

This article is intended to provide a high-level overview of the architecture of Flutter, including the core principles and concepts that form its design.
这篇文章意在提供一个高层次概括角度去了解Flutter架构，包括设计flutter的核心原则和观念。

Flutter is a cross-platform UI toolkit that is designed to allow code reuse across operating systems such as iOS and Android, while also allowing applications to interface directly with underlying platform services. The goal is to enable developers to deliver high-performance apps that feel natural on different platforms, embracing differences where they exist while sharing as much code as possible.
Flutter是一个跨平台的的UI工具集合，设计之初就期望能够跨平台（例如iOS/Anroid ）达到代码复用，同时还能够让app直接与平台底层服务直接通信。这个目的是能让开发者交付出高性能app，即使在不同平台上，存在平台差异的情况下，也尽可能的复用同一套业务代码逻辑（求同存异）。

During development, Flutter apps run in a VM that offers stateful hot reload of changes without needing a full recompile. For release, Flutter apps are compiled directly to machine code, whether Intel x64 or ARM instructions, or to JavaScript if targeting the web. The framework is open source, with a permissive BSD license, and has a thriving ecosystem of third-party packages that supplement the core library functionality.
在调试开发期间，Flutter app运行在VM上。VM提供动态hot reload更改机制，直接改变程序代码而不需要全编译。在发布阶段，Flutter app可以被直接编译成机器码，不管是Intel x64还是 ARM 指令集，甚至可以编译为JavaScript（如果针对Web）。framework使用BSD license授权方式进行开源，拥有一个丰富第三方生态社区，扩充核心代码库的功能性。

This overview is divided into a number of sections:
这个概述分为以下几个部分：

1. The layer model: The pieces from which Flutter is constructed.
   图层模型:Flutter的构成要素
2. Reactive user interfaces: A core concept for Flutter user interface development.
   用户交互:Flutter用户交互开发的核心要点
3. An introduction to widgets: The fundamental building blocks of Flutter user interfaces.
   对widget的介绍:Flutter用户交互的基础构建块
4. The rendering process: How Flutter turns UI code into pixels.
   渲染过程:Flutterf怎么把UI代码转换到像素
5. An overview of the platform embedders: The code that lets mobile and desktop OSes execute Flutter apps.
   平台移植的概述:能够让移动手机和桌面系统运行Flutter应用的相关代码
6. Integrating Flutter with other code: Information about different techniques available to Flutter apps.
   Flutter与其他代码的共存：有关Flutter app可用的不同技术的信息。
7. Support for the web: Concluding remarks about the characteristics of Flutter in a browser environment.
   web的支持：关于Flutter在web环境中的特性总结

Architectural layers – 架构图

Flutter is designed as an extensible, layered system. It exists as a series of independent libraries that each depend on the underlying layer. No layer has privileged access to the layer below, and every part of the framework level is designed to be optional and replaceable.
Flutter设计成一个可扩展、图层分明的架构。它存在一系列独立的代码层，每一层仅依赖于它的更低的一层。没有那里层是特殊访它的底层的，每一部分的framework层级都是设计成可选和可替代的。

To the underlying operating system, Flutter applications are packaged in the same way as any other native application. A platform-specific embedder provides an entrypoint; coordinates with the underlying operating system for access to services like rendering surfaces, accessibility, and input; and manages the message event loop. The embedder is written in a language that is appropriate for the platform: currently Java and C++ for Android, Objective-C/Objective-C++ for iOS and macOS, and C++ for Windows and Linux. Using the embedder, Flutter code can be integrated into an existing application as a module, or the code may be the entire content of the application. Flutter includes a number of embedders for common target platforms, but other embedders also exist.
在操作系统的底层，Flutter应用程序的包装方式和其他原生app没有什么区别。具体的的平台移植接入层（embedder）提供了代码入口，协同底层操作系统的接入服务，像渲染surface，可访问性和输入之类的服务，消息事件循环管理。移植接入层（embedder）是用平台特性程序语言来写的，例如Anroid上相对应的Java和C++，iOS /macOS上的Objective-C/Objective-C++，Windows/Linux上的C++。使用移植接入层，Flutter的代码可以作为模块接入现有app中，或者作为app的全部（纯flutter开发）。Flutter包含了一些列为通用平台实现的移植接入层（embedder），也存在一些其他特殊的移植接入层（embedder）。

At the core of Flutter is the Flutter engine, which is mostly written in C++ and supports the primitives necessary to support all Flutter applications. The engine is responsible for rasterizing composited scenes whenever a new frame needs to be painted. It provides the low-level implementation of Flutter’s core API, including graphics (through Skia), text layout, file and network I/O, accessibility support, plugin architecture, and a Dart runtime and compile toolchain.
Flutter的核心是Flutter引擎，其大部分是用C++来写的，还有支持Flutter应用程序所需要的必需语言。Flutter引擎负责合成场景的栅格化，每当新的一帧需要绘制时，Flutter引擎提供了底层的Flutter核心API，包括图片处理（通过Skia），text layout，文件和网络I/O, 可访问性的支持，Pluggin架构，Dart的runtime，以及编译工具链。

The engine is exposed to the Flutter framework through dart:ui, which wraps the underlying C++ code in Dart classes. This library exposes the lowest-level primitives, such as classes for driving input, graphics, and text rendering subsystems.
Flutter引擎暴露给Flutter framework 的方式是通过dart:ui，dart:ui封装了在Dart类中使用的底层C++。这个库暴露了最基础的底层，例如驱动输入，图像处理，text绘制等子系统。

Typically, developers interact with Flutter through the Flutter framework, which provides a modern, reactive framework written in the Dart language. It includes a rich set of platform, layout, and foundational libraries, composed of a series of layers. Working from the bottom to the top, we have:
总的来说，开发者通过Flutter framework与Flutter进行交互，Flutter framework提供了一个用dart语言实现的响应式编程模型。该模型的组成成分包括了一系列集合：平台、布局、基础功能代码库。从底层到应用顶层，我们有：

1. Basic foundational classes, and building block services such as animation, painting, and gestures that offer commonly used abstractions over the underlying foundation.
   基础的foundational 类，以及诸如基础动画， paint和手势之类的build基块服务，它们提供了基于foundation的常用抽象。

2. The rendering layer provides an abstraction for dealing with layout. With this layer, you can build a tree of renderable objects. You can manipulate these objects dynamically, with the tree automatically updating the layout to reflect your changes.
   rendering 层提供了一个处理布局的抽象方式。有了rendering layer，你可以构建一组渲染对象树。你可以动态性的操作这些对象，随着你的操作改变，对象树会自动更新布局

3. The widgets layer is a composition abstraction. Each render object in the rendering layer has a corresponding class in the widgets layer. In addition, the widgets layer allows you to define combinations of classes that you can reuse. This is the layer at which the reactive programming model is introduced.
   widget层是抽象组合层。在rendering层的每一个绘制渲染对象都在widget层有一个对应的类。此外，widget层允许你定义可复用的组合类。这是引入响应式编程的层。

4. The Material and Cupertino libraries offer comprehensive sets of controls that use the widget layer’s composition primitives to implement the Material or iOS design languages.
   Material 和 Cupertino库提供了主要使用widget层组合而成的功能全面的控件，分别实现Material和iOS的设计风格

The Flutter framework is relatively small; many higher-level features that developers might use are implemented as packages, including platform plugins like camera and webview, as well as platform-agnostic features like characters, http, and animations that build upon the core Dart and Flutter libraries. Some of these packages come from the broader ecosystem, covering services like in-app payments, Apple authentication, and animations.
Flutter framework相对轻量，开发者也许会用到的许多高级功能另外封装成了package，包括平台plugin，例如相机，webview，以及平台特性无关的功能，例如一些Dart和Flutter作为核心的功能库，例如字符库，http，动画。其中一些package来自于范围更大的生态系统，例如 app支付，Apple认证，动画之类的服务。

The rest of this overview broadly navigates down the layers, starting with the reactive paradigm of UI development. Then, we describe how widgets are composed together and converted into objects that can be rendered as part of an application. We describe how Flutter interoperates with other code at a platform level, before giving a brief summary of how Flutter’s web support differs from other targets.
本篇幅关于Flutter概述的剩余部分接下来就是UI开发的响应式编程，这里，我们介绍一下widget是怎么组合在一起，转成对象，然后能够为app进行绘制。在简要介绍Flutter在不同平台上对Web的支持之前，我们先介绍一下Flutter怎么在平台级和其他代码相互操作的。

Reactive user interfaces --响应式用户界面

On the surface, Flutter is a reactive, pseudo-declarative UI framework, in which the developer provides a mapping from application state to interface state, and the framework takes on the task of updating the interface at runtime when the application state changes. This model is inspired by work that came from Facebook for their own React framework, which includes a rethinking of many traditional design principles.
概述来讲，Flutter是一个非声明的，响应式UI架构，它给开发者提供了从应用状态到界面状态的映射，framework承担了这部分任务：在运行时，应用状态到界面状态的更新。这个模型的灵感来着于facebook的响应式架构，其中包括了很多对传统设计原则的重新思考。

In most traditional UI frameworks, the user interface’s initial state is described once and then separately updated by user code at runtime, in response to events. One challenge of this approach is that, as the application grows in complexity, the developer needs to be aware of how state changes cascade throughout the entire UI. For example, consider the following UI:
在大多数传统的UI框架中，用户界面的初始状态仅描述一次，然后在运行时由业务代码分别响应事件进行更新。 这种方法的一个问题是，随着应用程序复杂性的增长，开发人员需要清晰的知道UI状态如何在整个层级中更改。 例如，考虑以下UI：

There are many places where the state can be changed: the color box, the hue slider, the radio buttons. As the user interacts with the UI, changes must be reflected in every other place. Worse, unless care is taken, a minor change to one part of the user interface can cause ripple effects to seemingly unrelated pieces of code.
在很多地方都可以更改页面状态：颜色框，色调滑块，单选按钮。 当用户与UI交互时，变化必须反映在其他所有位置。 更糟糕的是，除非万分小心，考虑周全，否则对用户界面的一部分进行较小的更改可能会导致看似无关的代码段产生连锁反应（高耦合）。

One solution to this is an approach like MVC, where you push data changes to the model via the controller, and then the model pushes the new state to the view via the controller. However, this also is problematic, since creating and updating UI elements are two separate steps that can easily get out of sync.
一种解决方案是类似MVC的方法，其中你通过controller将数据的更改传递到model层，然后model层通过controller将新状态推送到View层。 但是，这也是有问题的，因为创建和更新UI元素是两个单独的步骤，很容易不同步。

Flutter, along with other reactive frameworks, takes an alternative approach to this problem, by explicitly decoupling the user interface from its underlying state. With React-style APIs, you only create the UI description, and the framework takes care of using that one configuration to both create and/or update the user interface as appropriate.
Flutter与其他响应式框架一样，采取了另一种方法来解决此问题：通过将用户界面与基础状态显式分离。 使用响应式风格的API，你只需要创建UI描述，然后framework担负起使用该UI描述配置以适当的方式 创建/更新 用户界面。

In Flutter, widgets (akin to components in React) are represented by immutable classes that are used to configure a tree of objects. These widgets are used to manage a separate tree of objects for layout, which is then used to manage a separate tree of objects for compositing. Flutter is, at its core, a series of mechanisms for efficiently walking the modified parts of trees, converting trees of objects into lower-level trees of objects, and propagating changes across these trees.
在Flutter中，widget（类似于React中的component）的表现是一系列用于配置对象的不可变类。 widget先是用于管理页面layout中单独的对象树，然后管理一些单独的对象树合并成一颗独立的对象树。 Flutter的核心，存在一系列机制，可以有效地遍历树的修改部分，将对象树转换为较低级别的对象树，并在这些树之间传播更改。

A widget declares its user interface by overriding the build() method, which is a function that converts state to UI:
widget 通过重写build() 方法来声明其用户界面，该方法将状态转换为UI：

UI = f(state)

The build() method is by design fast to execute and should be free of side effects, allowing it to be called by the framework whenever needed (potentially as often as once per rendered frame).
build()方法在设计成可以迅速执行，并且应无副作用，保证framework能够随性调用（每个渲染帧可能调用一次）。

This approach relies on certain characteristics of a language runtime (in particular, fast object instantiation and deletion). Fortunately, Dart is particularly well suited for this task.

这种方法依赖于编程语言 runtime 的某些特征（特别是快速对象实例化和释放删除）。 幸运的是，Dart特别适合此任务。