Flutter之三棵树

flutter

深入了解Flutter界面开发
帝国的纷争-Flutter-UI绘制解析
Flutter Dart Framework原理简解
Flutter 视图树
Flutter中的层级蛋糕

很好：Joey的Flutter之旅 - (3) 布局构建、渲染、绘制机制浅析

Flutter 的渲染逻辑及和 Native 通信

BuildContext

Flutter BuildContext 探究
Flutter | 深入理解BuildContext

BuildContext objects are actually Element objects. The BuildContext interface is used to discourage direct manipulation of Element objects.

BuildContext对象实际上就是Element对象，BuildContext 接口用于阻止对 Element 对象的直接操作。

每个Widget的build（BuildContext context）方法中传递的context就是实现了BuildContext接口的Element

Key

理解 Flutter 中的 Key
Flutter | 深入浅出Key

层级

Flutter之Widget层级介绍

Widget

abstract class Widget extends DiagnosticableTree {
  const Widget({ this.key });
  final Key key;
  @protected
  Element createElement();
  static bool canUpdate(Widget oldWidget, Widget newWidget) {
    return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.key;
  }
}

Widget是一个抽象类，它只有两个方法：

• createElement：该方法是一个抽象方法，需要在子类实现。顾名思义，该方法主要是创建Widget对应的Element对象。
• canUpdate：该方法主要是判断Widget是否可更新，从而判断出来Element是否可以复用。根据Widget的runtimeType与key这两个字段来判断。返回true，代表Element可以复用。

我们发现Widget并没有和RenderObject扯上关系，难道RenderObject是在Element里面创建的吗？
并不是，这就涉及到了Widget的一个子类RenderObjectWidget了

RenderObjectWidget

RenderObjectWidget是一个非常重要的类，如果不直接或间接继承该类，Widget就无法显示在界面上。

abstract class RenderObjectWidget extends Widget {
  ...
  const RenderObjectWidget({ Key key }) : super(key: key);
  /// RenderObjectWidget对应着RenderObjectElement及其子类
  @override
  RenderObjectElement createElement();
  /// 创建一个RenderObject对象
  @protected
  RenderObject createRenderObject(BuildContext context);
  /// 更新renderObject
  @protected
  void updateRenderObject(BuildContext context, covariant RenderObject renderObject) { }
  /// 将renderObject从render树中移除
  @protected
  void didUnmountRenderObject(covariant RenderObject renderObject) {}
}

RenderObjectWidget是一个继承自Widget的子类，但它比Widget多几个方法。

• createRenderObject：创建RenderObject对象，在该对象中会将视图数据绘制到不同的图层上。笔者认为它对应着Android中ViewManager的addView方法。
• updateRenderObject：更新Widget所持有的RenderObject对象。笔者认为它对应着Android中ViewManager的updateViewLayout方法。
• didUnmountRenderObject：将RenderObject对象从Render树中移除，也就是销毁RenderObject对象。笔者认为它对应着Android中ViewManager的removeView方法。

RenderObject主要是将视图绘制成不同的图层，然后再显示在屏幕上，所以：

• 只有当我们的组件直接或间接继承自RenderObjectWidget时，才会通过RenderObject来进行绘制、渲染，从而显示在屏幕上，如RichText、Row、Center等。
• 否则只是一个用来组装组件的容器，如Text、ListView等。
  

RenderObjectWidget有三个比较重要的子类：

StatelessWidget

abstract class StatelessWidget extends Widget {
  /// Initializes [key] for subclasses.
  const StatelessWidget({ Key key }) : super(key: key);
  @override
  StatelessElement createElement() => StatelessElement(this);
  @protected
  Widget build(BuildContext context);
}

StatelessWidget，我们应该无比熟悉了，

• createElement方法返回的是一个StatelessElement实例。
• 新增加了一个Widget build(BuildContext context)方法
• StatelessWidget没有生成RenderObject的方法。
  所以StatelessWidget只是个中间层，它不会显示在界面上，它需要实现build方法来返回子Widget。

StatefulWidget

