今天我们来讲讲利用Navigator来跳转页面的功能，承接上一篇flutter之从零开始搭建（一）之 BottomNavigationBar继续讲。
页面跳转是我们在入门学习的必备知识，在flutter中，路由跳转是由Navigator来操作的。
Navigator的跳转有两种，一种是显示跳转，需要我们在MaterialPageRoute中指定widget
Navigator.of(context).push(new MaterialPageRoute(builder: (context) { //指定跳转的页面 return new Demo1(); },)); 复制代码
另一种是隐身跳转，这种跳转需要先定义，后使用，跳转方式就像Arouter一样的路径方式，定义部分需要在MaterialApp下定义routes，routes就跟一个Map<path,Page>集合一样，定义好了path对应的page，那么下次跳转，我们就可以针对path去跳转了
@override Widget build(BuildContext context) { return new MaterialApp( home: new Scaffold( body: new Center(child: new RaisedButton(onPressed: _pushPage,child: new Text("跳转"))), ), //定义路由 routes: <String,WidgetBuilder>{ "/demo1":(BuildContext context)=>new Demo1(), }, ); 复制代码
跳转使用
Navigator.of(context).pushNamed("/demo1"); 复制代码
知道路由如何跳转了，那么，我们开始实战吧
实战
我们看到，路由的跳转都带着一个context参数，这其中有无数的坑需要自己去理解，接下来我会展示出来。
还是承接上一篇博文flutter之从零开始搭建（一）之 BottomNavigationBar，我们先看下MyPage页面，先给出如下代码
import 'package:flutter/material.dart'; import 'package:codelang/widget/Demo1.dart'; class MyPage extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( theme: new ThemeData( primarySwatch: Colors.blue, ), debugShowCheckedModeBanner: false, home: new PageWidget(), routes: <String,WidgetBuilder>{ "/demo1":(BuildContext context)=>new Demo1(), }, ); } } class PageWidget extends StatefulWidget { @override State<StatefulWidget> createState() { // TODO: implement createState return new PageState(); } } class PageState extends State<PageWidget> { @override Widget build(BuildContext context) { return new Scaffold( body: new Center(child: new RaisedButton(onPressed: _pushPage,child: new Text("跳转"),),), ); } _pushPage(){ // Navigator.of(context).pushNamed("/demo1"); Navigator.of(context).push(new MaterialPageRoute(builder: (context) { return new Demo1(); },)); } } 复制代码
大家整体看一下代码，其实没什么错误的地方，看起来一切都很正常，然后我们来看下效果图
what fuck!!! 跳转的页面怎么没有覆盖全屏，所以，这种方式肯定是不可取的。
我们先停下来想想，我们当前页面PageState是在PageWidget布局上面，
PageWidget还有一个上层布局叫MyPage，我们是不是可以理解为，Navigator.of(context)的这个context指向的是上层MyPage布局的context，导致了页面路由跳转是在MyPage页面进行。
那么有什么解决办法呢？既然是context原因，那么，我们必须得拿到MyPage的上一层context，我们再想想，MyPage相当于一个fragment，是由MainPage页面组成的，我们只需要拿将MainPage页面的context传递给MyPage不就行了吗？接下来开干试试。
打开
MainPage
给MyPage的构造方法传递MainPage的context
_bodys = [ new HomePage(), new ShopPage(), new MsgPage(), new MyPage(context) ]; 复制代码
打开
MyPage
MyPage拿到MainPage的parentContext，然后将parentContext传递给PageWidget，PageState可以通过widget.X的形式，可以拿到PageWidget的变量
import 'package:flutter/material.dart'; import 'package:codelang/widget/Demo1.dart'; class MyPage extends StatelessWidget { var parentContext; MyPage(this.parentContext); @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), debugShowCheckedModeBanner: false, home: new PageWidget(parentContext), routes: <String,WidgetBuilder>{ "/demo1":(BuildContext context)=>new Demo1(), }, ); } } class PageWidget extends StatefulWidget { var parentContext; PageWidget(this.parentContext); @override State<StatefulWidget> createState() { // TODO: implement createState return new PageState(); } } class PageState extends State<PageWidget> { @override Widget build(BuildContext context) { return new Scaffold( body: new Center(child: new RaisedButton(onPressed: _pushPage,child: new Text("跳转"),),), ); } _pushPage(){ // Navigator.of(widget.parentContext).pushNamed("/demo1"); Navigator.of(widget.parentContext).push(new MaterialPageRoute(builder: (context) { return new Demo1(); },)); } } 复制代码
看下效果图
嗯，很完美的解决，大家有没有看到我_pushPage方法中注释了的pushNamed方式的跳转，大家猜猜，用这种方式会不会出错？5秒钟的思考哦.
- 倒计时5s
- 倒计时4s
- 倒计时3s
- 倒计时2s
- 倒计时1s
OK，来揭晓答案，肯定是不行的，我们知道，routes的定义是在MyPage中的，而我们饿路由跳转拿到的parentContext是MainPage的，所以，会报找不到这个路由的错误，如何解决呢？我相信到这大家应该都清楚了，那就是在MainPage中去定义这个routes，具体可以看如下
class MainPage extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( debugShowCheckedModeBanner: false, routes: <String, WidgetBuilder>{ "/demo1": (BuildContext context) => new Demo1(), }, home: new MainPageWidget()); } } 复制代码
这样跳转就可以了，效果图我就不贴出来了，跟上面一样。
你以为就这样结束了？哈哈，早着呢，在写这篇博文的时候，我又发现了一个好玩的地方，为了区分，我在HomePage页面去写这个例子，代码不多，大家看看
HomePage
import 'package:flutter/material.dart'; import 'package:codelang/widget/Demo1.dart'; class HomePage extends StatefulWidget { @override State<StatefulWidget> createState() { // TODO: implement createState return new HomeState(); } } class HomeState extends State<HomePage> { @override Widget build(BuildContext context) { // TODO: implement build return new MaterialApp( debugShowCheckedModeBanner: false, home: new Scaffold( body: new Center(child: new RaisedButton(onPressed: _pushPage,child: new Text("跳转"))), ), ); } _pushPage() { // Navigator.of(context).pushNamed("/demo1"); Navigator.of(context).push(new MaterialPageRoute(builder: (context) { return new Demo1(); },)); } } 复制代码
在这个路由跳转中，我用了context来跳转，大家再猜猜，这种方式可以嘛？5秒钟的思考时间
- 倒计时5s
- 倒计时4s
- 倒计时3s
- 倒计时2s
- 倒计时1s
答案揭晓，是可以的哦，为什么这样又可以了呢？
HomePage与MyPage的区别在于定义这个widget时，MyPage最外套的一层是StatelessWidget，而HomePage最外套的一层是StatefulWidget，StatelessWidget是一个无状态的widget，难道是他阻隔了context的传递？具体的我也不清楚，只能去猜。
大家再猜猜还是那段注释了的pushNamed的代码，可不可以跳转呢？哈哈，当然是可以的，因为我们在前面的时候，就已经在mainPage中定义了routes
好了，路由这篇说完了，唯一坑就是context的问题，看了这一篇，相信很多人都理解了Navigator如何跳转，下一篇再见吧
