阅读 1464

Flutter必须理解Widget、Element、RenderObject的关系(一)

注意:为了让分析更加简单,和逻辑清晰,我们去掉了部分源码和注释,只留下了主要的代码和逻辑。

最近一直在研究Flutter的渲染问题,在深入探索之后发现总是绕不过三个对象分别是Widget,Element,RenderObject,那么Flutter为什么需要这三个对象,这个三个对象是什么关系?有这三个对象会提高渲染效率吗?等等这样的问题,我将在接下来的几篇文章中为大家找答案。

Widget概述

widget定义

先给出Widget的定义,可能和你之前理解的组件有一点区别,下面是Flutter对Widget的定义。

Describes the configuration for an [Element].

翻译过来的大概意思就是,"对一个Element配置的描述"。

这个概念上透露了两点细节,第一是,Widget是Element的配置描述,有人一定会问,Element是什么呢?在下面的章节中我们将详细介绍Element。第二是,Widget只是一个配置描述,不是真正的渲染对象,这里可能有点绕。举个例子,看大家能不能理解,Widget就好比是Android开发中的xml,只是描述了一些View的颜色,大小等,真正在屏幕上显示的是View。

在Flutter中,一切都是组件。在移动端开发中组件的概念很常见,比如Android的四大组件,Flutter把组件的概念发挥到了极致,在Flutter中,手势(GestureDetector)都是组件,下面是GestureDetector的源码。

class GestureDetector extends StatelessWidget {
}

abstract class StatelessWidget extends Widget {
}
复制代码

GestureDetector继承自StatelessWidget,StatelessWidget是没有状态的组件,这个类继承Widget,可以看出来GestureDetector也是Widget,接下来我们简单分析一下Widget,下面是Widget的源码。

abstract class Widget {
  const Widget({ this.key });
  final Key key;
  
  @protected
  Element createElement();//注释1
  
  static bool canUpdate(Widget oldWidget, Widget newWidget) {//注释2
   return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.key;
  }
}
复制代码

原来Widget是一个抽象类,这个类有一个构造函数,参数是一个key,这个key有一个很重要的功能,用途是比较两个Widget是不是同一个Widget,在注释2就用到了这个key。然后有两个方法,分别是createElement()和一个静态的方法canUpdate()。

  • 注释1

createElement()是一个抽象方法,子类必须实现这个方法,但是大部分我们用都是系统的Widget,比如StatefulWidget和StatelessWidget,他们都默认实现了这方法,这方法也非常简单,创建了一个Element。这里面隐含了一很重要问题的答案,开篇我们问了这样的问题,这个三个对象是什么关系?现在我们至少知道了Widget和Element的关系了,一个Widget有一个Element对象,是通过createElement()创建的

  • 注释2

canUpdate()方法很简单,就是判断oldWidget和newWidget是不是同一个Widget,如果他们的runtimeType和key相同,就认为是同一个Widget。

Widget的特性

Widget是一个很重要的概念,但是Widget有一个更重重要的特性,就是Widget是immutable(不可变的)的,这是什么意思?下面我们讲解一下,我们拿Opacity为例给大家讲解,讲解之前我们先看一下Opacity的继承关系。(在讲源码之前我们先看一下Opacity的职责是什么,Opacity是一个能让他的孩子透明的组件,很简单也很容易理解。)

class Opacity extends SingleChildRenderObjectWidget {
}

abstract class SingleChildRenderObjectWidget extends RenderObjectWidget {
}

abstract class RenderObjectWidget extends Widget {
}
复制代码

从上面可以看出来,Opacity继承自SingleChildRenderObjectWidget,这类只包含了一个child的Widget,它继承自RenderObjectWidget,RenderObjectWidget继承自Widget。下面是具体分析一下Opacity,下面是是源码。

class Opacity extends SingleChildRenderObjectWidget {
  
  const Opacity({
    Key key,
    @required this.opacity,
    Widget child,
  }) : super(key: key, child: child);
  
  final double opacity;//注释1
  
  @override
  RenderOpacity createRenderObject(BuildContext context) {//注释2
    return RenderOpacity(
      opacity: opacity
    );
  }

  @override
  void updateRenderObject(BuildContext context, RenderOpacity renderObject) {
    renderObject
      ..opacity = opacity
  }
}
复制代码
  • 注释1

在注释1处声明了一个属性,这属性是final,也就除了构造函数能给这个属性赋值之外,没有其他的办法让这个值进行改变。那我们想改变这个值怎么办,唯一的办法就是创建一个新的Opacity。

为什么这样设计呢?先透露一下这是Flutter的核心设计哲学,在接下来的章节中我们将详细为大家讲解。

总结

Widget好像是Android得一个xml配置文件,不参与真正的渲染,只是告诉渲染层我长什么样式,并且这个对象的属性是不可以改变的,要想改变只能重现创建一个对象。

Element概述

Element定义

还是老规矩,先看一下定义。

An instantiation of a [Widget] at a particular location in the tree.

翻译过来的大概意思就是,"在Element表示一个Widget树中特定位置的实例",下面我们看一下Element类的源代码。