abstract class StatefulWidget extends Widget {
  @override
  StatefulElement createElement() => StatefulElement(this);
  @protected
  State createState();
}

• StatefulWidget的createElement方法返回的是一个StatefulElement实例。
• 方法createState()构建对应于这个StatefulWidget的State，该方法在StatefulElement里面调用的，StatefulElement会持有State实例。
• 新增加了一个Widget build(BuildContext context)方法
• StatefulWidget没有生成RenderObject的方法。
  所以StatefulWidget只是个中间层，它不会显示在界面上，它需要实现build方法来返回子Widget。

State

abstract class State<T extends StatefulWidget> extends Diagnosticable {
  T get widget => _widget;
  T _widget;
  BuildContext get context => _element;
  StatefulElement _element;
  bool get mounted => _element != null;
  void initState() { }
  void didUpdateWidget(covariant T oldWidget) { }
  void setState(VoidCallback fn) {
    final dynamic result = fn() as dynamic;
    _element.markNeedsBuild();
  }
  void deactivate() { }
  void dispose() { }
  Widget build(BuildContext context);
  void didChangeDependencies() { }
}

从源码可见，State持有对应的Widget和Element.

• mounted，用来判断这个State是不是关联到element tree中的某个Element。如果当前State不是在mounted == true的状态，你去调用setState()是会crash的。
• initState()用来初始化State。
• didUpdateWidget(covariant T oldWidget)在这个State被换了个新的Widget以后被调用到。是的，State对应的Widget实例只要是相同类型的是可以被换来换去的。
• deactivate()在State对应的Element被从树中移除后调用，这个移除可能是暂时移除。
• dispose()在State对应的Element被从树中移除后调用，这个移除是永久移除。
• build(BuildContext context)
• didChangeDependencies()，State的依赖发生变化的时候被调用
• setState()，触发渲染

InheritedWidget

Element

abstract class Element extends DiagnosticableTree implements BuildContext {
    Element _parent;
    Widget _widget;
    BuildOwner _owner;
    dynamic _slot;
    void visitChildren(ElementVisitor visitor) { }
    Element updateChild(Element child, Widget newWidget, dynamic newSlot) {
    }
    void mount(Element parent, dynamic newSlot) {
    }
    void unmount() {
    }
    void update(covariant Widget newWidget) {
    }
    @protected
    Element inflateWidget(Widget newWidget, dynamic newSlot) {
    ...
      final Element newChild = newWidget.createElement();
      newChild.mount(this, newSlot);
      return newChild;
    }
    void markNeedsBuild() {
      if (dirty)
        return;
      _dirty = true;
      owner.scheduleBuildFor(this);
    }
    void rebuild() {
      if (!_active || !_dirty)
        return;
      performRebuild();
    }
    @protected
    void performRebuild();
}

• _parent，父节点
• _slot由父Element设置，目的是告诉当前Element在父节点的什么位置
• visitChildren()，由于Element基类不知道子类会如何管理孩子节点。所以该函数由子类实现以遍历孩子节点。
• 函数updateChild()比较重要，用来更新一个孩子节点
• mount()，新Element被实例化以后会调用该方法来把自己加入element tree。
• unmount()，要移除的时候会调用。
• markNeedsBuild()用来标记Element为“脏”(dirty)状态。表明渲染下一帧的时候这个Element需要被重建。
• rebuild()在渲染流水线的构建（build）阶段被调用。具体的重建在函数performRebuild()中，由Element子类实现

从上面代码中，我们可以发现Element在每一帧内都会在以下几种状态之间转换。

• initial：初始化状态，通过createElement方法创建了一个Elmenet对象。
• active：活动状态，通过mount方法将Elmenet对象添加到了Elmenet树中。
• inactive：等待状态，通过deactivate方法将Elmenet对象从Elmenet树中移除。
• defunct：销毁状态，通过unmount方法将Elmenet对象销毁。

ComponentElement

abstract class ComponentElement extends Element {
  ComponentElement(Widget widget) : super(widget);
  Element _child;
  @override
  void performRebuild() {
    Widget built;
    built = build();
    _child = updateChild(_child, built, slot);
  }
  Widget build();
}

