flutter 导航以及传参方式

flutter 导航方式有基本路由和命名路由
1、基本路由

1>不带参数 直接跳转
 Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) {
                    return Login();
                  }));
2>携带参数跳转
  Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) {
                    return Login();
                  },
                  settings: RouteSettings(
                    arguments: {"title": "我可以传参"},
                  )));
在组件Login内获取参数
final args = ModalRoute.of(context).settings.arguments;

======================================
2.命名路由
2.1命名路由无参数
第一步：创建路由表

Map<String, WidgetBuilder> routers = {
  "widget_login": (context) {
    return Login();
  },
}

第二步：将路由表赋值给MaterialApp的routers

MaterialApp(//跟组件 routes 设置命名路由 根据路由名字来做跳转 
      /**
       * 这种路由方式的参数获取有两种方法 1.onGenerateRoute 这个要在跟控制器下
       *2.ModelRoute.of() 这个放在对应的组件下就行
       * 命名路由传参有四部 1、组织要传的参数 2.创建组件 3.注册组件到路由表4.导航到组件即可获取参数 
       */
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.yellow,
        ),
        home: HomePage(//home方法 同 initialRoute:'/',然后在路由表里面加上'/':(context)=>homePage();效果一样
          title: 'Flutter Demo Home Page',
        ),
          routes:routers,//如果给routers 赋值了 （如果希望用统一路由，把这句话注释，数组保留）
         //那么pushname的时候会从这个map表里面查找，如果找到key 对应的回调函数生成路由并返回（此时pushname传的参数arguments无效），如果没找到则会走onGenerateRoute。
         // 如果不给routers赋值 那么使用onGenerateRoute 可以做成统一路由(此时的pushname(arguments传参有效)，注：如果要arguments传参数的那么你的组件的构造函数里面要有arguments)
       //  onGenerateRoute: onGenerateRoute,
      ),

第三步：通过Navigator跳转到name对应的组件

Navigator.of(context).pushNamed("widget_login");

命名路由传参方式2种
2.2命名路由传参方式1
前面两步同2.1命名路由无参数
第三步：通过Navigator跳转到name对应的组件(多加一个参数如下)

Navigator.of(context).pushNamed("widget_login",arguments: {"title":"这里传参"});

参数的获取方式：

在组件Login内获取参数
class Login extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  final args = ModalRoute.of(context).settings.arguments;
    print("arguments==$args");
    return Scaffold(
      appBar: AppBar(title: Text(arguments != null ? arguments["title"]:"标题"),),
      body:  Container(
      child: Text("子标题"),
    ),
    );
  }
}

=========================================
2.2命名路由传参方式2
第一步：创建路由表

Map<String, WidgetBuilder> routers = {
  "widget_login": (context,{arguments}) {//传参需要arguments 不传承那不需要
    return Login(context,arguments: arguments);
  },
}

第二步：使用MaterialApp的onGenerateRoute 将路由表赋值给MaterialApp的routers（这里就不能给routers在赋值了，因为路由跳转先从MaterialApp的routers表里查找，如果查到了就跳转了，如果查不到才会走到这里onGenerateRoute）

MaterialApp(//跟组件 routes 设置命名路由 根据路由名字来做跳转 
      /**
       * 这种路由方式的参数获取有两种方法 1.onGenerateRoute 这个要在跟控制器下
       *2.ModelRoute.of() 这个放在对应的组件下就行
       * 命名路由传参有四部 1、组织要传的参数 2.创建组件 3.注册组件到路由表4.导航到组件即可获取参数 
       */
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.yellow,
        ),
        home: HomePage(//home方法 同 initialRoute:'/',然后在路由表里面加上'/':(context)=>homePage();效果一样
          title: 'Flutter Demo Home Page',
        ),
         // routes:routers,//如果给routers 赋值了 （如果希望用统一路由，把这句话注释，数组保留）
         //那么pushname的时候会从这个map表里面查找，如果找到key 对应的回调函数生成路由并返回（此时pushname传的参数arguments无效），如果没找到则会走onGenerateRoute。
         // 如果不给routers赋值 那么使用onGenerateRoute 可以做成统一路由(此时的pushname(arguments传参有效)，注：如果要arguments传参数的那么你的组件的构造函数里面要有arguments)
         onGenerateRoute: onGenerateRoute,
      ),

这里把onGenerateRoute抽出来

var onGenerateRoute = (RouteSettings settings) {
  final name = settings.name;
  final Function pageContentBuilder = routers[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(builder: (context) {//此处设置arguments，在key对应的映射函数中返回的组件也要吧arguments传进去
        return pageContentBuilder(context, arguments: settings.arguments);
      });
      return route;
    } else {
      final Route route = MaterialPageRoute(builder: (context) {
        return pageContentBuilder(context);
      });
      return route;
    }
  }
};

Login组件需要添加arguments参数在构造函数里面

class Login extends StatelessWidget {
 var  arguments;
  Login(BuildContext context, {this.arguments});
  @override
  Widget build(BuildContext context) {
    print("arguments==$arguments");
    return Scaffold(
      appBar: AppBar(title: Text(arguments != null ? arguments["title"]:"标题"),),
      body:  Container(
      child: Text("子标题"),
    ),
    );
  }
}

第三步：通过Navigator跳转到name对应的组件(多加一个参数如下)

Navigator.of(context).pushNamed("widget_login",arguments: {"title":"这里传参"});

=========================================
路由替换

Navigator.pushReplacementNamed(context, "");//引号内写要跳转的组件对应的key

返回跟路由

 Navigator.pushAndRemoveUntil(
context,
 MaterialPageRoute(builder: (context){
                  return HomePage();
               }),
 (route)=>route==null
);