一.复习上一节
- 1、基本组件跳转
Navigator.of(context).push(MaterialPageRoute( builder: (context) =>组件()));- 2、基本组件传参
Navigator.of(context).push(MaterialPageRoute( builder: (context) =>组件(参数)));- 3、返回上一页面
Navigator.of(context).pop();- 4、悬浮组件
Scaffold(floatingActionButton: FloatingActionButton());
二.命名路由使用
1、 配置路由
MaterialApp(
routes: {
"/search": (context) => SearchPage1(),
"/search2": (context) => SearchPage2()
});
2、 路由跳转
Navigator.popAndPushNamed(context, "/search2");
- 注意
1、配置路由是MaterialApp 组件routes参数。
2、跳转路由时的使用的名字要与命名时一直。
3、注意导入包，如果主页面已经导过包了，子组件就不需要再导入了。
二.路由抽取
final routes = {
"/search": (context) => SearchPage1(),
"/search2": (context) => SearchPage2()
};
MaterialApp(routes: routes)
三.命名路传值问题
老版本的路由不支持传值所以看老版本都是提供一些插件来传值，但是新版本已经支持路由传值，但是配置还是很麻烦，监听onGenerateRoute()
直接拷贝监听中内容即可
final routes = {
"/search": (context) => SearchPage1(),
"/search2": (context) => SearchPage2()
};
//固定写法
var onGenerateRoute = (RouteSettings settings) {
final String name = settings.name;
final Function pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
} else {
final Route route =
MaterialPageRoute(builder: (context) => pageContentBuilder(context));
return route;
}
}
};
@override
Widget build(BuildContext context) {
return MaterialApp( onGenerateRoute: onGenerateRoute);
}
- 注意
1、添加onGenerateRoute监听就不用添加routes 参数了。
2、路由和监听可以抽取出来放在单独的一个文件里面。
3、onGenerateRoute中通过监听，先获取名字，找得到对应的路由，如果由中参数不为空，把参数传入。
1.命名路由无状态组件传值
- 接受页面定义一个可选参数
Map arguments;
ListDataPage({this.arguments});
- 路由中添加参数
"/listDataPage":(context, {arguments}) => ListDataPage(arguments: arguments)
- 调用传入参数
Navigator.popAndPushNamed(context, "/listDataPage",arguments: {"id": "页面2传入"});
- 接受页面获取参数
Text("我是列表页面" +(this.arguments != null ? arguments["id"] : "没有传入内容"))
2.命名路由有状态组件传值
- 和无状态组件传值方式一致就是需要把参数传入到state类
class SearchPage2 extends StatefulWidget {
final Map arguments;
SearchPage2({Key key,this.arguments}) :super(key:key);
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return SearchPage2Widget(arguments:this.arguments);
}
}
class SearchPage2Widget extends State<SearchPage2> {
final Map arguments;
SearchPage2Widget({this.arguments});
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold（ body:Text(arguments!=nullarguments["id"]:"没有内容" )));
}
}
- 注意
1、参数只能命名为arguments
2、注意导入跳转页面的包
3、监听赋值不需要加(),()代表执行
四.总结
命名路由传参步骤
1、写命名路由监听
onGenerateRoute2、配置路由
final routes = { "/search": (context) =>SearchPage1()}3、接受页面定义参数
Map arguments;
SearchPage1({this.arguments});4、路由中添加参数
"/search": (context, {arguments}) => SearchPage1(arguments: arguments)5、跳转传入参数
Navigator.popAndPushNamed(context, "/search",arguments: {"id":"页面1传入"})6、接受页面获取参数
Text(arguments != null ? arguments["id"] : "没有内容")
