Flutter中的BuildContext、Element、Key和RenderObject

最新推荐文章于 2023-10-04 18:41:08 发布

unicorn97

最新推荐文章于 2023-10-04 18:41:08 发布

阅读量823

点赞数 1

分类专栏： Flutter Flutter❤️Dart 文章标签： Flutter BuildContext RenderObject

本文链接：https://blog.csdn.net/unicorn97/article/details/100077025

版权

Flutter❤️Dart 同时被 2 个专栏收录

20 篇文章 4 订阅

订阅专栏

Flutter

3 篇文章 0 订阅

订阅专栏

学习Flutter不仅仅是学各Widget的使用，能堆叠出UI就行了，要多去学习底层的一些实现原理，尽量做到知其所以然。这也是区分程序员等级的一个参考指标。

在学习Flutter过程中，对BuildContext、Key、Element、RenderObject不是很了解，搜索了一下，觉得有些博客写的还是不错的，主要是了解Flutter视图树的构建过程，希望大家都能多去看看

BuildContext

Flutter | 深入理解BuildContext

文中原文：

在Flutter中，Everything is Widget，我们通过构造函数嵌套Widget来编写UI界面。实际上，Widget并不是真正要显示在屏幕上的东西,只是一个配置信息，它永远是immutable的，并且可以在多处重复使用。那真正显示在屏幕上的视图树是什么呢？Element Tree！

这里可以知道，我们编写的Widget都会调用createElement()方法去生成对应的Element，而这个Element就实现了BuildContext接口，官方说明：

BuildContextobjects are actually Element objects. The BuildContextinterface is used to discourage direct manipulation of Element objects.
BuildContext对象实际上就是Element对象，BuildContext 接口用于阻止对 Element 对象的直接操作。

Element对象中有一个RenderObject对象，多个Element对象的RenderObject对象组成RenderObject树，最终渲染到屏幕上：
在这里插入图片描述

视图树装载过程

StatelessWidget

首先它会调用StatelessWidget的 createElement 方法，并根据这个widget生成StatelesseElement对象。
将这个StatelesseElement对象挂载到element树上。
StatelesseElement对象调用widget的build方法，并将element自身作为BuildContext传入。

StatefulWidget

首先同样也是调用StatefulWidget的 createElement方法，并根据这个widget生成StatefulElement对象，并保留widget引用。
将这个StatefulElement挂载到Element树上。
根据widget的 createState 方法创建State。
StatefulElement对象调用state的build方法，并将element自身作为BuildContext传入。

所以我们在build函数中所使用的context，正是当前widget所创建的Element对象。

在官网的另一份介绍中（暂时忘了链接了。。。）：

A BuildContext object is a handle to the location of a widget in your app’s widget tree. Each widget has its own BuildContext, which becomes the parent of the widget returned by the StatelessWidget.build or State.build function. This means the _buildTextComposer() method can access the BuildContext object from its encapsulating State object; you don’t need to pass the context to the method explicitly.

大致意思是，一个BuildContext对象是一个Widget对象在Widget树中位置的句柄（我的理解就是标记的意思）。
每个Widget对象都有自己的BuildContext，是StatelessWidget.build方法或者State.build方法返回的Widget对象的父类对象，由于可以从State对象中获取到BuildContext对象，所以通常不需要显示的将Context对象传递到Widget的build方法里。

其实该文主要讲了Build Context的来源，大致介绍了Flutter视图树的创建过程，介绍的比较简单，如果想深入了解，这里还有其他的几篇文章可以参考，

原文介绍如下：

当我们在 build 函数中使用Navigator.of(context)的时候，这个context实际上是通过 MyApp 这个widget创建出来的Element对象，而of方法向上寻找祖先节点的时候（MyApp的祖先节点）并不存在MaterialApp，也就没有它所提供的Navigator。
所以当我们把Scaffold部分拆成另外一个widget的时候，我们在FirstPage的build函数中，获得了FirstPage的BuildContext，然后向上寻找发现了MaterialApp，并找到它提供的Navigator，于是就可以愉快进行页面跳转了

其实除了把home部分单独成一个Widget外，还可以使用Builder来解决context不对的问题

Key

Flutter | 深入浅出 Key

介绍Key要从Widget的更新机制开始说起，在Widget更新的时候，会调用canUpdate(Widget oldWidget, Widget newWidget)方法来对比前后两个Widget对象，部分源码如下：

@immutable
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;
  }
}

在何时使用密钥 - Flutter小部件 101 第四集中，介绍Key对更新Widget的影响，视频中的原文：

Keys preserve state when widgets move around in your widget tree.
They can be used to preserve the user’s scroll location, or keeping state when modifying a collection.

视频中有三个部分：