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
);
