Flutter框架分析（四）-RenderObject

1. 前言

Flutter中，RenderObject的主要职责是布局和绘制。通过上篇文章介绍的Element Tree，Flutter Framework会生成一棵RenderObject Tree. 其主要功能如下：

• 布局，从RenderBox开始，对RenderObject Tree从上至下进行布局。
• 绘制，通过Canvas对象，RenderObject可以绘制自身以及其在RenderObject Tree中的子节点。
• 点击测试，RenderObject从上至下传递点击事件，并通过其位置和behavior来控制是否响应点击事件。
  RenderObject Tree是底层的布局和绘制系统。大多数Flutter开发者并不需要直接和RenderObject Tree交互，而是使用Widget，然后Flutter Framework会自动构建RenderObject Tree。
  RenderObject拥有一个parent和一个ParentData插槽（Slot），所谓插槽，就是指预留的一个接口或位置，这个接口和位置是由其它对象来接入或占据的，这个接口或位置在软件中通常用预留变量来表示，而ParentData正是一个预留变量，它正是由parent来赋值的，parent通常会通过子RenderObject的ParentData存储一些和子元素相关的数据，如在Stack布局中，RenderStack就会将子元素的偏移数据存储在子元素的ParentData中（具体可以查看Positioned实现）。ParentData相关原理会在《Flutter框架分析（六）- Parent Data》一文中详述，感兴趣的读者可以阅读该文。

2. RenderObject分类

如上图所示，RenderObject主要分为四类：

• RenderView
  RenderView是整个RenderObject Tree的根节点，代表了整个输出界面。
• RenderAbstractViewport
  RenderAbstractViewport是一类接口，此类接口为只展示其部分内容的RenderObject设计。
• RenderSliver
  RenderSliver是所有实现了滑动效果的RenderObject基类，其常用子类有RenderSliverSingleBoxAdapter等。
• RenderBox
  RenderBox是一个采用2D笛卡尔坐标系的RenderObject的基类，一般的RenderOBject都是继承自RenderBox，例如RenderStack等，它也是一般自定义RenderObject的基类。

3. 核心流程

RenderObject主要负责布局，绘制，及命中测试，下面会对这几个核心流程分别进行讲解。

• 布局
  布局对应的函数是layout，该函数主要作用是通过上级节点传过来的Constraints和parentUsesSize等控制参数，对本节点和其子节点进行布局。Constraints是对于节点布局的约束，其原则是，Constraints向下，Sizes向上，父节点设置本节点的位置。即：

1. 一个Widget从它的父节点获取Constraints，并将其传递给子节点。
2. 该Widget对其子节点进行布局。
3. 最终，该节点告诉其父节点它的Sizes。

在接下来的文章中，我们将对该流程进行详细介绍，当前我们只需要记住该原则。

当本节点的布局依赖于其子节点的布局时，parentUsesSize的值是true，此时，子节点被标记为需要布局时，本节点也将被标记为需要布局。这样当下一帧绘制时本节点和子节点都将被重新布局。反之，如果parentUsesSize的值是false，子节点被重新布局时不需要通知本节点。

RenderObject的子类不应该直