这篇文章将为大家详细讲解有关Flutter路由之fluro如何配置及跳转,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
dependencies:
flutter:
sdk: flutter
fluro: ^1.6.3
class Routers {
static Router router;
//文件夹须跟main.dart目录同级
static String root = '/';
static String loginPage = '/loginPage';
static String tabsPage = '/tabsPage';
static String messageDetailPage = '/messageDetailPage';
static String serviceSettingPage = '/serviceSettingPage';
static void configureRoutes(Router router) {
router.notFoundHandler = Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) {
print("ROUTE WAS NOT FOUND !!!");
return null;
});
router.define(loginPage, handler: loginHandler);
router.define(messageDetailPage, handler: messageDetailHandler);
router.define(tabsPage, handler: tabsHandler);
router.define(serviceSettingPage, handler: serviceSettingHandler);
}
// 对参数进行encode,解决参数中有特殊字符,影响fluro路由匹配,尤其中文
static Future navigateTo(BuildContext context, String path,
{Map<String, dynamic> params,
TransitionType transition = TransitionType.inFromRight,
bool replace = false}) {
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, replace: replace);
}
static void finishAllToLoginPage() {
//跳转指定页面并关闭当前所有页面
//关闭所有页面时会导致tabs_page页面先执行initState,再执行dispose,导致无法再监听,所以要注意
Global.navKey.currentState.pushAndRemoveUntil(
new MaterialPageRoute(builder: (context) => new LoginPage()),
(route) => route == null);//会执行所有页面的dispose
}
}
//登录
var loginHandler = new Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) {
return new LoginPage();
});
//消息详情页
var messageDetailHandler = new Handler(
handlerFunc: (BuildContext context, Map<String, dynamic> params) {
//取参
String barTitle = params["bar_title"]?.first;
String itemDataJson = params["item_data"]?.first;
return new MessageDetailPage(
barTitle: barTitle,
itemDataJson: itemDataJson,
);
});
//主页Tabs
var tabsHandler = new Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) {
return new TabsPage();
});
//Service setting
var serviceSettingHandler = new Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) {
return new ServiceSettingPage();
});
//对象需要转String
String itemDataJson = FluroConvertUtils.object2string(
_bulletinsList[index]);
Routers.navigateTo(context, Routers.messageDetailPage,
params: {
'bar_title': "Detail",
'item_data': itemDataJson,
});
//String转回对象
Bulletins itemData =
Bulletins.fromJson(FluroConvertUtils.string2map(itemDataJson));
class FluroConvertUtils {
/// fluro 传递中文参数前,先转换,fluro 不支持中文传递
static String fluroCnParamsEncode(String originalCn) {
return jsonEncode(Utf8Encoder().convert(originalCn));
}
/// fluro 传递后取出参数,解析
static String fluroCnParamsDecode(String encodeCn) {
var list = List<int>();
///字符串解码
jsonDecode(encodeCn).forEach(list.add);
String value = Utf8Decoder().convert(list);
return value;
}
/// string 转为 int
static int string2int(String str) {
return int.parse(str);
}
/// string 转为 double
static double string2double(String str) {
return double.parse(str);
}
/// string 转为 bool
static bool string2bool(String str) {
if (str == 'true') {
return true;
} else {
return false;
}
}
/// object 转为 string json
static String object2string<T>(T t) {
return fluroCnParamsEncode(jsonEncode(t));
}
/// string json 转为 map
static Map<String, dynamic> string2map(String str) {
return json.decode(fluroCnParamsDecode(str));
}
}
完美解决,这也是fluro使用的整个流程,基本小封装了下,还有就是Routers需要在main.dart里初始化:
MyApp() {
// 注册初始化fluro
final router = Router();
Routers.configureRoutes(router);
Routers.router = router;
}
关于“Flutter路由之fluro如何配置及跳转”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。