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是核心框架的核心部分,显然还有更多的内容,但是目前这已经足够了。

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

posted @ 2020-03-12 10:06  Ajanuw  阅读(277)  评论(0编辑  收藏  举报