使用fluro时,对参数进行URLEncode来解决找不到路由的问题
一、使用方法
1、route_handlers.dart中新建对应页面的Handler
2、routes.dart中定义对应的路由
二、跳转页面
1. 跳转页面,不传参:
Routes.navigateTo(
context,
Routes.setting,
);
2. 跳转页面,传递字符串参数:
String title = '我是标题哈哈哈';
String url = 'https://www.baidu.com/';
Routes.navigateTo(
context,
Routes.webView,
params: {
'title': title,
'url': url,
},
);
3. 跳转页面,传递model参数或字符串参数:
UserInfoModel userInfoModel =
UserInfoModel('yuanzhiying', 30, 1.78, 74.0);
UserInfoModel userInfoModel2 =
UserInfoModel('yuanzhiying2', 32, 1.78, 74.0);
String jsonString = convert.jsonEncode(userInfoModel);
String jsonString2 = convert.jsonEncode(userInfoModel2);
Routes.navigateTo(
context,
Routes.wxSharePay,
params: {
'userInfoModel': jsonString,
'userInfoModel2': jsonString2,
},
).then((result) {
// 通过pop回传的值,边缘策划返回则不努力通过此处传值
});
三、返回页面
1、pop返回页面:
Navigator.of(context).pop();
2、返回到/根页面:
Navigator.of(context).popUntil(ModalRoute.withName('/'));
或
Navigator.of(context).popUntil((r) => r.settings.isInitialRoute);
3、返回到路由列表中的某个页面:
Navigator.of(context).popUntil(ModalRoute.withName('/test'));
或返回fluro中设定的route:
Navigator.of(context).popUntil(ModalRoute.withName(Routes.setting));
fluro使用方法
- main.dart中配置
void main() {
final router = Router();
Routes.configureRoutes(router);
Routes.router = router;
runApp(MyApp());
}
...
...
return MaterialApp(
title: 'Flutter APP',
onGenerateRoute: Routes.router.generator, // 配置route generate
);
创建Routes.dart
// 配置路径Route
import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'package:***/route/route_handlers.dart';
class Routes {
// 路由管理
static Router router;
static String root = '/'; // 根目录
static String setting = '/setting'; // 设置页
static String webView = '/webView'; // 网页加载
static String wxSharePay = '/wxSharePay'; // 测试model传参
// 配置route
static void configureRoutes(Router router) {
// 未发现对应route
router.notFoundHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
print('route not found!');
return;
});
router.define(root, handler: rootHandler); // 根目录
router.define(setting, handler: settingHandler); // 设置
router.define(webView, handler: webViewHandler); // 网页加载
router.define(wxSharePay, handler: wxSharePayHandler); // 测试model传参
}
// 对参数进行encode,解决参数中有特殊字符,影响fluro路由匹配
static Future navigateTo(BuildContext context, String path, {Map<String, dynamic> params, TransitionType transition = TransitionType.native}) {
String query = "";
if (params != null) {
int index = 0;
for (var key in params.keys) {
var value = Uri.encodeComponent(params[key]);
if (index == 0) {
query = "?";
} else {
query = query + "\&";
}
query += "$key=$value";
index++;
}
}
print('我是navigateTo传递的参数:$query');
path = path + query;
return router.navigateTo(context, path, transition:transition);
}
}
创建route_handler.dart
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'dart:convert' as convert;
import 'package:***/common/home.dart';
import 'package:***/widgets/mine/settings.dart';
import 'package:***/common/webview_url.dart';
import 'package:***/widgets/login/wx_share_pay.dart';
import 'package:***/widgets/login/model/user_info_model.dart';
// 根目录
var rootHandler =
Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
return HomePage();
});
// 设置页 - 示例:不传参数
var settingHandler =
Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
return Settings();
});
// 网页加载 - 示例:传多个字符串参数
var webViewHandler =
Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
// params内容为 {title: [我是标题哈哈哈], url: [https://www.baidu.com/]}
String title = params['title']?.first;
String url = params['url']?.first;
return WebViewUrlPage(
title: title,
url: url,
);
});
// 示例:传多个model参数
var wxSharePayHandler =
Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
// print('params: $params');
// String model = params['userInfoModel']?.first;
// print('model: $model');
// // model: {name: yuanzhiying, age: 30, height: 1.78, weight: 74.0}
// Map<String, dynamic> jsonMap = convert.jsonDecode(model);
// print('jsonMap: $jsonMap');
// UserInfoModel _model = UserInfoModel.fromJson(jsonMap);
UserInfoModel _model1 =
UserInfoModel.fromJson(convert.jsonDecode(params['userInfoModel'][0]));
UserInfoModel _model2 =
UserInfoModel.fromJson(convert.jsonDecode(params['userInfoModel2'][0]));
return WxSharePage(
userInfoModel: _model1,
userInfoModel2: _model2,
);
});