abstract class Element extends DiagnosticableTree implements BuildContext {
   Element(Widget widget)
    : _widget = widget;//注释1
  
  @mustCallSuper
  void mount(Element parent, dynamic newSlot) {//注释2
  }
  
  Element updateChild(Element child, Widget newWidget, dynamic newSlot) {
  }
}
复制代码

上面找了2个重点的方法和1个重要的属性,其实Element的属性和方法非常多,通过构造函数可以看出来,一个Element持有一个Widget,下面我们分析一下Element的创建过程。

Element创建

通过上面的Widget概述那一节我们知道,Widget有一个抽象方法createElement(),用来创建Element的,这个方法的具体实现有很多,我们找一个上面我们分析过的SingleChildRenderObjectWidget,这个类非常简单,只有一个child,下面看一这个类的源码。

abstract class SingleChildRenderObjectWidget extends RenderObjectWidget {
  const SingleChildRenderObjectWidget({ Key key, this.child }) : super(key: key);
  final Widget child;
  @override
  SingleChildRenderObjectElement createElement()//注释1 
    => SingleChildRenderObjectElement(this); 
}
复制代码

上面已经说过这个类的继承关系,这个类继承RenderObjectWidget,构造函数也很简单,传入一个child,重要的是在注释1处,这个类创建一个类,是SingleChildRenderObjectElement,通过名字猜想,这一定是一个Element了,下面我们就分析一下SingleChildRenderObjectElement类。

这里验证了,Weight和Element的关系,一个Widget有一个Element对象,是通过createElement()创建的。

还在分析之前,我们先看一下SingleChildRenderObjectElement的继承关系,下面是SingleChildRenderObjectElement的继承关系。

class SingleChildRenderObjectElement extends RenderObjectElement {
}

abstract class RenderObjectElement extends Element {
}
复制代码

从上面的继承关系可以看出来,SingleChildRenderObjectElement继承RenderObjectElement,而RenderObjectElement是一个Element,大家是不是发现这继承关系和SingleChildRenderObjectWidget非常像,下面是SingleChildRenderObjectElement的源码。

mount方法调用

class SingleChildRenderObjectElement extends RenderObjectElement {
  SingleChildRenderObjectElement(SingleChildRenderObjectWidget widget) : super(widget);

  @override
  void mount(Element parent, dynamic newSlot) {
    super.mount(parent, newSlot);//注释2
    _child = updateChild(_child, widget.child, null);//注释1
  }
}
复制代码

构造函数比较简单,下面我们看一下看,mount方法(到这里有的人一定会问了,为什么上来就分析mount方法呢?等下一篇文章,我们分析一下Flutter的启动过程就清楚了),这个方法是当新创建的元素第一次添加到树中时,框架会调用此函数。

  • 注释1

    这方法非常关键,我们将用一个小节专门去分析,请查看updateChild分析小节。

  • 注释2

    注释2处,调用了父类的mount,我们看一下父类的mount的方法。

abstract class RenderObjectElement extends Element {
  RenderObjectElement(RenderObjectWidget widget) : super(widget);
  
  RenderObject _renderObject;//注释1

  @override
  void mount(Element parent, dynamic newSlot) {
    super.mount(parent, newSlot);
    _renderObject = widget.createRenderObject(this);//注释2
    attachRenderObject(newSlot);
    _dirty = false;
  }
}
复制代码
  • 注释1

在注释1处,我们发现RenderObjectElement还持有一个对象,这对象是RenderObject,我们好像明白了一点什么,Element分别持有Widget和RenderObject,到这里我们解答了**这个三个对象是什么关系?**的问题,一个Element包含一个RenderObject和一个Widget

  • 注释2

重点在注释2的地方,这里创建了一个RenderObject,调用的是Widget的createRenderObject方法,下面我们看一下attachRenderObject这方法,下面是attachRenderObject的源码。

abstract class RenderObjectElement extends Element {
  	@override
    void attachRenderObject(dynamic newSlot) {
      _slot = newSlot;
      _ancestorRenderObjectElement = _findAncestorRenderObjectElement();//注释1
      _ancestorRenderObjectElement?.insertChildRenderObject(renderObject, newSlot);
      if (parentDataElement != null)
      _updateParentData(parentDataElement.widget);//注释2
    }
}
复制代码
  • 注释1

注释1正如他的名字是一样的,找到了Element树上的祖先Element,如果祖先不为空,就调用insertChildRenderObject方法,这个方法的意思就是把renderObject的child替换成newSlot。

  • 注释2

用于更新布局数据的一些信息,这些信息对于后面的布局至关重要。

总结

  1. 当SingleChildRenderObjectElement被SingleChildRenderObjectWidget创建成功之后,系统会调用SingleChildRenderObjectElement的mount(),这个方法首先调用super.mount(),也就是上图的第一步。
  2. RenderObjectElement的mount()先创建了一个RenderObject对象,也就是第二步,创建这个对象是在Widget类中创建的。
  3. 第三步,就是把这个将RenderObject添加到指定的位置的渲染树中。

下篇文章的内容地址:Flutter必须理解Widget、Element、RenderObject的关系(二)

其它推荐

参考

关注下面的标签,发现更多相似文章
评论