概述
[BuildContext] objects are actually [Element] objects. The [BuildContext] ,interface is used to discourage direct manipulation of [Element] objects.
翻译过来的意思就是 [BuildContext] 对象实际上是 [Element] 对象。 [BuildContext] 接口用于阻止直接操作 [Element] 对象。
根据官方的注释，我们可以知道 BuildContext 实际上就是 Element 对象，主要是为了防止开发者直接操作 Element 对象。通过源码我们也可以看到 Element 是实现了 BuildContext 这个抽象类
abstract class Element extends DiagnosticableTree implements BuildContext {}
BuildContext 的作用
在之前的一篇文章中讲过 Element 和 Widget 对应的关系，不太清楚的可以看一下
Element 是 Widget 树中特定位置所对应的实例，Widget 的状态都会保存在 Element 当中。
那么 BuildContext 到底能干什么呢？只要是 Element 能做的事情，BuildContext 基本都能做，如：
var size = (context.findRenderObjec var size = (context.findRenderObject() as RenderBox).size;
var local = (context.findRenderObject() as RenderBox).localToGlobal;
var widget = context.widget;t() as RenderBox).size;
例如上面通过 context 之前获取到宽高度，距离左上角的偏移，element 对应的 widget 等
因为 Elment 是继承自 BuildContext ，我们甚至可以通过 context 来直接刷新 Element 的状态，如下：
(context as Element).markNeedsBuild();
这样就可以直接对当前的 Element 进行刷新，而不必去通过 SetState，但是这种做法是极其的不推荐的。
其实在 SetState 中，最终也是调用的 markNeedsBuild 方法，如下：
void setState(VoidCallback fn) {
assert(fn != null);
assert(() {
if (_debugLifecycleState == _StateLifecycle.defunct) {
///......
}
if (_debugLifecycleState == _StateLifecycle.created && !mounted) {
///......
}
return true;
}());
final dynamic result = fn() as dynamic;
assert(() {
if (result is Future) {
///......
]);
}
return true;
}());
///最终调用
_element!.markNeedsBuild();
}
我们在写代码的过程中还会发现一个问题，就是要更新的状态不是必须要写在 setState 里面，只要写在 setState 上面 即可，这样也没有问题，例如有些其他的响应式框架就没有这个回调，只提供了一个通知页面刷新的方法，早期的 flutter 也是如此。但是最后发现了这个问题的弊端了，如大多数人会在每个方法的后面加一个 setState，导致过度的开销，并且在删除的时候也是不知道这个这个 setState 到底有没有实际的意义，这就会造成一些不必要的麻烦。
所以 Flutter 在 setState 中加了一个回调，我们可以需要更新的状态直接放在回调里面，和状态没关系的放在外边即可。
常见的一些方法
-
(context as Element).findAncestorStateOfType()
沿着当前的 Element 向上寻找，直到直到一个特定的类型之后，将他的 State 返回
-
(context as Element).findRenderObject()
获取 Element 渲染的对象
-
(context as Element).findAncestorRenderObjectOfType()
向上遍历，获取与泛型对应的渲染对象
-
(context as Element).findAncestorWidgetOfExactType()
遍历，获取与 T 对应的 Widget
上面这些方法在源码中还是有一些使用的栗子的，例如：
- Scaffold.of(context).showSnackBar()
在 Scaffold 的底部显示一个 SnackBar
static ScaffoldState of(BuildContext context) {
assert(context != null);
final ScaffoldState? result = context.findAncestorStateOfType<ScaffoldState>();
if (result != null)
return result;
//......
}
查看 of 方法，可以发现，里面使用的就是 findAncestorStateOfType 方法来获取的 Scaffold 的状态，最终来实现一些操作，
-
Theme.of(context).accentColor
我们可以通过如上的方法来获取一下主题颜色等，其内部实现如下：
static ThemeData of(BuildContext context) { final _InheritedTheme? inheritedTheme = context.dependOnInheritedWidgetOfExactType<_InheritedTheme>(); final MaterialLocalizations? localizations = Localizations.of<MaterialLocalizations>(context, MaterialLocalizations); final ScriptCategory category = localizations?.scriptCategory ?? ScriptCategory.englishLike; final ThemeData theme = inheritedTheme?.theme.data ?? _kFallbackTheme; return ThemeData.localize(theme, theme.typography.geometryThemeFor(category)); }它和上面的一样，也是找到离你最近的 _InheritedTheme，最后再将它还给你
栗子
写一个侧滑栏，通过点击按钮来实现打开 侧滑栏
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
drawer: Drawer(),
floatingActionButton: FloatingActionButton(onPressed: () {
Scaffold.of(context).openDrawer();
}),
);
}
}
运行代码，就会发现报错：Scaffold.of() called with a context that does not contain a Scaffold.
意思就是当前的 context 里面没有找到 Drawer，所以无法打开。
为什么呢？ 因为这个 context 是当前 MyHomePage 这个层级的，在他的上层确实没有 Drawer，所以自然也就没有办法打开了。 那么如何解决呢？如下：
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
drawer: Drawer(),
floatingActionButton: Floating());
}
}
class Floating extends StatelessWidget {
@override
Widget build(BuildContext context) {
return FloatingActionButton(onPressed: () {
Scaffold.of(context).openDrawer();
});
}
}
修改为如上代码即可解决。
在 Floating 中的 context 是 MyHomePage 下面的层级，所以说他的上级时候 Scaffold 的，自然也就不会报错了。
但是一般这种情况下，我们是不用多创建一个组件的，所以我们还需要一个更好的解决方案，如下：
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
drawer: Drawer(),
floatingActionButton: Builder(
builder: (context) {
return FloatingActionButton(onPressed: () {
Scaffold.of(context).openDrawer();
});
},
));
}
}
我们可以通过 Builder 来创建一个匿名的组件就可以了。
参考文献
B站王叔不秃
如果本文有帮助到你的地方，不胜荣幸，如有文章中有错误和疑问，欢迎大家提出!
