flutter系统提供了两种路由跳转方案
一种是直接跳转
Future<T?> push<T extends Object?>(Route<T> route) {
assert(_debugCheckIsPagelessRoute(route));
_pushEntry(_RouteEntry(route, initialState: _RouteLifecycle.push));
return route.popped;
}
另一种是命名路由跳转
Future<T?> pushNamed<T extends Object?>(
String routeName, {
Object? arguments,
}) {
return push<T>(_routeNamed<T>(routeName, arguments: arguments)!);
}
但是在实际项目中很多时候我们不只是处理端内跳转,外界给进来一个uri(例如 http://test.com/home/tool?age=22),如何根据这个做跳转并且传参
- 第一步涉及的就是路由解析,flutter也提供了强大的路由解析工具,我们需要从uri中获取到路由名称,以及传进来的参数
- 第二步就是路由跳转了,系统提供的两种方案都可以实现需求,我就依托于命名路由来实现(其实如果选择第一种来实现这样的需求,本质也是命名理由的原理,只不过是不走系统的路由表,自己也是要实现一套的)
下面具体说下我的实现思路
作为强调: 因为是外界传进来的参数,需要有一定的规范来约束传参,我这里
{
"params":{}, // 页面参数
"statParams":{}, //埋点参数
};
1. 路由表
return MaterialApp(
routes: {
"/":(context)=>HomePage(),
"/page_one":(context) => MyNavigator.myRoute(context, builder: ()=>PageOne()),
"/page_two":(context)=>MyNavigator.myRoute(context, builder: ()=>PageTwo()),
},
);
这里我多做了一步处理,MyNavigator.myRoute用来获取参数,这一步处理主要是不想在目标页面再去获取参数,ModalRoute.of依赖于BuildContext,我如果是个stateFulWidget,只能通过在build中获取参数,如果build执行多次,就会多次获取参数,强迫症的我不愿意这样...,所以选择通过手动传参的方式
typedef MyNavigatorRouteBuilder = Widget Function();
static Widget myRoute(BuildContext context,{required MyNavigatorRouteBuilder builder}) {
final widget = builder();
final params = ModalRoute.of(context)?.settings.arguments??{};
if (params is Map<String,dynamic>) {
if (widget is Routable) {
(widget as Routable).params = params;
}
}
return widget;
}
所有作为路由的页面,混入了Routable类,主要是为了提供参数获取的能力,这里也可以使用基类的方式,但是我觉得基类有点入侵性大了,毕竟我喜欢"stf"来创建页面...
mixin Routable {
late final Map<String,dynamic>? params;
Map<String, dynamic>? get argument => params?["params"];
Map<String, dynamic>? get statArgument => params?["statParams"];
}
2. 路由解析
static pushUri(BuildContext context,String uriString) {
final decoded = Uri.decodeFull(uriString).replaceAll('#', '?');
final uri = Uri.parse(decoded);
final routName = uri.path;
final params = jsonDecode(uri.queryParameters["params"]??"");
final statParams = jsonDecode(uri.queryParameters["statParams"]??"");
Navigator.of(context).pushNamed(routName, arguments: {
"params": params,
"statParams": statParams,
});
}
这一步其实没有什么可以说的,就是从uri中获取路由名称,按照约定好的规范获取参数
到此,如果外界给我一个字符串http://www.myTest.com/page_one?params=%7B%22name%22%3A%22%E5%B0%8F%E6%98%8E%22%2C%22age%22%3A22%7D&statParams=%7B%22entry%22%3A%22home_page%22%7D,我直接调用pushUri就可以进行跳转了
,在对应的页面中我是这样获取参数的
class _PageOneState extends State<PageOne> {
String get name => widget.argument!["name"]!;
int get age => widget.argument!["age"]!;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("PageOne"),),
body: Center(
child: Text("page_one name: $name, age: $age"),
),
);
}
}
因为我的PageOne混入了Routable,所以我可以轻松的获取到参数,
