前面兩篇文章我們介紹了Flutter 的原生導航器 Navigator 實現頁面跳轉,路由及路由攔截的使用,具體可以參考之前的文章。使用原生的路由基本上能夠滿足大部分需求,但如果想要對頁面做類似瀏覽器 url 那樣的路由,或者控制頁面跳轉的轉場動畫,那麼原生的路由需要做不少的改造。在 pub 上,有優秀的路由插件 fluro 解決這類問題。
fluro的使用方法
fluro 的使用步驟比較簡單,分爲下面三個步驟:
- 構建
FluroRouter
路由實例,一個應用一個實例即可; - 定義路由路徑的處理器(
Handler
),用於匹配不同路由路徑的處理方法。 - 在
MaterialApp
中把onGenerateRoute
設置爲FluroRouter.generator
方法來構建系統路由。
需要注意的是,Fluro 默認會把路徑“/”當做根目錄,因此必須定義根目錄的 Handler
。另外對於路由不存在的情況,可以設置FluroRouter.notFoundHandler
定義錯誤路由處理器。
路由處理器Handler
fluro 的關鍵實現是 Handler,Handler 的定義如下:
class Handler {
Handler({this.type = HandlerType.route, required this.handlerFunc});
final HandlerType type;
final HandlerFunc handlerFunc;
}
構造函數有兩個屬性,一個是 HandlerType
枚舉,分爲route
和 function
兩個值,其中用於路由的是 route
,也是默認值。handlerFunc
是必傳的,這是響應路由的一個方法,需要返回一個 Widget
,以便跳轉到對應的頁面。
typedef Widget? HandlerFunc(
BuildContext? context, Map<String, List<String>> parameters);
HandlerFunc
接收上下文 context
,以及攜帶了路由參數,這個參數是一個Map
,對應路由路徑的多個路由參數。例如/dynamic/:id
路由,如果實際路由爲/dynamic/1?event=a&event=b
,則 parameters
的格式如下:
{
"id": ["1"],
"event": ["a", "b"]
}
需要注意路由參數的數據類型全部是String
類型,通過這個 Handler
,可以將路由參數傳遞到下級頁面。
使用示例
我們爲了統一管理路由,定義一個類 RouterManager
,裏面的屬性均爲靜態成員,以便直接通過類訪問,而無需創建示例。當然考慮封裝性,也可以做成單例模式。需要注意,FluroRouter
只能初始化一次,否則會導致熱重載報錯提示路由已經被定義。我們把上兩篇的路由跳轉替換爲fluro 跳轉,RouterManager 的代碼如下:
//省略 import
class RouterManager {
static String splashPath = '/';
static String loginPath = '/login';
static String homePath = '/home';
static String dynamicPath = '/dynamic';
static String dynamicDetailPath = '$dynamicPath/:id';
static FluroRouter router;
static void initRouter() {
if (router == null) {
router = FluroRouter();
defineRoutes();
}
}
static var loginHandler =
Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
return LoginPage();
});
static var dynamicDetailHandler =
Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
return DynamicDetailPage(params['id'][0]);
});
static var splashHandler =
Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
return Splash();
});
static var homeHandler =
Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
return AppHomePage();
});
static var notFoundHandler =
Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
return NotFound();
});
static void defineRoutes() {
router.define(splashPath, handler: splashHandler);
router.define(homePath, handler: homeHandler);
router.define(loginPath, handler: loginHandler);
router.define(dynamicDetailPath, handler: dynamicDetailHandler);
router.notFoundHandler = notFoundHandler;
}
}
實際只需要調用 RouterManager.initRouter
方法即可完成路由的初始化,這個需要在 main.dart
的 MaterialApp
中完成,代碼如下。與之前的代碼相比,不再需要設置navigationKey
參數和 initialRoute
參數,只是需要在 build
方法裏調用初始化路由的方法。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
RouterManager.initRouter();
return MaterialApp(
//...
onGenerateRoute:
RouterManager.router.generator,
);
}
}
頁面跳轉
頁面跳轉調用有多種形式,本例我們用到了三種,分別是:
- 清除路由堆棧跳轉:即跳轉後的頁面作爲根頁面(沒有返回按鈕),這種適合閃屏頁跳到首頁。代碼如下:
RouterManager.router.navigateTo(context, RouterManager.homePath, clearStack: true);
- 普通跳轉:無參數直接跳轉,代碼如下:
RouterManager.router.navigateTo(context, RouterManager.loginPath);
- 帶參數跳轉:路由路徑攜帶參數,和普通跳轉類似,只是拼接了路徑參數和 query 參數:
RouterManager.router.navigateTo(context, '${RouterManager.dynamicPath}/$id?event=a&event=b')
運行效果
我們將閃屏頁跳轉到首頁,動態跳轉到詳情頁,以及登錄頁和404頁面進行了更換,運行效果如下圖所示。注意看整個轉場方式的不同,正常的轉場切換是從底部到頂部彈出,但404是從左到右彈出(和原生的 push 一樣)。這個後續可以在 Handler 裏調整或者在路由跳轉的時候定義轉場動畫,我們下一篇再來介紹這方面的使用。