flutter BuildContext深入理解

一. 什么是BuildContext

1. buildContext是当前widget的上下文
2. Widget并不是真正要显示在屏幕上的东西,只是一个配置信息，它永远是immutable的,并且可以在多处重复使用。那真正显示在屏幕上的视图树是什么呢？Element Tree！
3. BuildContext的在StatelessWidget和StatefulWidget创建过程

// StatelessWidget

1. 首先它会调用StatelessWidget的 createElement 方法，并根据这个widget生成StatelesseElement对象。

2. 将这个StatelesseElement对象挂载到element树上。

3. StatelesseElement对象调用widget的build方法，并将element自身作为BuildContext传入。

// StatefulWidget

1. 首先同样也是调用StatefulWidget的 createElement方法，并根据这个widget生成StatefulElement对象，并保留widget引用。

2. 将这个StatefulElement挂载到Element树上。

3. 根据widget的 createState 方法创建State。

4. StatefulElement对象调用state的build方法，并将element自身作为BuildContext传入。

二. 解决了什么问题

1. 可以拿到widget的上下文,即拿到了element

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

//打开Scaffold的Drawer
Scaffold.of(context).openDrawer
//获取display1样式文字主题
Theme.of(context).textTheme.display1

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

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

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

三. 如何使用

// flutter 为我们封装了现有的这些常用方法

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

四. 注意事项

1. 在使用Navigator路由跳转时,在顶层widget中,需要重写包装一个widget

// 以下代码,在路由跳转时,会报错,找不到context

// 原因是当我们在 build 函数中使用Navigator.of(context)的时候，这个context实际上是通过 MyApp 这个widget创建出来的Element对象，而of方法向上寻找祖先节点的时候（MyApp的祖先节点）并不存在MaterialApp，也就没有它所提供的Navigator。


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: FlatButton(
              onPressed: () {
                Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => SecondPage()));
              },
              child: Text('跳转')),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
    );
  }
}

/**
flutter: Navigator operation requested with a context that does not include a Navigator.
flutter: The context used to push or pop routes from the Navigator must be that of a widget that is a
flutter: descendant of a Navigator widget.
*/

2. 解决办法

/**
所以当我们把Scaffold部分拆成另外一个widget的时候，我们在FirstPage的build函数中，获得了FirstPage的BuildContext，然后向上寻找发现了MaterialApp，并找到它提供的Navigator，于是就可以愉快进行页面跳转了
*/

五. 总结

1. BuildContext的创建原理:buildContext其实是一个Element
2. Navigator的原理 : Navigator其实是顶层MaterialApp创建的
3. of(context)的原理 : 其实就是遍历查找最近的Element tree
4. 在顶层MaterialApp中直接进行进行Navigator跳转,会保存context不存在,原因是当使用Navigator.of的时候,找不到祖先节点,因为自己本身就是祖先节点即跟节点

六. 参考

Flutter | 深入理解BuildContext