1. 路由是什么?
前端开发者其实都十分清楚这个问题的答案,通俗易懂来说,路由就是负责页面跳转,而路由管理则是控制盒管理页面跳转的过程和规则,而Flutter中的路由也分两个版本
- Navigator 1.0:侧重于移动端的路由系统,采用命令式编程风格,通过push和pop方法管理路由栈。
- Navigator 2.0:在Flutter 1.22版本后新增,侧重于复杂的桌面端/网页端,采用声明式编程风格,使用Router和RouterInformationParser等类来描述和管理路由树。
而本篇我是针对1.0版本进行一个封装,分享我在自己移动端的项目中使用得比较顺手的路由相关工具类或拓展类。
2. 静态工具类相关
2.1 路由静态管理类
我们使用路由,会很频繁的去调用Navigator.of(context),来获取路由的能力,然后有些时候我们没有context的时候,我们需要一个GlobalKey来获取路由能力,要写很多重复代码,所以我就简单封装了一下工具类来解决以上的问题
///项目路由工具类
///可通过该类的静态方法进行路由操作
///另外也对BuildContext进行了函数扩展,可以通过BuildContext对象进行对Nav的调用,详情查看NavExtension
class Nav {
static final GlobalKey<NavigatorState> globalNavigatorKey =
GlobalKey<NavigatorState>();
///通过Router对象跳转,一般情况下尽量不使用该方法,请通过路由名跳转
static Future<T?> pushRouter<T extends Object?>(
BuildContext context, Route<T> route) {
return Navigator.of(context).push(route);
}
///通过路由名称跳转至新路由
///一般情况下尽量传Context
///返回值:通过Future接收页面数据返回对象
static Future<T?> push<T extends Object?>(
{
BuildContext? context, required String routerName, Map<String,dynamic>? arguments}) {
if (context == null) {
return _getGlobalNaigatorState()
.pushNamed(routerName, arguments: arguments);
} else {
FocusUtil.cancelFocus(context);
return Navigator.of(context).pushNamed(routerName, arguments: arguments);
}
}
///通过路由名称跳转至新路由,并且结束当前页面
///一般情况下尽量传Context
///返回值:通过Future接收页面数据返回对象
static Future<T?> pushReplacement<T extends Object?>(
{
BuildContext? context, required String routerName, Map<String,dynamic>? arguments}) {
if (context == null) {
return _getGlobalNaigatorState()
.pushReplacementNamed(routerName