我们可以通过创建一个新的Route,使用Navigator来导航到一个新的页面,但是如果在应用中很多地方都需要导航到同一个页面(比如在开发中,首页、推荐、分类页都可能会跳到详情页),那么就会存在很多重复的代码。在这种情况下,我们就可以使用 命名路由。
优点:
- 名称路由是将名字和路由的映射关系,在一个地方进行统一管理
- 有了命名路由,我们可以通过
Navigator.pushNamed()
方法来跳转到新的页面
命名路由怎么使用?
1、可以放在MaterialApp的 initialRoute
和 routes
中
initialRoute
: 设置应用程序从哪一个路由开始启动,设置了该属性,就不需要再设置home
属性了
2、routes
:定义名称和路由之间的映射关系,类型为 Map<String, WidgetBuilder>
基本代码如下:
return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue, splashColor: Colors.transparent),initialRoute: "/",routes: {"/home": (ctx) => HYHomePage(),"/detail": (ctx) => HYDetailPage()},
);
在使用跳转的时候则:
_onPushTap(BuildContext context) {Navigator.of(context).pushNamed("/detail");
}
为了更加规范使用路由,则在开发中让每个界面都对 routeName
统一,这样每个界面都定义一个路由常量来使用
class HYHomePage extends StatefulWidget {static const String routeName = "/home";
}class HYDetailPage extends StatelessWidget {static const String routeName = "/detail";
}
为了更好的管理路由映射,则单独创建一个文件进行管理
管理路由文件代码如下:
import 'package:flutter/material.dart';
import 'package:list/douban/Data/my_provider_demo.dart';
import '../Page/detail.dart';
import '../Page/about.dart';
import '../Page/un_known.dart';
import 'package:list/douban/main.dart';class HYRouter {static final Map<String, WidgetBuilder> routes = {MyHomePage1.routeName:(context) => MyHomePage1(),// 默认界面Deatail.routeName:(context) => Deatail(),AboutPage.routeName:(context) => AboutPage(),
};
// 默认界面static final String initialRoute = MyHomePage1.routeName;// 钩子函数
static final RouteFactory generateRoute = (settings) {if (settings.name == Deatail.routeName){return MaterialPageRoute(builder: (context){// settings.argumentsreturn Deatail();});}return null;
};// 错误界面
static final RouteFactory unKnownRoute = (settings) {return MaterialPageRoute(builder: (context) {return UnknownPage();});
};}
则,MaterialApp 代码也需要优化
Widget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),routes: HYRouter.routes,onGenerateRoute:HYRouter.unKnownRoute,onUnknownRoute: HYRouter.unKnownRoute,initialRoute: HYRouter.initialRoute,);
跳转
TextButton(child: Text("打开详情"),onPressed: () {print("点击打开详情");final result = Navigator.of(context).pushNamed(Deatail.routeName,arguments: "去详情界面的数据");result.then((value) {print("${value}");});},)
在跳转的界面接受参数
Widget build(BuildContext context) {final message = ModalRoute.of(context)?.settings.arguments as String;}
上述就完成最基本的命名路由的注册,映射关系,以及跳转。
- 路由钩子 onGenerateRoute的钩子函数
加入我们有一个界面已经创建好,并且传入对应的参数message,并且已经有一个 对应的构造方法,此时如果将其放到路由映射表中则不合适。因为该界面必需要求传入一个参数,这时候我们就可以使用onGenerateRoute的钩子函数 - 当我们通过pushNamed进行跳转,但是对应的name没有在routes中有映射关系,那么就会执行onGenerateRoute钩子函数;
- 我们可以在该函数中,手动创建对应的Route进行返回;
- 该函数有一个参数RouteSettings,该类有两个常用的属性:
- name: 跳转的路径名称
- arguments:跳转时携带的参数
onGenerateRoute: (settings) {if (settings.name == "/about") {return MaterialPageRoute(builder: (ctx) {return HYAboutPage(settings.arguments);});}returnnull;
},
- onUnknownRoute
如果我们打开的一个路由名称是根本不存在,这个时候我们希望跳转到一个统一的错误页面。
onUnknownRoute: (settings) {return MaterialPageRoute(builder: (ctx) {return UnknownPage();});
},