Flutter之万物皆Widget（一种你没见过的方式来深入Widget）

背景

为什么说Flutter万物皆Widget？首先你要知道，Flutter是什么，它是一个现代的响应式框架、一个2D渲染引擎、现成的widget和开发工具，基于Skia，一个性能彪悍的2D图像绘制引擎，2005年被Google收购，被广泛应用于Chrome和Android之上，等等吧，说白一点，Flutter就是一个UI框架，所以说，万物皆Widget，而Widget的中文意思是小部件，它为什么不能像Android或者Ios一样叫做View呢？因为widget既可以是一个结构元素（如按钮或菜单）、也可以是一个文本样式元素（如字体或颜色方案）、布局的一个方面（如填充）等等，我们可以统筹它们为wiget，而不是view，根据基本的命名规范，这就是一种合理的命名抽象。那么接下来我们学什么？

• Widget是什么
• Widget类结构
• 跟着我实现一个widget（直接继承widget抽象类）
• Element类结构
• 深入理解Element

Widget是什么

其实上面说了，一切皆Widget，那我们可不可以认为，在flutter的框架中，用到的东西都是Widget呢，当然不是哈，由于它是基于Dart，所以有很多Dart的库，还是可以使用的，比如AES，RSA加密解密，Json序列化等等，但你可以这么说，一切构建图形相关的东西都是Widget，这就是Widget

Widget类结构

为什么说下类结构呢？类结构可以很清晰帮助我们梳理逻辑，从全局的角度看待整个结构

image

• RenderObjectWidget 看名字我们判断，它是持有RenderObject对象的Widget，而通过其他通道了解到，RenderObject实际上是完成界面的布局、测量与绘制,像Padding，Table，Align都是它的子类
• StatefulWidget 多了一个State状态的Widget，子类都是可以动态改变的如CheckBox，Switch
• StatelessWidget 就是一个普通的Widget,不可变如Icon，Text。
• ProxyWidget InheritedWidget就是它的子类，我们暂且认为它是子类能从父类拿数据的关键，以后再研究，大多数的主题都是继承自ProxyWidget

跟我一起实现一个Widget

我不想和别人的教程思路一样，既然万物皆Widget，那我们就从实现一个Widget开始，然后一步步深入，看到什么就去了解什么？来上代码

class TestWidget extends Widget{
  @override
  Element createElement() {
    // TODO: implement createElement
    throw UnimplementedError();
  }
}

创建一个TestWidget然后继承Widget，然后会让你重写函数createElement，返回一个Element，通过这个我们看的出，其实我们创建的Widget，最终肯定是创建了一个Element，那Element到底是什么呢？同样的思路，我们继承Element看一下

class TestElement extends Element{

  TestElement(Widget widget) : super(widget);

  @override
  bool get debugDoingBuild => throw UnimplementedError();

  @override
  void performRebuild() {
  }

}

多了一个构造函数，传递Widget对象，get函数debugDoingBuild，还有performRebuild函数，都是干嘛的呢？

abstract class Element extends DiagnosticableTree implements BuildContext 

abstract class BuildContext {

  /// Whether the [widget] is currently updating the widget or render tree.
  ///
  /// For [StatefulWidget]s and [StatelessWidget]s this flag is true while
  /// their respective build methods are executing.
  /// [RenderObjectWidget]s set this to true while creating or configuring their
  /// associated [RenderObject]s.
  /// Other [Widget] types may set this to true for conceptually similar phases
  /// of their lifecycle.
  ///
  /// When this is true, it is safe for [widget] to establish a dependency to an
  /// [InheritedWidget] by calling [dependOnInheritedElement] or
  /// [dependOnInheritedWidgetOfExactType].
  ///
  /// Accessing this flag in release mode is not valid.
  bool get debugDoingBuild;

经过代码的跟踪我们发现一些注解：

• Element继承自DiagnosticableTree，并实现BuildContext
• DiagnosticableTree是个