“This is the 27th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

  • The rendering principle is basically three trees,widgetThe tree,renderThe tree,elementThe tree.

1. Widget and Render trees

The Widget tree is mainly a layer upon layer of widgets that we have developed for Flutter, as shown in our previous example

Rendering widgets directly is very performance-intensive, because widgets often change and are built. Flutter actually renders the Render tree, but not all widgets inherit from renderObjectWidget. For example, Container inherits from StatelessWidget

In the inheritancewidget

Column, for example, inherits Flex

After the Flex inherits MultiChildRenderObjectWidget renderObjectWidget inheritance

Therefore, renderObject objects can only be created by inheriting renderObjectWidget and rendered directly by the rendering engine.

  • renderObjectWidget

Let’s take a look at renderObjectWidget, and we’ll focus on the following two methods, createElement, when we talk about the Element tree. See createRenderObject first

This method was implemented when we looked at Column inheriting Flex earlier, returning RenderFlex

RenderFlex inheritance RenderBox

Finally, renderObject is inherited

So rendering process: When the Widget’s object inherits renderObject, the subclass implements the parent class’s createRenderObject method to create the renderObject and add it to the Render tree for independent rendering.

2. The Element tree

Every widget object is created with an Element object, and we saw earlier that there was a createElement method in the renderObject. Inside the Flex inherits MultiChildRenderObjectWidget before us, implements the method

inheritanceRenderObjectElement

The Column we looked at earlier inherits from RenderObjectWidget. Some widgets inherit from widgets directly. If there is no renderObject, is there an Element

Every Widget creates an Element, so the Widget tree corresponds to the Element tree.

We open debug mode and create breakpoints

Skip to the next step will entermountmethods

To viewmountmethodsWe will passmountMethod takes the one that we createdelementAdded to theelementIn the tree. forrenderObjectIs it the same? Let’s look beforeThe Column of the renderObjectcreate

Is called before creationelemen.mount,Element is createdCall after completioncreateRenderObject

Create the widget first, then call createElement to create the Element, then call amount to join the Element tree. If the widget inherits renderObjectWidget, The renderObject is created in amount and then the render tree is added.

3. The Stateless Element

StatelesstheElementisStatelessElement inheritanceComponentElement

There’s the amount method, and there’s one_firstBuildThe rebuild method is called as we move on

We don’t have to worry about that, we’re going to focus on the performRebuid method, and we’re going to shift+ Command +B to see where it’s implemented.

We’ll look at the implementation mainly at the build implementation

Our StatelessElement inherits ComponentElement, and we continue to look at how subclasses implement build.

The widget here is the StatelessWidget, and this is the StatelessElement implementation build method

We render externally

4. Stateful的Element

Compared with theStatelessElementMore than a step_state = widget.createState()In creatingelementCreated at the same timestateAnd save it.

The widget and element values are assigned tostate.

The difference is that the build method is called through state, and the rest is the same as StatelessElement.

5. To summarize

Each Widget creation creates an Element object, adds the Element to the Element tree by calling createElement, and then calls the amount method, which says, If the widget inherits renderObjectWidget, it adds the Render tree after creating the renderObject in amount. Both StatelessElement and StatefulElement inherit ComponentElement and pass themselves out by calling the build method. StatefulElement has a createState addition. Draw a general flow chart: