Flutter路由之fluro的配置及跳轉
更新時間：2021年09月08日 11:35:30 作者：Jam_Chan
本文主要介紹了Flutter路由之fluro的配置及跳轉，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
1、pubspec.yaml導包,注意格式~
dependencies:
flutter:
sdk: flutter
fluro: ^1.6.3
2、新建路由類，改類是定義頁面的路徑，然后將頁面handler和路徑設置到路由中
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);
}
// 對參數(shù)進行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() {
//跳轉指定頁面并關閉當前所有頁面
//關閉所有頁面時會導致tabs_page頁面先執(zhí)行initState，再執(zhí)行dispose，導致無法再監(jiān)聽，所以要注意
Global.navKey.currentState.pushAndRemoveUntil(
new MaterialPageRoute(builder: (context) => new LoginPage()),
(route) => route == null);//會執(zhí)行所有頁面的dispose
}
}
3、新建router_handler.dart,處理參數(shù)和跳轉頁面
//登錄
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();
});
4、調用傳參
//對象需要轉String
String itemDataJson = FluroConvertUtils.object2string(
_bulletinsList[index]);
Routers.navigateTo(context, Routers.messageDetailPage,
params: {
'bar_title': "Detail",
'item_data': itemDataJson,
});
5、接收數(shù)據(jù)
//String轉回對象
Bulletins itemData =
Bulletins.fromJson(FluroConvertUtils.string2map(itemDataJson));
6、問題來了，因為fluro無法直接傳中文的，這里就需要用到編碼碼解碼了，也就是encode和decode
class FluroConvertUtils {
/// fluro 傳遞中文參數(shù)前，先轉換，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 轉為 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的具體使用的文章就介紹到這了,更多相關Flutter fluro內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了android自定義Dialog彈框和背景陰影顯示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要為大家介紹了Android開發(fā)Compose里使用高德地圖實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
android popwindow實現(xiàn)左側彈出菜單層及PopupWindow主要方法介紹
PopupWindow可以實現(xiàn)浮層效果，主要方法有：可以自定義view，通過LayoutInflator方法；可以出現(xiàn)和退出時顯示動畫；可以指定顯示位置等感興趣的朋友可以了解下哦,希望本文對你學習android菜單相關開發(fā)有所幫助2013-01-01
React-Native Android 與 IOS App使用一份代碼實現(xiàn)方法
這篇文章主要介紹了React-Native Android 與 IOS App使用一份代碼實現(xiàn)方法的相關資料,這里舉例說明，該如何實現(xiàn)IOS和Android APP 都使用一樣的代碼，需要的朋友可以參考下2016-12-12
跟選擇銀行卡界面類似，也是用一個PopupWindow,不過輸入密碼界面是一個自定義view，當輸入六位密碼完成后用回調在Activity中獲取到輸入的密碼并以Toast顯示密碼。這篇文章主要介紹了Android自定義View仿支付寶輸入六位密碼功能的相關資料,需要的朋友可以參考下2016-10-10
Android自動測試工具Monkey的實現(xiàn)方法
本文主要介紹Android Monkey 實現(xiàn)方法,Monkey測試是一種為了測試軟件的穩(wěn)定性、健壯性的快速有效的方法,具有非常重要的參考價值,希望對小伙伴有所幫助2016-07-07
Android中TextView顯示插入的圖片實現(xiàn)方法
這篇文章主要介紹了Android中TextView顯示插入的圖片實現(xiàn)方法,結合實例形式分析了TextView三種顯示插入圖片的實現(xiàn)技巧,需要的朋友可以參考下2016-08-08
這篇文章主要為大家詳細介紹了Android實現(xiàn)多點觸控功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
Android開發(fā)之ProgressDialog進度對話框用法示例
這篇文章主要介紹了Android開發(fā)之ProgressDialog進度對話框用法,簡單介紹了ProgressDialog進度對話框常見函數(shù)功能,并結合實例形式分析了ProgressDialog組件創(chuàng)建及使用進度對話框相關操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要為大家介紹了Android進階之從IO到NIO的模型機制演進詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01