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

從Flutter路由報錯引申BuildContext詳解

前言

解決方案

Navigator

BuildContext

BuildContext

Flutter如何構建視圖

視圖樹裝載過程

StatelessWidget

StatefulWidget

of(context)方法

Flutter Text詳解

vscode調試Flutter

從Flutter路由報錯引申BuildContext詳解

webpack4導入全局sass文件

xcode高版本常見的RN本地啓動報錯

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結