从Flutter路由报错引申BuildContext详解

前言

在使用flutter路由跳转是出现如下错误：

代码：

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context){return new MaterialApp(title: 'Test Flutter',home: Scaffold(body: Center(child: FlatButton(onPressed: () {Navigator.of(context).push(MaterialPageRoute(builder: (context) => NewRouter()));},child: Text('跳转')),),),);}
}
class NewRouter extends StatelessWidget {@overrideWidget build (BuildContext context){return Scaffold(appBar: AppBar(title: Text("hahahha"),),body: Center(child: Text("new router hahah"),),);}
}

解决方案

把home部分作为一个新的Widget拆出来就可以了。

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context){return new MaterialApp(title: 'Test Flutter',home: new MyHomeWidget(),);}
}class MyHomeWidget extends StatelessWidget {@overrideWidget build(BuildContext context){return new Scaffold(appBar: AppBar(title: Text('new Flutter'),),body: new Center(child: Column(mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[Text('my first flutter app'),FlatButton(color: Colors.green,child: Text('路由跳转'),textColor: Colors.white,onPressed: () {Navigator.push(context, MaterialPageRoute(builder: (context){return NewRouter();}));},)]),),);}
}
class NewRouter extends StatelessWidget {@overrideWidget build (BuildContext context){return Scaffold(appBar: AppBar(title: Text("hahahha"),),body: Center(child: Text("new router hahah"),),);}
}

为什么我的Navigator操作会出现当前的context找不到Navigator的情况，为什么拆成新的widget就好了？

那下面就来具体分析一下

Navigator

我们经常会在应用中打开许多页面，当我们返回的时候，它会先后退到上一个打开的页面，然后一层一层后退，没错这就是一个堆栈。而在Flutter中，则是由Navigator来负责管理维护这些页面堆栈。

//压一个新的页面到屏幕上
Navigator.of(context).push
//把路由顶层的页面移除
Navigator.of(context).pop

通常我们我们在构建应用的时候并没有手动去创建一个Navigator，也能进行页面导航，这又是为什么呢。

没错，这个Navigator正是MaterialApp为我们提供的。但是如果home，routes，onGenerateRoute和onUnknownRoute都为null，并且builder不为null，MaterialApp则不会创建任何Navigator。

BuildContext

每次我们在编写界面部分代码的时候，都是在build函数中进行操作。而build函数则需要默认传入一个BuildContext。我们来看看这到底是啥

abstract class BuildContext {/// The current configuration of the [Element] that is this [BuildContext].Widget get widget;/// The [BuildOwner] for this context. The [BuildOwner] is in charge of/// managing the rendering pipeline for this context.BuildOwner get owner;...

我们可以看到BuildContext其实是一个抽象类，但是每次build函数传进来的是什么呢。我们来看看构建视图的时候到底发生了什么。

BuildContext

每次我们在编写界面部分代码的时候，都是在build函数中进行操作。而build函数则需要默认传入一个BuildContext。我们来看看这到底是啥。

abstract class BuildContext {/// The current configuration of the [Element] that is this [BuildContext].Widget get widget;/// The [BuildOwner] for this context. The [BuildOwner] is in charge of/// managing the rendering pipeline for this context.BuildOwner get owner;...

我们可以看到BuildContext其实是一个抽象类，但是每次build函数传进来的是什么呢。我们来看看构建视图的时候到底发生了什么。

Flutter如何构建视图

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

那我们来看一下，在构建视图的时候究竟发生了什么。这里以Stateless Widget为例。

abstract class StatelessWidget extends Widget {const StatelessWidget({ Key key }) : super(key: key);@overrideStatelessElement createElement() => StatelessElement(this);...

当要把这个widget装进视图树的时候，首先会去createElement，并将当前widget传给Element。

我们再来看一看这个StatelessElement是什么

class StatelessElement extends ComponentElement {/// Creates an element that uses the given widget as its configuration.StatelessElement(StatelessWidget widget) : super(widget);@overrideStatelessWidget get widget => super.widget;@overrideWidget build() => widget.build(this);@overridevoid update(StatelessWidget newWidget) {super.update(newWidget);assert(widget == newWidget);_dirty = true;rebuild();}
}

我们可以看到，通过将widget传入StatelessElement的构造函数，StatelessElement保留了widget的引用，并且将会调用build方法。

而这个build方法真正调用的则是widget的build方法，并将this，也就是该StatelessElement对象传入。我们知道，build方法需要传入的是一个BuildContext，为什么传进去了StatelessElement？于是我们继续看。

class StatelessElement extends ComponentElement
...
abstract class ComponentElement extends Element
...
abstract class Element extends DiagnosticableTree implements BuildContext

实际上是Element类实现了BuildContext，并由ComponentElement -> StatelessElement 继承。

所以我们现在再来看官方对于BuildContext的解释:

BuildContextobjects are actually Elementobjects. The BuildContextinterface is used to discourage direct manipulation of Elementobjects.

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

Cool！我们现在终于知道这个BuildContext是哪里来的了。让我们再来梳理一下，flutter构建视图究竟做了什么。

视图树装载过程

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对象。

of(context)方法

在flutter中我们经常会使用到这样的代码

//打开一个新的页面
Navigator.of(context).push
//打开Scaffold的Drawer
Scaffold.of(context).openDrawer
//获取display1样式文字主题
Theme.of(context).textTheme.display1

那么这个of(context)到底是个什么呢。我们这里以Navigator打开新页面为例。

static NavigatorState of(BuildContext context, {bool rootNavigator = false,bool nullOk = false,}) {//关键代码-----------------------------------------vfinal NavigatorState navigator = rootNavigator? context.rootAncestorStateOfType(const TypeMatcher<NavigatorState>()): context.ancestorStateOfType(const TypeMatcher<NavigatorState>());//关键代码----------------------------------------^assert(() {if (navigator == null && !nullOk) {throw FlutterError('Navigator operation requested with a context that does not include a Navigator.\n''The context used to push or pop routes from the Navigator must be that of a ''widget that is a descendant of a Navigator widget.');}return true;}());return navigator;}

可以看到，关键代码部分通过context.rootAncestorStateOfType向上遍历 Element tree，并找到最近匹配的 NavigatorState。也就是说of实际上是对context跨组件获取数据的一个封装。

而我们的Navigator的 push操作就是通过找到的 NavigatorState 来完成的。

不仅如此，BuildContext还有许多方法可以跨组件获取对象

ancestorInheritedElementForWidgetOfExactType(Type targetType) → InheritedElementancestorRenderObjectOfType(TypeMatcher matcher) → RenderObjectancestorStateOfType(TypeMatcher matcher) → StateancestorWidgetOfExactType(Type targetType) → WidgetfindRenderObject() → RenderObjectinheritFromElement(InheritedElement ancestor, { Object aspect }) → InheritedWidgetinheritFromWidgetOfExactType(Type targetType, { Object aspect }) → InheritedWidgetrootAncestorStateOfType(TypeMatcher matcher) → StatevisitAncestorElements(bool visitor(Element element)) → voidvisitChildElements(ElementVisitor visitor) → void

需要注意的是，在 State 中 initState阶段是无法跨组件拿数据的，只有在didChangeDependencies之后才可以使用这些方法。