如何更好的管理Fluter的路由?就需要自己去创建一个专门用于管理路由的文件。
在MaterialApp中的实现属性里面可以看到一个routes,routes的定义如下:
final Map routes;
只要遵循Map实现一个routes就可以管理自己的路由配置。
现在动手去实现一个自定义的routes:
var routes = {
'/':(context)=>MyApp(),
'/testlogin':(context)=>Login(),//登陆
'/testregiest':(context)=>Regiest()//注册
};
然后将自己定义的routes赋值给MaterialApp中的routes属性:
Widget build(BuildContext context) {
return MaterialApp(
routes: routes,//将自己定义好的routes赋值
supportedLocales: [//设置支持的语言
const Locale('en'),
const Locale('zh'),
],
locale: const Locale('zh'),//设置当前语言环境
localeResolutionCallback: (Locale locale, Iterable supportedLocales) {
return locale;
},
);
}
这样子设置完之后,就可以直接使用 Navigator.of(context).pushNamed(’/login’) 来跳转页面。
这样子自定好之后,就涉及到需要给跳转的页面传值,传值可以使用pushNamed中的arguments;
Navigator.of(context).pushNamed('/login',arguments: {}); arguments可以填写需要传入的参数。
使用arguments这种方法传进去的值,可以在跳转页面中build方法里面通过ModalRoute.of(context).settings.arguments:
class _TestLoginState extends State{
@override
Widget build(BuildContext context) {
var arguments = ModalRoute.of(context).settings.arguments;//获取传入的值
// TODO: implement build
return Scaffold(
body: Container(
child: Text('test login'),
),
);
}
}
上面一种传值方式固然可行,但是实在build方法中,可能会导致多次赋值,用起来不太美观。
下面介绍另外一种页面之间传值方式,使用MaterialApp中的onGenerateRoute。
重写一下onGenerateRoute,下面来看看具体怎么实现:
1、定义一个routes路由字典:
var routes = {
'/':(context)=>MyApp(),
'/login':(context,{arguments})=>TestLogin(arguments: arguments,),//登陆,定义route的时候就定义好跳转到当前页面需要接受参数
};
2、在同一个文件中实现onGenerateRoute方法
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(
settings: settings,
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
}else{
final Route route = MaterialPageRoute(
settings: settings,
builder: (context) =>
pageContentBuilder(context));
return route;
}
}
};
3、在MaterialApp如何初始化
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',//设置初始化路由
onGenerateRoute: onGenerateRoute,//自定义实现的onGenerateRoute
supportedLocales: [
const Locale('en'),
const Locale('zh'),
],
locale: const Locale('zh'),
localeResolutionCallback: (Locale locale, Iterable supportedLocales) {
// print("change language");
return locale;
},
);
}
}
4、具体使用跳转
Navigator.of(context).pushNamed('/login',arguments: {}); arguments可以填写需要传入的参数。
5、“/login”如何接受数据
class TestLogin extends StatefulWidget{
final Map arguments;
//通过这种方法进行数据传递
const TestLogin({Key key, this.arguments}) : super(key: key);
@override
State createState() {
// TODO: implement createState
return _TestLoginState();
}
}
class _TestLoginState extends State{
@override
Widget build(BuildContext context) {
// var arguments = ModalRoute.of(context).settings.arguments;//获取传入的值
// TODO: implement build
return Scaffold(
body: Container(
child: Text('test login'),
),
);
}
}