flutter中页面跳转之Navigator

在安卓和苹果设备上都有页面跳转的操作，flutter中是使用Navigator来管理页面之间的跳转的。在万物皆Widget的flutter中，Navigator自然也没有逃过成为一个widget的命运，它属于StatefulWidget的子类。Navigator负责管理页面的的堆栈，并提供管理堆栈的方法，像push（显示页面）、pop(关闭页面);
Navigator显示页面通常用这几种方式：
一、使用一个builder函数创建MaterialPageRoute实例，代码如下：

children: <Widget>[
        RaisedButton(
        //调用_testPush方法
          onPressed: _testPush, child: Text("跳转到第二个页面"),),
        Text(_result, style: TextStyle(fontSize: 20),)
      ],

void _testPush() {
    Navigator.push(context, new MaterialPageRoute(builder: (context) {
      return new SecondViewWidget("from first view");
      }, ),);
}

class SecondViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      return Scaffold(appBar: AppBar(title: Text("SecondViewWidget"),),
      body: Center(child: Column(
      mainAxisAlignment: MainAxisAlignment.center, children: <Widget>    [
    Text("second View", style: TextStyle(fontSize: 20, color: Colors.blue),)
    Text("$_value", style: TextStyle(fontSize: 20, color: Colors.blue),),
    RaisedButton(onPressed: _back(context), child: Text("返回上一页"),),
  ],),),);
  }
}

 _back(BuildContext context) {
    Navigator.pop(context, "hello");
  }

从上面代码可以看出，当需要从第一个页面向第二个页面传递参数时，是通过第二个页面的构造函数来传递的，这个容易理解。那么当第二个页面结束时，需要从第二个页面向第一个页面传参数时怎么做呢？当要退出页面时调用Navigator.pop(context, "hello");方法。这个方法的第二个参数就是要向上一个页面返回的结果值，返回后只需在上个页面接收就可以了。下面来看一下上一个页面是如何接收数据的：

void _testPush() async {
    String result = await Navigator.push(
      context, new MaterialPageRoute<String>(builder: (context) {
      return new SecondViewWidget("from fist value");
    }, maintainState: false),);
    if (result != null) {
      print("result:$result");
    }
}

依然是上面跳转页面的方法，区别在于等待push方法返回一个结果值，这个结果值就是第二个页面返回来的结果。

二、使用命名方式来管理页面
把页面名称使用类似路径的结构(例如，'/a/b/c')。应用程序的主页路径默认为'/'。MaterialApp可以使用Map<String, WidgetBuilder>创建，它将路由的名称映射到将创建它的builder函数。MaterialApp使用这个映射为其导航器的onGenerateRoute回调创建一个值。

class MyApp extends StatelessWidget {
// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
          title: 'Flutter Demo',
          //把所有的页面路径放到集合中
          routes: {
          "/": (BuildContext contxt) => new MyHomePage(title: "first    page"),
          "/second": (BuildContext context) => SecondViewWidget()},
          theme: ThemeData(
          primarySwatch: Colors.blue,
          ),
    //home不能与“/”混用，否则会报错的
//      home: MyHomePage(title: 'Flutter Demo Home Page'),
          );
      }
   }

    children: <Widget>[
        RaisedButton(
          onPressed: _testPush3, child: Text("跳转到第二个页面"),),
       ],

 void _testPush3() {
    Navigator.pushNamed(context, "/second", arguments: "from fistView");
  }

这种方式的跳转，页面之间的传参和第一种不太一样了Navigator.pushNamed(context, "/second", arguments: "from fistView");
arguments对应的就是要传过去的值，下面看在第二个页面中如何接收：

  class SecondViewWidget extends StatelessWidget {
      SecondViewWidget(this._value);

    String _value;

    @override
    Widget build(BuildContext context) {
        String value = ModalRoute.of(context) .settings .arguments;
        print("value:$value");
        ........
      }
    }

通过这句String value = ModalRoute.of(context) .settings .arguments;获取到值，需要注意的是value的类型需要传过来的类型一致。
从第二个页面返回数据到第一个页面的方式同上述第一种情况。

三、在安卓原生的应用中页面切换通常会加入动画，那么在flutter中也可以用PageRouteBuilder的方式来完成切换动画。有请代码君：

  void _testPush2() {
Navigator.push(context,
    new PageRouteBuilder(pageBuilder: (context, _, __) {
      return new SecondViewWidget();
    }, transitionsBuilder: (context, Animation<double> animation, _,
        Widget child) {
      return FadeTransition(opacity: animation,
          child: new RotationTransition(
            turns: Tween<double>(begin: 0.5, end: 1.0).animate(animation),
            child: child,));
    },
        transitionDuration: Duration(seconds: 1)));
}

由于是初学flutter有不对的地方，烦请大家帮忙指正，共同学习。