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