Everything Widget
Widget rendering process
Flutter view of the organization of data and abstract rendering of three parts, i.e. Widget, Element and RenderObject.
Widget
Widget space is the basic logical unit implemented, which is stored configuration information for rendering the view, including layout, rendering attributes, in response to the event information and the like.
Page rendering follows the "Simple is best" (simple is the best) idea. Flutter will Widget designed immutable, when the rendering view changed configuration information, will choose the way Flutter Widget tree reconstructed data updates, in a simple and efficient way to build a data driver UI.
The disadvantage is that, because it involves the destruction and reconstruction of large numbers of objects, it will put pressure on the garbage collector. However, Widget itself does not involve the actual rendering of bitmap, so it's just a lightweight data structures, rebuilding low cost.
Further, since the immutable row Widget can be made at low cost render node reuse, thus rendering a real tree may exist in different Widget render node corresponds to a case where the same, which undoubtedly reduces the cost of rebuilding the UI .
Element
Element Widget object is an instance, which carries data to build a view of the context, is the connection configuration information to complete the final structure of the rendering bridge.
Flutter rendering process, can be in three steps:
- First, a corresponding Widget Element tree by tree;
- Then, RenderObject and create a corresponding attribute associated with the Element.renderObject;
- Finally, constructed RenderObject tree to complete the final rendering.
Element also holds Widget and RenderObject, whether or Element Widget, in fact, is not responsible for the final rendering, is only responsible for calling the shots, the real work only child RenderObject.
Why not shop and go straight from the Widget command RenderObject job, but the increase Element tree?
Widget direct command, will greatly increase rendering performance cost.
Because Widget has immutability, but the Element is immutable. In fact, Element tree this layer will change Widget tree (similar React virtual DOM diff) made abstract, you can only really need to modify part of the synchronization to real RenderObject tree, reducing modifications to the maximum extent the real rendered view, improve rendering efficiency, rather than the destruction of the entire render tree view reconstruction.
RenderObject
RenderObject is mainly responsible for implementing view rendering of objects.
Rendering the object tree in the process of Flutter show is divided into four stages, namely layout, rendering, compositing, and rendering. Wherein, layout and drawing RenderObject completed, Flutter depth-first traversal mechanism rendering object tree, determining the position and size of each object in the tree, and draw them into different layers. After drawing is completed, the synthesis and rendering work to get Skia.
Flutter by introducing Widget, Element and RenderObject these three concepts, rendering the original data from view to view the complex process of building split more simple, direct, easy centralized management at the same time, to ensure a higher rendering efficiency.
RenderObjectWidget Introduction
In Flutter, the layout and drawing work is actually done in another subclass of RenderObjectWidget Widget. RenderObjectWidget source code as follows:
abstract class RenderObjectWidget extends Widget { @override RenderObjectElement createElement(); @protected RenderObject createRenderObject(BuildContext context); @protected void updateRenderObjct(BuildContext context, covariant RenderObject renderObjct); ... } RenderObjectWidget is an abstract class. This class also has created Element, RenderObject, and the renewal of RenderObject. But in fact, it RenderObjectWidget itself is not responsible for creating and updating these objects.
For the creation of Element, Flutter will traverse the tree Widget, Widget call createElement to synchronize its configuration to generate Element object corresponding node. As for the creation and update RenderObject, in fact, it is done in RenderObjectElement class.
abstract class RenderObjectElement extends Element { RenderObject _renderObject; @override void mount(Element parent, dynamic newSlot) { super.mount(parent, newSlot); _renderObject = widget.createRenderObject(this); attachRenderObject(newSlot); _dirty = false; } @override void update(covariant RenderObjectWidget newWidget) { super.update(newWidget); widget.updateRenderObject(this, renderObject); _dirty = false; } ... } After Element is created, Flutter will call the Mount of Element method. In this method, will complete the creation of RenderObject objects associated with it, and work with the render tree is inserted, is inserted into the Element after the render tree will be displayed on the screen.
If the Widget configuration data has changed, then hold the Widget Element node will be marked as dirty. When drawing the next cycle, Flutter will trigger an update Element tree, and use the latest Widget updates its own data as well as object associated RenderObject, then we will enter the process Layout and Paint. But the real draw and layout process, it is entirely up to the RenderObject complete:
abstract class RenderObject extends AbstractNode with DiagnosticableTreeMixin implements HitTestTarget { ... void layout(Constraints constraints, {bool parentUsesSize = false}){...} void paint(PaintingContext context, Offset offset){} }