flutter --路由管理--跳转页面且传值的方式

在 Flutter 中，页面之间的跳转是通过 Route 和 Navigator 来管理的：
Route 是页面的抽象，主要负责创建对应的界面，接收参数，响应 Navigator 打开和关闭；
而 Navigator 则会维护一个路由栈管理 Route，Route 打开即入栈，Route 关闭即出栈，还可以直接替换栈内的某一个 Route。而根据是否需要提前注册页面标识符，

Flutter 中的路由管理可以分为两种方式：基本路由。无需提前注册，在页面切换时需要自己构造页面实例。命名路由。需要提前注册页面标识符，在页面切换时通过标识符直接打开新的路由。

第一种：基本路由–跳转页面且传递数据

跳转页面的触发

                    //导航到新路由
Navigator.push(context, MaterialPageRoute(builder: (context) {
       // 创建对象，且赋值
   return newRoute(text: "this is my new page");
     

新的页面

import 'package:flutter/material.dart';

class newRoute extends StatefulWidget {
  String text;// 接收新的数据内容

  newRoute({Key key,this.text});

  @override
  _newRouteState createState() => _newRouteState();
}

class _newRouteState extends State<newRoute> {

  String text=null;
  @override
  void initState() {
    // TODO: implement initState
    if(text==null){// 赋值

      text = widget.text;
    }
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("New route"),
      ),
      body: Center(
        child: Text(text),// 展示内容
	//RaisedButton( 也可以使用Navigator.pop关闭本页面，也叫退栈
	// 回退页面 onPressed: ()=> Navigator.pop(context) );
      ),
    );
  }
}

第二种：命名路由

通过名字来指定页面切换，我们必须先给应用程序 MaterialApp 提供一个页面名称映射规则，即路由表 routes，这样 Flutter 才知道名字与页面 Widget 的对应关系。路由表实际上是一个 Map，其中 key 值对应页面名字，而 value 值则是一个 WidgetBuilder 回调函数，我们需要在这个函数中创建对应的页面。而一旦在路由表中定义好了页面名字，我们就可以使用 Navigator.pushNamed 来打开页面了。

MaterialApp(
    ...
    //注册路由
    routes:{
      "second_page":(context)=>SecondPage(),
    },
);
//打开页面时传递字符串参数
Navigator.of(context).pushNamed("second_page", arguments: "Hey");
//使用名字打开页面
Navigator.pushNamed(context,"second_page");

//新的页面里获取数据
class SecondPage extends StatelessWidget { 
@override
 Widget build(BuildContext context) {
 //取出路由参数 
 String msg = ModalRoute.of(context).settings.arguments as String; 	     return Text(msg); 
 }
 }

由于路由信息都是字符串，有可能导致打不开页面的情况。Flutter 提供了 UnknownRoute 属性，我们可以对未知的路由标识符进行统一的页面跳转处理

MaterialApp(
    ...
    //注册路由
    routes:{
      "second_page":(context)=>SecondPage(),
    },
    //错误路由处理，统一返回UnknownPage
    onUnknownRoute: (RouteSettings setting) => MaterialPageRoute(builder: (context) => UnknownPage()),
);

//使用错误名字打开页面
Navigator.pushNamed(context,"unknown_page");

页面数据的回调

类似于android中页面跳转后关闭页面的回调数据，startActivityForResult()，来看看flutter怎么处理吧！

1.首先是点击跳转

// 首先是点击跳转的添加数据content
// then  接收回调的数据_msg
   Navigator.pushNamed(context, "newroute",
                            arguments: "content")
                        .then((msg) => setState(() => _msg = msg)),

2.第二个页面关闭的处理及数据的传送

  RaisedButton(
              child:Text("回调按钮"),
              onPressed: (){
				// 将路由界面退栈，同时传送数据回去
                Navigator.pop(context,"hi!");

              },
            )