Flutter – 什么是Widget，RenderObject和Element

原文在这里。

本文详细解释了如何把Widget转化成了屏幕上的一个个像素点

想要成为一个更好的开发，了解底层的实现技术几乎是必不可少的。你可以更容易的创建自定义的布局和特效，如果你学习了这些底层技术是如何工作的。也可以让少在电脑前加几个晚上的班。

本文的目的就是要介绍Flutter之下的技术，并让你理解他们的是如何运行的。

## 我们现在开始

你也许已经知道如何使用StatelessWidget和StatefulWidget。但是这些Widget只是把其他的Widget组合到了一起。在屏幕加上的布局和绘制是发生在别的地方的。

**我强烈建议你打开你最心爱的编辑工具，然后跟着本文一步一步的查看实际代码是如何实现的并一路“原来如此”过去。、

## Opacity组件
从Opacity这个组件开始是最好不过了。这个Widget足够的简单，而且是一个绝佳的例子。

它只接受一个子组件。因此你可以把任何一个widget放进Opacity里改变其显示。另外还有一个值opacity，在0.0和1.0之间。它用来控制透明度。

Opacity是SingleChildRenderObjectWidget的子类。继承的路径是这样的：

Opacity -> SingleChildRenderObjectWidget -> RenderObjectWidget -> Widget。

而StatelessWidget和StatefulWidget是这样的继承路径：

StatelessWidget/StatefulWidget -> Widget

不同之处就在于StatelessWidget和StatefulWidget只是把不同的组件(Widget)组合在一起，而Opacity组件会控制一个组件如何绘制。

但是如果你想从Opacity的代码里找到一些绘制像素的线索，这几乎是徒劳的。这是因为一个Widget只包含了配置信息，比如Opacity组件只包含了一个opacity的值。

这就是为什么你可以在一个组件的build方法里创建新的Widget，里面并不会包含耗费资源的构建组件的代码，仅仅是包含了一些构建需要的信息。

绘制

绘制的时候会发生什么呢？

RenderObject

绘制都在RenderObject里进行。这个单从名称里也可以知道了。Opacit组件这样创建和更新RenderObject：

@override
RenderOpacity createRenderObject(BuildContext context) => new RenderOpacity(opacity: opacity);

@override
void updateRenderObject(BuildContext context, RenderOpacity renderObject) {
  renderObject.opacity = opacity;
}

RenderOpacity

Opacity组件把自身的size和子组件的size设定成一样的值。它基本上和它子组件的每一方面都一样，除了绘制。在绘制子组件之前添加了opacity值。

在这个情况下, RenderOpacity需要实现所有的方法(比如，执行布局、碰撞检测和计算size)然后交给子类去执行具体的工作。

RenderOpacity继承了RenderProxyBox(这个类mixin了一些其他 的类)。这些类都分别实现了上面提到的那些方法。

double get opacity => _opacity;
double _opacity;
set opacity(double value) {
  _opacity = value;
  markNeedsPaint();
}

我(作者)删除了大部分的代码，要看全部代码可以在这里看。

getter把私有的值暴露出去。setter里面会调用markNeedsPaint()或者markNeedsLayout()。就如名字所言，它会通知系统“这个组件发生了改变，需要重绘或者重新布局”

在RenderOpacity里面还有如下的代码：

@override
void paint(PaintingContext context, Offset offset) {
    context.pushOpacity(offset, _alpha, super.paint);
}

PaintingContext就是一个画布。在这个画布上有一个方法叫做pushOpacity！

这一行就是opacity的具体实现。

回顾

• Opacity不是一个StatelessWidget或者StatefullWidget而是一个SingleChildRendeObjectWidget。
• 组件只包含了绘制的时候需要用到的信息。比如，Opacity组件包含了一个opacity值。
• RenderOpacity，继承自RenderProxyBox，执行了具体的布局和绘制动作
• 因为Opacity组件和它的子组件基本上完全一样，所以它代理了其子组件的所有方法
• 它override了绘制(paint)方法，这个方法会给Opacity的子组件添加一个特定的opacity值

就这样了么？

记住组件(widget)只不过是一个配置，RenderObject才是管理布局和绘制的。

在Flutter里，你基本上一直都会创建新的Widget，当build()方法被调用的时候你就创建了一大堆的组件。当某些变化发生的时候，build方法基本上都会被调用。比如一个动画里，build方法更会被经常调用。最好是不要每次都重新绘制整个子树，更新会更好一些。

你不能获得一个组件在屏幕上的大小或者位置，因为一个组件姿势一个蓝图，并不是实际绘制在界面上的。它只包含了render object需要用的信息。

Element

Element是一个组件树的实际组件。

发生了什么

第一次一个组件被创建的时候，会有一个Element被创建，并且两者互相关联。之后这个element被插入到了一个树里。如果组件(widget)发生了更改，它会和旧的组件对比，并对应的更新element。最重要的是在这个时候element不会重新创建，只会被更新。

Element是flutter核心的一部分，不过现在不需要知道更多的内容。这些就足够了。

Opacity组件的Element是在哪里创建的

请好奇的同学看过来。在SingleChildRenderObectWidget里

@override
SingleChildRenderObjectElement createElement() => new SingleChildRenderObjectElement(this);

SingleChildRenderObjectElement也只是一个有一个child的Element。

Element创建RenderObject

如果是Element创建了RenderObject，那么Opacity组件的RenderObject怎么是自己创建的呢？

基本上是因为Opacity组件只是需要一个RenderObject但是不需要一个定制的Element。

看下面的代码：

SingleChildRenderObjectElement(SingleChildRenderObjectWidget widget) : super(widget);

SingleChildRenderObjectElement有一个RenderObjectWidget的引用(这里也包含了创建RenderObject的方法)。

在RenderObjectElement#mount方法里element被插入到了element树里：

@override
void mount(Element parent, dynamic newSlot) {
  super.mount(parent, newSlot);
  _renderObject = widget.createRenderObject(this);
  attachRenderObject(newSlot);
  _dirty = false;
}

在Element挂载的时候，它才会让组件创建一个render object。

最后

这就是Opacity组件工作的原理。

我的目标是用这篇文章来介绍组件之下的原理。还有很多的内容没有覆盖到，但是我希望这篇文章至少可以让你初窥门径。

作者：小红星闪啊闪

原文地址：https://segmentfault.com/a/1190000022544863

喜欢 0