ComponentElement表示当前这个Element是用来组合其他Element的，它也许你不熟悉，但是他的两个子类，你肯定知道

StatelessElement

class StatelessElement extends ComponentElement {
  @override
  Widget build() => widget.build(this);
  @override
  void update(StatelessWidget newWidget) {
    super.update(newWidget);
    _dirty = true;
    rebuild();
  }
}

其build()函数直接调用的就是StatelessWidget.build()。现在你知道你写在StatelessWidget里的build()是在哪里被调用的了吧。而且你看，build()函数的入参是this。我们都知道这个函数的入参应该是BuildContext类型的。这个入参其实就是这个StatelessElement。

StatefulElement

class StatefulElement extends ComponentElement {
  /// Creates an element that uses the given widget as its configuration.
  StatefulElement(StatefulWidget widget)
      : _state = widget.createState(),
        super(widget) {
    _state._element = this;
    _state._widget = widget;
  }
  @override
  Widget build() => state.build(this);
   @override
  void _firstBuild() {
    final dynamic debugCheckForReturnedFuture = _state.initState() 
    _state.didChangeDependencies();
    super._firstBuild();
  }
  @override
  void deactivate() {
    _state.deactivate();
    super.deactivate();
  }
  @override
  void unmount() {
    super.unmount();
    _state.dispose();
    _state._element = null;
    _state = null;
  }
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _state.didChangeDependencies();
  }
}

在StatefulElement构造的时候会调用对应StatefulWidget的createState()函数。也就是说State是在实例化StatefulElement的时候被实例化的。并且State实例会被这个StatefulElement实例持有。
从这里也可以看出为什么StatefulWidget的状态要由单独的State管理，每次刷新的时候可能会有一个新的StatefulWidget被创建，但是State实例是不变的，因为Element没有改变。

• build()函数调用的是我们熟悉的State.build(this)，入参是StatefulElement自己
• _firstBuild()，会调用State.initState()和State.didChangeDependencies()
• deactivate()里会调用State.deactivate()
• unmount()里会调用State.dispose()
• didChangeDependencies()里会调用State.didChangeDependencies()

InheritedElement

RenderObjectElement

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 unmount() {
    super.unmount();
    widget.didUnmountRenderObject(renderObject);
  }
  @override
  void update(covariant RenderObjectWidget newWidget) {
    super.update(newWidget);
    widget.updateRenderObject(this, renderObject);
    _dirty = false;
  }
  @override
  void performRebuild() {
    widget.updateRenderObject(this, renderObject);
    _dirty = false;
  }
  @protected
  void insertChildRenderObject(covariant RenderObject child, covariant dynamic slot);
  @protected
  void moveChildRenderObject(covariant RenderObject child, covariant dynamic slot);
  @protected
  void removeChildRenderObject(covariant RenderObject child);
}

• mount()被调用的时候会调用RenderObjectWidget.createRenderObject()来实例化RenderObject。
• update()和performRebuild()被调用的时候会调用RenderObjectWidget.updateRenderObject()。
• unmount()被调用的时候会调用RenderObjectWidget.didUnmountRenderObject()。

RenderObject

abstract class RenderObject extends AbstractNode with DiagnosticableTreeMixin implements HitTestTarget {
  void markNeedsLayout() {
      ...
  }
  void markNeedsPaint() {
      ...
  }
  void layout(Constraints constraints, { bool parentUsesSize = false }) {
    ...  
    if (sizedByParent) {
        performResize();
    }
    ...
    performLayout();
    ...
  }
  void performResize();
  void performLayout();
  void paint(PaintingContext context, Offset offset) { }
}

别看RenderObject源码那么多。但核心方法其实只有两个。

• layout：是一个抽象方法，在其子类中具体实现。它主要是实现界面的布局，通过该方法就会给Widget指定其在屏幕上的位置。笔者认为它对应着Android中View的layout方法。
• paint：是一个抽象方法，在其子类中具体实现。它主要是在界面上进行具体的绘制，界面上多姿多彩的界面就是通过该方法绘制的。笔者认为它对应着Android中View的draw方法。

RenderBox

