Flutte 什么是Widget，RenderObjects和Elements

有没有想过Flutter如何获取这些小部件并将其实际转换为屏幕上的像素?

您可能已经知道如何使用StatelessWidget和StatefulWidget。但是那些小部件仅构成其他小部件。布置小部件并将其渲染在其他位置进行。

不透明度(Opacity)

注：随着SDK的更新参数可能有变化

它只接受一个child。因此，您可以将任何小部件包装在中，Opacity并更改其显示方式。除child外，只有一个参数被调用opacity，该参数的值在0.0到1.0之间。它控制不透明度。

The Widget(Opacity小部件)

Opacity小部件继承了SingleChildRenderObjectWidget.

扩展类扩展的层次结构如下：

Opacity -> SingleChildRenderObjectWidget -> RenderObjectWidget -> Widget

相反，StatelessWidget和StatefulWidget如下：

StatelessWidget/StatefulWidget -> Widget

区别在于，Stateless/StatefulWidget仅构成控件，而"Opacity"控件实际上改变了控件的绘制方式

但是，如果您查看这些类中的任何一个，您将找不到与实际绘制不透明度相关的任何代码。

这是因为小部件仅保存配置信息。在这种情况下，Opacity小部件仅保留不透明度值。

这就是为什么每次调用构建函数时都可以创建新的小部件的原因。因为窗口小部件的构造并不昂贵。它们仅仅是信息的容器。

The Rendering(Opacity怎么渲染的？)

它在RenderObjects内部

RenderObject负责一些事情，包括渲染。

Opacity小部件使用这些方法创建和更新RenderObject:

  @override

  RenderObject createRenderObject(BuildContext context) {

    return RenderOpacity(opacity: opacity);

  }

  @override

  void updateRenderObject(BuildContext context, RenderOpacity renderObject) {

    renderObject..opacity = opacity;

  }

渲染不透明度

该Opacity部件尺寸本身是完全相同的大小作为其子(child)一样。它基本上模仿了孩子(child)的各个方面，除了绘画。在绘制其子项之前，先为其添加不透明度。

在这种情况下，RenderOpacity需要实现所有方法（例如执行布局/命中测试/计算大小），并要求其子级执行实际工作。

RenderOpacity扩展了RenderProxyBox。这些恰好实现了这些方法，并将实际计算推迟到了唯一的孩子。

double get opacity => _opacity;

double _opacity;

set opacity(double value) {

  _opacity = value;

  markNeedsPaint();

}

在上面的代码中删除了很多断言/优化。

字段通常向私有变量公开获取器。还有一个设置器，除了设置字段外，还调用markNeedsPaint()或markNeedsLayout()。顾名思义，它告诉系统"嘿，我改变了，请重新粉刷/重新布置我"。

在内部，RenderOpacity我们发现此方法：

@override

void paint(PaintingContext context, Offset offset) {

    context.pushOpacity(offset, _alpha, super.paint);

}

同样，删除了优化和断言。

该PaintingContext基本上是一个奇特的画布。在这个精美的画布上，有一种称为pushOpacity的方法。

这一行是实际的不透明度实现。

回顾

该Opacity不是StatelessWidget还是StatefulWidget而是一个SingleChildRenderObjectWidget。
将Widget仅持有该渲染器可以使用的信息。
在这种情况下，Opacity持有代表不透明度的双精度。
RenderOpacity，它扩展了RenderProxyBox执行实际布点/渲染等。
由于不透明度的行为与其子对象完全相同，因此它将每个方法调用都委派给该子对象。
它覆盖了paint方法，并调用pushOpacity，它将所需的不透明度添加到小部件。

请记住，小部件仅是配置，并且RenderObject仅管理布局/渲染等。

在Flutter中，您基本上总是在重新创建小部件。当您的build()方法被调用时，您将创建一堆小部件。每次更改时都会调用此构建方法。例如，当发生动画时，通常会调用build方法。这意味着您不能每次都重建整个子树。相反，您想更新它。

Element介绍:

Element是一棵大树

第一次创建窗口小部件时，它会膨胀为Element。然后将该Element插入到树中。如果该窗口小部件后来发生更改，则将其与旧窗口小部件进行比较，然后相应地更新Element。重要的是，该Element不会被重建，而只会被更新。

Element是核心框架的核心部分，显然还有更多的内容，但是目前这已经足够了。

更具体的可以看原文...