Flutter | 深入理解BuildContext

Vadaski發表於2019-02-15
FlutterUIContext

前言

最近看到一些剛接觸Flutter的同學在進行頁面跳轉的時候，出現了這個問題。

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.
複製程式碼

程式碼是這樣的

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(),
    );
  }
}
複製程式碼

一眼看上去好像沒什麼問題，解決方式也很簡單，把home部分作為一個新的Widget拆出來就可以了。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: FlatButton(
              onPressed: () {
                Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => SecondPage()));
              },
              child: Text('跳轉')),
        ),
      );
  }
}
複製程式碼

但是剛開始遇到這些東西的時候一定是很懵逼的。BuildContext是什麼鬼，為什麼每次我們需要在build函式的時候傳入一個BuildContext？為什麼我的Navigator操作會出現當前的context找不到Navigator的情況，為什麼拆成新的widget就好了？

所以今天想順著這個問題跟大家分享一下如何在Flutter中理解和使用BuildContext。其中還會涉及到一些widget構建流程的地方，在正式開始之前先簡單解釋一下這幾個概念。

什麼是Navigator，MaterialApp做了什麼

我們經常會在應用中開啟許多頁面，當我們返回的時候，它會先後退到上一個開啟的頁面，然後一層一層後退，沒錯這就是一個堆疊。而在Flutter中，則是由Navigator來負責管理維護這些頁面堆疊。

壓一個新的頁面到螢幕上
Navigator.of(context).push
把路由頂層的頁面移除
Navigator.of(context).pop
複製程式碼

通常我們我們在構建應用的時候並沒有手動去建立一個Navigator，也能進行頁面導航，這又是為什麼呢。

沒錯，這個Navigator正是MaterialApp為我們提供的。但是如果home，routes，onGenerateRoute和onUnknownRoute都為null，並且builder不為null，MaterialApp則不會建立任何Navigator。

知道了Navigator和MaterialApp發揮的作用之後，我們再來看看BuildContext。

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 Element objects. The BuildContextinterface is used to discourage direct manipulation of Element objects.

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之後才可以使用這些方法。

回顧問題

我們現在再來看看之前遇到的 當前 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，於是就可以愉快進行頁面跳轉了。

參考資料

  • Flutter Widgets101：Flutter團隊官方視訊，介紹了statelessWidget與StatefulWidget究竟是怎麼被建立的，推薦觀看。

寫在最後

我這拖延症晚期患者之前有段時間個人事務特別忙就斷更了，沒想到一水就是整整3個月，看到大佬們都這麼努力，想想這樣下去真的太鹹魚了，所以終於又繼續開始更部落格啦。?

文章若有不對之處還請各位高手指出，歡迎在下方評論區以及我的郵箱1652219550a@gmail.com留言，我會在24小時內與您聯絡！

下一篇是啥還沒有想好，可能是一個實戰系列，反正，大家多多滋瓷啦。?

相關文章