flutter页面间跳转和传参-Navigator的使用

flutter页面间跳转和传参-Navigator的使用

概述

flutter中的默认导航分成两种，一种是命名的路由，一种是构建路由。

命名路由

这种路由需要一开始现在创建App的时候定义

new MaterialApp(
      ....
      routes: {
        "nameRoute":(BuildContext context)=>new SecondPage(),
      },
    );

然后就可以在程序中使用Navigator.pushNamed来跳转

Navigator.pushNamed(context, "nameRoute");

这种路由的缺点是不能传递参数。

构建路由

在push的时候使用自定义方法构建一个路由

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
   return new ThirdPage(title:"请输入昵称");
}))

这种方式就可以传递参数了。

1. 返回上一页并携带参数

使用Navigator的pop返回可返回上一级，并携带一个参数

Navigator.pop(context,"携带参数");

2. 接收路由返回的参数

注意push系列的方法返回值是一个Future,可以用来接收参数

Navigator.pushNamed<String>(context, "nameRoute").then( (String value){
   //处理代码
});

 Navigator.push<String>(context, new MaterialPageRoute(builder: (BuildContext context){

    return new ThirdPage(title:"请输入昵称");

  })).then( (String result){

       //处理代码

  });

3. 用于登录逻辑到进入app用户页面的逻辑

注意，在push页面时，安卓机自带的返回键使可以直接返回push前的一个页面，这样容易产生登录后又点击返回键退出登录的情况，为解决这种影响用户使用的问题，考虑使用下面给出的push方法

Navigator.pushReplacementNamed(context, '/homePage');

使用Navigator.pushReplacementNamed()可以直接替换当前页面为push进入的页面，而不是在页面栈里继续叠加，进而避免了退出登录的情况发生，而是直接退出App。

4. 使用一个页面替换当前的页面栈

在页面栈过于深入，而你需要抛弃所有的页面栈内容，并使用另一个页面进行替换时，该需求大多出现在退出登录时，避免出现明明已经退出登录，但点击返回键还可以重新进入登陆状态。

Navigator.pushNamedAndRemoveUntil(context, '/loginPage',
                            ModalRoute.withName("/loginPage"));