经过解决一个flutter的路由错误来深刻理解BuildContext

前言

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

代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget 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 {
  @override
  Widget 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 {
  @override
  Widget build(BuildContext context){
    return new MaterialApp(
      title: 'Test Flutter',
      home: new MyHomeWidget(),
    );
  }
}

class MyHomeWidget extends StatelessWidget {
  @override
  Widget 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 {
  @override
  Widget 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);
  @override
  StatelessElement 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);

  @override
  StatelessWidget get widget => super.widget;

  @override
  Widget build() => widget.build(this);

  @override
  void 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,
    }) {
//关键代码-----------------------------------------v
    
    final 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) → InheritedElement

ancestorRenderObjectOfType(TypeMatcher matcher) → RenderObject

ancestorStateOfType(TypeMatcher matcher) → State

ancestorWidgetOfExactType(Type targetType) → Widget

findRenderObject() → RenderObject

inheritFromElement(InheritedElement ancestor, { Object aspect }) → InheritedWidget

inheritFromWidgetOfExactType(Type targetType, { Object aspect }) → InheritedWidget

rootAncestorStateOfType(TypeMatcher matcher) → State

visitAncestorElements(bool visitor(Element element)) → void

visitChildElements(ElementVisitor visitor) → void

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