路由使用方式
1、简单路由
示例 无参路由
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return SearchScreen();//这里是要跳转的界面地址
}));
示例 有参路由
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return SearchScreen(name:'参数');
}));
//SearchScreen界面获取传过来的参数值
${this.widget.name}
示例 带参返回路由
Navigator.pop(context,'返回去的参数')
//接收页面取值方式
var result = Navigator.push(context,
MaterialPageRoute(builder: (context) {
return SearchScreen();
}));
result.then((value) => print('这里是返回的参数${value}'));
2、命名路由
示例
return MaterialApp(
title: '我的第一个flutter',
routes: {
'/home':(context)=> HomeScreen(),
'/A':(context)=> A(),
'/B':(context)=> B(),
'/C':(context)=> C(),
},
home: const HomePage(),
);
//调用方式
Navigator.pushNamed(context, '/A');
//传参方式
Navigator.pushNamed(context, '/A',arguments: 'canshu');
//获取参数方式
var param = ModalRoute.of(context)?.settings.arguments;
初始化路由 initialRoute: ‘/A’,
3、路由钩子
MaterialApp按照如下的规则匹配路由:
- 路由为/,home不为null则使用home.
- 使用routes指定的路由。
- 使用onGenerateRoute生产的路由,处理除home和routes以为的路由.
- 如果上面都不匹配则调用onUnknownRoute.
return MaterialApp(
routes: {
'/home':(context)=> HomeScreen(),
'/A':(context)=> A(),
'/B':(context)=> B(),
'/C':(context)=> C(),
},
initialRoute: '/A',
onGenerateRoute: (RouteSettings settings){
if(settings.name == '/A'){
return MaterialPageRoute(builder: (context) => A());
}
},
//如果上面的页面都没有走这里
onUnknownRoute: (RouteSettings settings){
return MaterialPageRoute(builder: (context) => 错误界面());
},
home: const HomePage(),
);