RenderSliver

小结

Flutter之Element更新机制简单分析
Flutter之Widget层级介绍
Flutter框架分析（三）-- Widget，Element和RenderObject

• Widget
  
  • 仅仅存放渲染内容、视图布局信息
  • 廉价的纯对象，持有一些渲染需要的配置信息。
  • widget 的属性最好都是 immutable
• RenderObject
  
  • “渲染对象”，根据 Widget 的布局属性进行 「布局（layout）」、「绘制（ paint）」出Widget 传入的内容。
  • 相当于Android的View
  • 稳定且昂贵
• Element
  
  • 桥梁，同时持有Widget和RenderObject
  • 将不断重建的Widget转变为相对稳定的RenderObject

注意：

• 每一个Widget都有一个对应的Element
• Widget和RenderObject并不是一一对应的；RenderObject是和RenderObjectWidget一一对应的
  

布局构建的基本原理

Joey的Flutter之旅 - (3) 布局构建、渲染、绘制机制浅析

建立

1、创建两个 Widget，一个绿色的 Rectangle Widget，他携带一个 Child：一个蓝色的 Circle Widget。

2、Rectangle Widget 调用 createElement() 方法创建了自己对应的 Element。

3、Rectangle Widget 通过 createRenderObject() 创建了相应的 Render Object —— “RenderRectangle”，同时，Element 持有了两者的引用，将三者联系起来，这很重要。

4、子 Widget 即蓝色的 Circle Widget 调用 createElement() 方法创建了自己对应的 Element，通过 mount() 方法将 Element 挂载到了父 Element 上。

5、蓝色 Circle Widget 的 Render Object 也创建完成后，Element 通过自己的 attachRenderObject() 方法将 RenderCircle attach 到了 RenderRectangle 的一个 slot (插槽) 上。

更新

Widget 类型不变

这一种情形中，新的 Rectangle 和 Circle 仅仅是颜色这一属性发生了变化，Widget 的类型并没有变化，那么 Flutter 的布局会如何响应？

1、黄色 Rectangle Widget 并没有新建 Element，而是复用了之前 Rectangle 的 Element，由于 Rectangle 并没有改变 Widget 类型，所以 Element 只需要根据新的 Widget 修改自身的颜色配置参数作为新的 Widget 即可。

2、相应的，RenderRectangle 也只是做了颜色数据上的改变，并没有重新建立 Render Object。

3、最终，通过 Widget 的重建以及对应 Element 以及 Render Object 的修改完成了渲染树的重建，之后会进行具体的重绘过程。

Widget 类型改变

在这一种情形中，子 Widget 类型由 Circle 变为了 Triangle，这种情况下，Flutter 的布局重建会有怎样的变化呢？

1、由于 Rectangle Widget 类型并没有变化，所以并没有引起 Element 与 Render Object 的实际变化。Element 照常持有了新 Rectangle Widget 与 RenderRectangle 的引用。

2、此时的 Triangle Widget 由于类型发生了变化，便不能和之前一样复用 由 Rectangle 类型创建的 Element 与 Render Object 了。Element 与 Render Object 被“摘”下来，值得一提的是，Flutter 仍可以复用他们，只不过在这一流程中，他们被抛弃了。

3、Triangle Widget 重新走了一遍 createElement() 与 createRenderObject() 的流程，并且分别挂载到了父节点的 slot 上面。新的 Element 再次持有了 Triangle Widget 与 RenderTriangle 的引用。

局部更新

上面几种布局重建，需要调用 runApp() 方法进行，而且这种方式会从根节点开始进行重建，上面的例子 Widget 数量很少，所以影响不大，但是如果成百上千个 Widget，那么每次将整个 tree 重建就相当不划算了，我们希望 Flutter 能够实现局部的布局重建。

于是，熟悉的 StatefulWidget & State 的形式被设计出来了，StatefulWidget 并不是 RenderObjectWidget，也就是说，他不是用来形成具体的渲染对象的，他只是用来维持特定的 state，所以右边的渲染树中你找不到 StatefulWidget 的影子。state 是由 StatefulWidget 创建的，而其对应的 StatefulElement 会持有这个 state，所以无论StatefulWidget重建多少次，只要StatefulElement没有重建，那么state就不会改变。
调用setState()，重建开始的位置是从 StatefulWidget 往下的位置，上面的 Rectangle 并没有受影响，所以这种方式实现了布局的局部重建。

