flutter入坑，使用Navigator跳转页面

谁践踏了优雅 2023-03-13 06:18 43阅读 0赞

import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      // 主方法
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(title: Text('Navigator跳转页面')),
            body: Center(
              child: GestureDetector(
                onTap: () {
                  Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext ctx) => FirstPage()));
                },
                child: Text('Hello World!',textDirection: TextDirection.ltr),
              ),
            ),
          )
        );
      }
    }
    
    class FirstPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.blue,
          child: GestureDetector(
            onTap: () {
              Navigator.pop(context);
            },
            child: Text('我是第二个页面',textDirection: TextDirection.ltr),
          ),
        );
      }
    }

在使用Navigator.of的时候，传入context时会报错。

> Navigator operation requested with a context that does not include a Navigator
> 
> 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.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70][]

看样子就是传入的context不对，刚入坑对BuildContext也不熟悉，只能看看BuildContext具体是什么意思了。下面是对BuildContext类的翻译，反正意思是那个意思。

> 表示了一个widget在widget树中的位置引用。
> 
> 些类提供了一组可以使用StatelessWidget.build方法和State对象方法的方法。
> 
> BuildContext对象将传入到WidgetBuilder函数里（例如StatelessWidget.build），并且可以从State.context成员变量中获取。一些静态函数（如showDialog，Theme.of等等）也采用构建上下文，以便能使用widget执行操作，或者获取给定的上下文数据。
> 
> 每个widget都有自己的BuildContext，它成为了StatelessWidget.build或State.build函数返回的widget的父级。（同样，RenderObjectWidgets的任何子代的父代）
> 
> 特别是，这意味着在build方法中，build方法的widget的构建上下文，与build方法返回的widget的构建上下文不一样。这可能会导致一些棘手的问题。例如，Theme.of(context)寻找给定上下文中最近的封装了Theme的部件。如果一个Q部件的build方法，在返回的widget树中包含了Theme部件，并将它自己的context传入Theme.of方法中，Q部件的build方法将不会找到Theme对象，相反，它会找到Q部分祖先的Theme对象。如果需要返回树的子部分的构建上下文，可以使用Builder部件：Builder本身的上下文对象将会作为参数传到Builder.builder的回调函数中。
> 
> 举例来说，在下面的代码片段中，ScaffoldState.showSnackBar方法在Scaffold部件中的Builder本身的回调函数中调用，如果不使用Builder部件，而是使用build方法的context参数，Scaffold部件不会被找到，Scaffold.of函数方法会返回null。
> 
>     @override
>       Widget build(BuildContext context) {
>         // 这里, Scaffold.of(context) 返回 null
>         return Scaffold(
>           appBar: AppBar(title: Text('Demo')),
>           body: Builder(
>             builder: (BuildContext context) {
>               return FlatButton(
>                 child: Text('BUTTON'),
>                 onPressed: () {
>                   // 这里, Scaffold.of(context) 返回当前创建的Scaffold
>                   Scaffold.of(context).showSnackBar(SnackBar(
>                     content: Text('Hello.')
>                   ));
>                 }
>               );
>             }
>           )
>         );
>       }
> 
> 随着widget在树上的移动，特定的widget的BuildContext可以随时改变位置。因为这个原因，类方法中返回的值不应该在执行单个同步方法后被缓存。
> 
> BuildContext实际上就是Element对象，BuildContext接口是用来阻止直接操作Element对象的。

其实就是讲了两种获取context的方法，一种就是widget的build方法的参数来获取，还有一种就是使用Builder部件参数的builder函数回调参数，来获取一个Builder自身的context对象。

那为什么会报错呢？我不是使用了build方法中的context对象来寻找Navigator对象了吗？回头翻看了一下Navigator.of的源码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70 2][]

这种情况应该是使用context找符合要求的祖先navigator没有找到，并且我们的MyApp还继承了StatelessWidget，所以更不符合要求了，先按照这种情况，我们将Scaffold抽出来看看。

import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      // 主方法
      @override
      Widget build(BuildContext context) {
        print(context.findRootAncestorStateOfType());
        return MaterialApp(
          home: HomePage()
        );
      }
    }
    
    class HomePage extends StatelessWidget{
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('Navigator跳转页面')),
          body: Center(
            child: GestureDetector(
              onTap: () {
                print(context.findRootAncestorStateOfType());
                Navigator.of(context,rootNavigator: true).push(MaterialPageRoute(builder: (BuildContext ctx) => FirstPage()));
              },
              child: Text('Hello World!',textDirection: TextDirection.ltr),
            ),
          ),
        );
      }
    
    }
    
    class FirstPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.blue,
          child: GestureDetector(
            onTap: () {
              Navigator.pop(context);
            },
            child: Text('我是第二个页面',textDirection: TextDirection.ltr),
          ),
        );
      }
    }

还有一种方法就是使用Builder来获取context，先上一版改过的代码：

class MyApp extends StatelessWidget {
      // 主方法
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Builder(
            builder: (context){
              // 这里使用builder回调获取Builder本身的context
              return Scaffold(
                appBar: AppBar(title: Text('Navigator跳转页面')),
                body: Center(
                  child: GestureDetector(
                    onTap: () {
                      Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext ctx) => FirstPage()));
                    },
                    child: Text('Hello World!',textDirection: TextDirection.ltr),
                  ),
                ),
              );
            },
          )
        );
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70]: /images/20230312/4ce37fda36514ffb9b2e257be6ba7d79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70 1]: /images/20230312/90e5da69bd2c4597aa03f853631da3e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70 2]: /images/20230312/617ce3807c864445a12d59d12b2467f8.png