【Flutter学习】一些重要的概念之of(context)方法

lxlx1798 2021-09-08 原文

在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之后才可以使用这些方法。

回顾问题
我们现在再来看看之前遇到的当前 context 不包含 Navigator 这个问题是不是很简单了呢。

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(\'跳转\')),
  ),
),
);
}
}

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