Element更新原则

我们以SingleChildRenderObjectElement为例：

class SingleChildRenderObjectElement extends RenderObjectElement {
  SingleChildRenderObjectElement(SingleChildRenderObjectWidget widget) : super(widget);
  //对应子Widget的Element对象。
  Element _child;
  @override
  void mount(Element parent, dynamic newSlot) {
    super.mount(parent, newSlot);
    //创建子child Widget对应的Element对象，第三个参数传null
    _child = updateChild(_child, widget.child, null);
  }
}

我们来看Element#updateChild()

Element updateChild(Element child, Widget newWidget, dynamic newSlot) {
    assert(() {
      if (newWidget != null && newWidget.key is GlobalKey) {
        final GlobalKey key = newWidget.key;
        key._debugReserveFor(this);
      }
      return true;
    }());
    if (newWidget == null) {
      if (child != null)
        deactivateChild(child);
      return null;
    }
    if (child != null) {
      if (child.widget == newWidget) {
        if (child.slot != newSlot)
          updateSlotForChild(child, newSlot);
        return child;
      }
      if (Widget.canUpdate(child.widget, newWidget)) {
        if (child.slot != newSlot)
          updateSlotForChild(child, newSlot);
        child.update(newWidget);
        assert(child.widget == newWidget);
        assert(() {
          child.owner._debugElementWasRebuilt(child);
          return true;
        }());
        return child;
      }
      deactivateChild(child);
      assert(child._parent == null);
    }
    return inflateWidget(newWidget, newSlot);
}

• child代表的是old Widget所对应的Element对象
• newWidget代表的是最新的widget对象
• 至于第三个 newSlot可能是一个Element（详见MultiChildRenderObjectElement的mount方法），需要注意的是对于只有一个child的Widget组件，Flutter建议slot传null Subclasses of Element that only have one child should use null for the slot for that child.

注意：child是Element对象，newWidget是Widget对象

update(newWidget)

void update(covariant Widget newWidget) {
    assert(_debugLifecycleState == _ElementLifecycle.active
        && widget != null
        && newWidget != null
        && newWidget != widget
        && depth != null
        && _active
        && Widget.canUpdate(widget, newWidget));
    _widget = newWidget;
  }

仅仅是更新了Element里面的_widget

canUpdate

该方法主要是判断Widget是否可更新，从而判断出来Element是否可以复用，如果可以复用，就调用Element#update(newWidget)来更新Element持有的Widget。

abstract class Widget extends DiagnosticableTree {
  const Widget({ this.key });
  final Key key;
  ···
  static bool canUpdate(Widget oldWidget, Widget newWidget) {
    return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.key;
  }
}

• 比较runtimeType
• 比较key

我们来看一个例子：

我们在界面是显示两个色块，然后点击fab可以切换两个色值，我们分别用StatelessWidget和StatefulWidget来实现：

StatelessWidget实现

StatelessContainer

class StatelessContainer extends StatelessWidget {
  final Color color = RandomColor().randomColor();
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: color,
    );
  }
}

我们现在将这个Widget展示到界面上:

class Screen extends StatefulWidget {
  @override
  _ScreenState createState() => _ScreenState();
}
class _ScreenState extends State<Screen> {
  List<Widget> widgets = [
    StatelessContainer(),
    StatelessContainer(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: widgets,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: switchWidget,
        child: Icon(Icons.undo),
      ),
    );
  }
  switchWidget(){
    widgets.insert(0, widgets.removeAt(1));
    setState(() {});
  }
}

StatefulWidget实现

渲染

Flutter 的渲染逻辑及和 Native 通信

拾遗

壹 Widget是immutable的，怎么更新呢？

Widget是轻量级的，就是一个简单的数据容器，每次更新的时候，Widget都会被重建，也就是重新生成一个对象实例。