Flutter路由统一管理

Flutter路由统一管理

如何更好的管理Fluter的路由？就需要自己去创建一个专门用于管理路由的文件。

Flutter管理路由的初级用法

在MaterialApp中的实现属性里面可以看到一个routes，routes的定义如下：

final Map<String, WidgetBuilder> 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<Locale> 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<TestLogin>{
  @override
  Widget build(BuildContext context) {
    var arguments = ModalRoute.of(context).settings.arguments;//获取传入的值
    // TODO: implement build
    return Scaffold(
      body: Container(
        child: Text('test login'),
      ),
    );
  }
}

Flutter路由传值的高级用法

上面一种传值方式固然可行，但是实在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<Locale> 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<StatefulWidget> createState() {
    // TODO: implement createState
    return _TestLoginState();
  }
}

class _TestLoginState extends State<TestLogin>{
  @override
  Widget build(BuildContext context) {
//    var arguments = ModalRoute.of(context).settings.arguments;//获取传入的值
    // TODO: implement build
    return Scaffold(
      body: Container(
        child: Text('test login'),
      ),
    );
  }
}