深入Flutter (一) 积极推进“组合”方式

文章系列

深入Flutter（二） 线性时间复杂度的 build 和 layout
深入Flutter（三） Element树和RenderObject树
深入Flutter（四） Infinite scrolling – 无限滚动
深入Flutter（五） 专业化API

原文：Inside Flutter

译者额外添加flutter的渲染流程图，有助于理解本文：
图一、

图二、

Inside Flutter

This document describes the inner workings of the Flutter toolkit that make Flutter’s API possible. Because Flutter widgets are built using aggressive composition, user interfaces built with Flutter have a large number of widgets. To support this workload, Flutter uses sublinear algorithms for layout and building widgets as well as data structures that make tree surgery efficient and that have a number of constant-factor optimizations. With some additional details, this design also makes it easy for developers to create infinite scrolling lists using callbacks that build exactly those widgets that are visible to the user.

本文介绍了Flutter工具包的内部工作原理，这些工具支撑着Flutter的API的可行性。 由于Flutter widget 是倾向于使用“组合”的方式（激进的推进组合），因此使用Flutter构建的用户界面具有大量widget。 为了支持这种工作负荷，Flutter使用亚线性（sublinear）算法进行布局和构建widget及其数据结构，这些方法使树遍历（剪枝）更加高效且具有许多确定的优化。 通过其他一些额外的内容细节，此设计还使开发人员可以轻松使用 callback构建无限长的 可滚动列表（scrolling list），这些 callback将完全构建用户可见的那些widget。

Aggressive composability --激进的可组合能力

One of the most distinctive aspects of Flutter is its aggressive composability. Widgets are built by composing other widgets, which are themselves built out of progressively more basic widgets. For example, Padding is a widget rather than a property of other widgets. As a result, user interfaces built with Flutter consist of many, many widgets.
Flutter最具特色的方面之一是激进的倾向于使用组合。 widget是通过组合其他widget来构建的，这些其他widget本身是由更小更基础的widget组成的。 例如，Padding是widget，而不是其他widget的属性。 这结果，就导致Flutter构建的用户界面包含许多widget。

The widget building recursion bottoms out in RenderObjectWidgets, which are widgets that create nodes in the underlying render tree. The render tree is a data structure that stores the geometry of the user interface, which is computed during layout and used during painting and hit testing. Most Flutter developers do not author render objects directly but instead manipulate the render tree using widgets.
widget 递归调用的构建方式的底层支撑逻辑是RenderObjectWidget，RenderObjectWidget是在基础render树中创建render节点的所对应的widget。 render树是一种数据结构，用于存储用户界面的几何图形，该几何图形是在Layout期间计算的，并在Paint阶段 和 “hit testing”（一种用户手势输入事件最佳响应的策略）中使用。 大多数Flutter开发人员并不直接编写render对象，而是使用widget来操纵render树。

In order to support aggressive composability at the widget layer, Flutter uses a number of efficient algorithms and optimizations at both the widget and render tree layers, which are described in the following subsections.
为了在widget层支持“激进的组合”的能力，Flutter在widget层和render树层中都使用了许多有效的算法和优化方法，这些将在后续小节中进行介绍。