Widget

  • Widgets are Element’s configuration files, are immutable, all properties must be final, and can be rendered across frames with state retention.
  • A Widget can be inserted into the Widget tree multiple times to generate multiple elements.

Element

  • There are two types of Elements, ComponentElement and RenderObjectElement. ComponentElement is used to compose other elements, not directly generate renderObjects.
  • A RenderObjectElement is associated with a RenderObject.
  • An Element usually has only one child, and RenderObjectElement subclasses can have multiple.

Element’s life cycle:

  1. Widget.createelement () generates an Element.
  2. Element.mount () to mount this element to the specified location in the tree. When mount, the Child’s inflatWidget is called and the RenderObject is generated. The mount method sets active to true.
Element inflatWidget(Widget newWidget, dynamic newSlot){ ... Element newChild = newWidget.createElement(); newChild.mount(this, newSlot); . }Copy the code
  1. Update is called when a configuration file widget changes.
  2. The parent Element calls deactivateChild to remove Element’s renderObject and add Element to owner’s Inactive Elements list. When added to the list, element’s deactivate method is called with active set to false.
  3. If an Element needs to be reactivated on Inactive time, for example, if it or its parent class has a GlobalKey reused, the element will be removed from owner’s Inactive Elements list and Element’s activate will be called. Rebind the renderObject.
  4. When inactive, element will be unmounted in buildOwner. FinalizeTree if it remains inactive by the end of the current frame. State.dispose () is called at this point.
//WidgetsBinding drawFrame()
void drawFrame(){
    ...
    buildOwner.buildScope(renderViewElement);
    super.drawFrame();
    buildOwner.finalizeTree();
}
Copy the code

RenderObject

  • The RenderObject is the actual rendering content of a Flutter.
  • RenderObject has Parent and slot, and Parent can store parentData in slot, such as location, index, etc.
  • RenderBox implements a Cartesian coordinate system for layout.

Layer

  • The markNeedsAddToScene flag is called when the Layer property is modified and needs to be recomposed.

SetState () process

  1. Element. markNeedsBuild adds Element to BuildOwner’s _dirtyElements list;
  2. BuildOwner’s _handleBuildScheduled call to window.scheduleFrame triggers a redraw;
  3. PersistentFrameCallback added to RenderBinding calls drawFrame() when redrawn;
  4. In WidgetsBinding. DrawFrame (), call buildOwner. BuildScope (renderViewElement);
  5. BuildScope calls rebuild() for all dirtyElements;
    • In performRebuild for ComponentElement, call build() and updateChild() to generate the Element tree.
    • RenderObjectElement performRebuild, call widget. The updated renderObject updateRenderObject. When a renderObject is updated, the renderObject calls markNeedsLayout or markNeedsPaint.

    For example, in counter Demo,

    set text(InlineSpan value) {
  switch(_textPainter.text! .compareTo(value)) { ...case RenderComparison.layout:
    _textPainter.text = value;
    _overflowShader = null;
    _extractPlaceholderSpans(value);
    markNeedsLayout();
    break; }}Copy the code
  6. MarkNeedsLayout sets _needsLayout of relayoutBoundary to true and adds it to nodesNeedingLayout of pipelineOwner.
  7. _layoutWithoutResize calls performLayout() and markNeedsPaint();
  8. PipelineOwner. FlushLayout call all through added markNeedsLayout _nodesNeedingLayout _layoutWithoutResize method to layout;
  9. PipelineOwner. FlushCompositingBits call all add into _nodesNeedingCompositingBitsUpdate markNeedsCompositingBitsUpdate way _updateCompositingBits, which recalculates the needsCompositing attribute of the renderObject.
  10. Pipelineowner. flushPaint handles all operations added to _nodesNeedingPaint via markNeedsPaint. Call PaintingContext. RepaintCompositedChild (node), otherwise call node. _skippedPaintingOnLayer () will be the top repaintboundary marked as dirty.
  11. RenderView.com positeFrame () the tree layer to the engine map image.