Flutter路由之fluro的配置及跳轉(zhuǎn)
1、pubspec.yaml導(dǎo)包,注意格式~
dependencies: flutter: sdk: flutter fluro: ^1.6.3
2、新建路由類(lèi),改類(lèi)是定義頁(yè)面的路徑,然后將頁(yè)面handler和路徑設(shè)置到路由中
class Routers { static Router router; //文件夾須跟main.dart目錄同級(jí) 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); } // 對(duì)參數(shù)進(jìn)行encode,解決參數(shù)中有特殊字符,影響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傳遞的參數(shù):$query'); path = path + query; return router.navigateTo(context, path, transition: transition, replace: replace); } static void finishAllToLoginPage() { //跳轉(zhuǎn)指定頁(yè)面并關(guān)閉當(dāng)前所有頁(yè)面 //關(guān)閉所有頁(yè)面時(shí)會(huì)導(dǎo)致tabs_page頁(yè)面先執(zhí)行initState,再執(zhí)行dispose,導(dǎo)致無(wú)法再監(jiān)聽(tīng),所以要注意 Global.navKey.currentState.pushAndRemoveUntil( new MaterialPageRoute(builder: (context) => new LoginPage()), (route) => route == null);//會(huì)執(zhí)行所有頁(yè)面的dispose } }
3、新建router_handler.dart,處理參數(shù)和跳轉(zhuǎn)頁(yè)面
//登錄 var loginHandler = new Handler( handlerFunc: (BuildContext context, Map<String, List<String>> params) { return new LoginPage(); }); //消息詳情頁(yè) 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, ); }); //主頁(yè)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(); });
4、調(diào)用傳參
//對(duì)象需要轉(zhuǎn)String String itemDataJson = FluroConvertUtils.object2string( _bulletinsList[index]); Routers.navigateTo(context, Routers.messageDetailPage, params: { 'bar_title': "Detail", 'item_data': itemDataJson, });
5、接收數(shù)據(jù)
//String轉(zhuǎn)回對(duì)象 Bulletins itemData = Bulletins.fromJson(FluroConvertUtils.string2map(itemDataJson));
6、問(wèn)題來(lái)了,因?yàn)閒luro無(wú)法直接傳中文的,這里就需要用到編碼碼解碼了,也就是encode和decode
class FluroConvertUtils { /// fluro 傳遞中文參數(shù)前,先轉(zhuǎn)換,fluro 不支持中文傳遞 static String fluroCnParamsEncode(String originalCn) { return jsonEncode(Utf8Encoder().convert(originalCn)); } /// fluro 傳遞后取出參數(shù),解析 static String fluroCnParamsDecode(String encodeCn) { var list = List<int>(); ///字符串解碼 jsonDecode(encodeCn).forEach(list.add); String value = Utf8Decoder().convert(list); return value; } /// string 轉(zhuǎn)為 int static int string2int(String str) { return int.parse(str); } /// string 轉(zhuǎn)為 double static double string2double(String str) { return double.parse(str); } /// string 轉(zhuǎn)為 bool static bool string2bool(String str) { if (str == 'true') { return true; } else { return false; } } /// object 轉(zhuǎn)為 string json static String object2string<T>(T t) { return fluroCnParamsEncode(jsonEncode(t)); } /// string json 轉(zhuǎn)為 map static Map<String, dynamic> string2map(String str) { return json.decode(fluroCnParamsDecode(str)); } }
完美解決,這也是fluro使用的整個(gè)流程,基本小封裝了下,還有就是Routers需要在main.dart里初始化:
MyApp() { // 注冊(cè)初始化fluro final router = Router(); Routers.configureRoutes(router); Routers.router = router; }
到此這篇關(guān)于Flutter 路由之fluro的具體使用的文章就介紹到這了,更多相關(guān)Flutter fluro內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用Flutter開(kāi)發(fā)一個(gè)圖片UI組件的代碼示例
在移動(dòng)應(yīng)用開(kāi)發(fā)中,圖片展示是一個(gè)常見(jiàn)的需求,為了滿(mǎn)足不同場(chǎng)景的圖片展示需求,我們可以開(kāi)發(fā)一個(gè)靈活配置的圖片UI組件,本文將介紹如何使用Flutter開(kāi)發(fā)一個(gè)圖片UI組件,并提供了豐富的配置選項(xiàng),需要的朋友可以參考下2023-09-09OnSharedPreferenceChangeListener詳解及出現(xiàn)不觸發(fā)解決辦法
本文主要介紹 Android OnSharedPreferenceChangeListener的知識(shí),在Android應(yīng)用開(kāi)發(fā)過(guò)程中會(huì)遇到監(jiān)聽(tīng)器不觸發(fā)事件問(wèn)題,這里介紹了相應(yīng)的解決辦法2016-08-08Android實(shí)現(xiàn)語(yǔ)音數(shù)據(jù)實(shí)時(shí)采集、播放
這篇文章主要介紹了android實(shí)現(xiàn)語(yǔ)音數(shù)據(jù)實(shí)時(shí)采集、播放的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12Kotlin遍歷集合導(dǎo)致并發(fā)修改異常的原因和解決方法
這篇文章主要介紹了Kotlin遍歷集合導(dǎo)致并發(fā)修改異常的原因和解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03Android使用socket進(jìn)行二進(jìn)制流數(shù)據(jù)傳輸
這篇文章主要介紹了Android使用socket進(jìn)行二進(jìn)制流數(shù)據(jù)傳輸,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-04-04android startActivityForResult的使用方法介紹
android startActivityForResult的使用方法介紹,需要的朋友可以參考一下2013-05-05android?scrollview頂部漸漸消失實(shí)現(xiàn)實(shí)例詳解
這篇文章主要為大家介紹了android?scrollview頂部漸漸消失實(shí)現(xiàn)實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11