Flutter中fluro使用

https://www.jianshu.com/p/e575787d173c

使用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('袁致營', 30, 1.78, 74.0); UserInfoModel userInfoModel2 = UserInfoModel('袁致營2', 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使用方法

1. 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, ); });

作者：yuanzhiying
鏈接：https://www.jianshu.com/p/e575787d173c
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。