第十二回：如何使用Route和Navigator

我们在上一章回中介绍了Widget的State,本章回中将介绍Route和Navigator，闲话休提，让我们一起Talk Flutter吧。

概念介绍

到目前为止，我们介绍的内容都在一个页面中，本章回中将介绍中在Flutter中如何进行页面切换，这里说的页面切换和Android中的Activity之间切换或者IOS中的UIViewController之间的切换完全相同。

Flutter提供了Router和Navigator这两个类来实现页面之间的跳转。我觉得Flutter的页面跳转和IOS类似：提供了专门的页面跳转管理类,这个管理类在IOS中是UINavigationController,在Flutter中是Navigator.

使用方法

Router是一个抽象类，我们无法直接使用，常用的是它的子类PageRoute或者基于Android设计风格的MaterialPageRoute。Navigator提供了两个方法push和pop。

• push()方法实现页面跳转功能；
• pop()方法实现页面返回功能；

在这两个方法中需要使用Router类的参数当作页面跳转的对象。下面是这两个方法的原型：

  static Future<T?> push<T extends Object?>(BuildContext context, Route<T> route) {}
  static void pop<T extends Object?>(BuildContext context, [ T? result ]) {}

示例代码

我们先创建了一个叫名SecondRouter的页面，该页面使用的ScaffoldWidget，因此它的顶部是AppBar,AppBar中自带返回箭头，点击返回前头后自动返回到上一个页面中。该页面的中间是一个OutlineButton，该Button上显示Back文字，点击该Button也可以返回到上一个页面。该页面的详细代码如下：

class SecondRouter extends StatelessWidget {
  const SecondRouter({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return Scaffold(
      appBar: AppBar(
        title: const Text("This is the second page"),
        backgroundColor: Colors.purpleAccent,
      ),
      body: OutlinedButton(
        onPressed: (){
          Navigator.pop(context,
              MaterialPageRoute(builder: (context){
                return const HelloApp();
              })
          );
        },
        child: const Text("Back"),
      ),
    );
  }
}

接着我们在程序的主页面中使用Router和Navigator来实现页面跳转功能，详细的代码如下：

class StatefulAppEx extends StatefulWidget {
  const StatefulAppEx({super.key});
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _StatefulAppEx();
  }
}

class _StatefulAppEx extends State<StatefulAppEx> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: OutlinedButton(
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) {
                  return const SecondRouter();
                })
            );
          },
          child: const Text("Go to Another Widget"),
        ),
      ),
    );
  }
}

在上面的代码中我们通过push()方法跳转到了刚才定义的SecondRouter页面中，该方法的第二个参数是Router类的子类MaterialPageRoute，该类提供了build必选参数，把跳转的widget赋值给该参数后就可以实现跳转功能，注意赋值时使用了匿名函数（类似Java中的lambda表达式）。

在上面的代码中我们把push方法的内容都放到了Button的响应事件中(onPressed()方法)，点击Button后就可以跳转到第二个页面中。再回头看看第二个页面的代码，也使用类似的代码实现了跳转功能，不过它是从自己返回到主页面中，跳转的方法使用了pop，其实使用push方法也可以。

最后强调一下：在使用Navigator和Router实现页面跳转功能时需要把它们放到页面相关的Widget中，也就是StatelessWidget或者StatefullWidget类以及它们的子类，因为这些类提供了build方法，该方法中包含的Context参数是页面跳转必不可以少的内容，否则程序就会报以下错误：

Navigator operation requested with a context that does not include a Navigator.

看官们，关于Route和Navigator的内容就介绍到这里，欢迎大家在评论区交流与讨论!