fluro 是flutter開發(fā)中比較常見路由插件
插件地址:fluro | Flutter Package (pub.dev)
官方給出的例子
final router = FluroRouter();
var usersHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
return UsersScreen(params["id"][0]);
});
void defineRoutes(FluroRouter router) {
router.define("/users/:id", handler: usersHandler);
// it is also possible to define the route transition to use
// router.define("users/:id", handler: usersHandler, transitionType: TransitionType.inFromLeft);
}
router.navigateTo(context, "/users/1234", transition: TransitionType.fadeIn);
/// Push a route with custom RouteSettings if you don't want to use path params
FluroRouter.appRouter.navigateTo(
context,
'home',
routeSettings: RouteSettings(
arguments: MyArgumentsDataClass('foo!'),
),
);
/// Extract the arguments using [BuildContext.settings.arguments] or [BuildContext.arguments] for short
var homeHandler = Handler(
handlerFunc: (context, params) {
final args = context.settings.arguments as MyArgumentsDataClass;
return HomeComponent(args);
},
);
從例子中可以看出使用方式并不復(fù)雜,先創(chuàng)建router
對象,之后為每個(gè)需要彈出的頁面聲明Handler和標(biāo)識(shí)并在router
對象中注冊,在需要彈出頁面時(shí)使用router
對象調(diào)用navigateTo方法即可乾忱。
實(shí)際開發(fā)中的用法
雖然上面說到fluro使用方法不復(fù)雜彤守,但是在實(shí)際開發(fā)中,出于提高代碼可擴(kuò)展性洒缀,降低耦合度等目的,一般不會(huì)以這么直白的方式使用fluro瑰谜。
我這邊使用的方式是將注冊頁面和推出頁面分割,創(chuàng)建不同的工具類來實(shí)現(xiàn)對應(yīng)功能的代碼树绩。
舉例:
假設(shè)目前項(xiàng)目結(jié)構(gòu)為兩個(gè)模塊:模塊A,模塊B,兩個(gè)模塊分別包含兩個(gè)頁面萨脑,既A1,A2, B1,B2。現(xiàn)在我們使用fluro實(shí)現(xiàn)這個(gè)項(xiàng)目的頁面跳轉(zhuǎn)功能
注冊頁面實(shí)現(xiàn)方式:
為了方便維護(hù)代碼饺饭,每個(gè)模塊都單獨(dú)實(shí)現(xiàn)一個(gè)用來注冊頁面的工具類渤早,既RouterA
,RouterB
。
RouterA
:
class RouterA implements IRouterProvider {
// 聲明標(biāo)識(shí)
static String A1 = "/A1";
static String A2 = "/A2";
// initRouter方法中實(shí)現(xiàn)注冊
@override
void initRouter(FluroRouter router) {
//給外部傳入的fluro的`router`對象注冊頁面
router.define(A1,
handler: Handler(handlerFunc: (_, params) => const A1()));
router.define(A2,
handler: Handler(handlerFunc: (_, params) => const A2()));
}
}
RouterB
同理:
class RouterB implements IRouterProvider {
// 聲明標(biāo)識(shí)
static String B1 = "/B1";
static String B2 = "/B2";
// initRouter方法中實(shí)現(xiàn)注冊
@override
void initRouter(FluroRouter router) {
//給外部傳入的fluro的`router`對象注冊頁面
router.define(B1,
handler: Handler(handlerFunc: (_, params) => const B1()));
router.define(B2,
handler: Handler(handlerFunc: (_, params) => const B2()));
}
}
之后創(chuàng)建工具類Routes
,它的作用是將各個(gè)模塊的注冊工具類與fluro的router
對象關(guān)聯(lián)
class Routes {
static final List<IRouterProvider> _routerList = [];
static void configureRoutes(FluroRouter router) {
_routerList.clear();
_routerList.add(RouterA());
_routerList.add(RouterB());
/// 使用各個(gè)模塊的工具類初始化路由
for (IRouterProvider routerProvider in _routerList) {
routerProvider.initRouter(router);
}
}
}
在項(xiàng)目入口聲明router
對象瘫俊,并將router
傳入工具類Routes
進(jìn)行頁面注冊
final router = FluroRouter();
//注冊
Routes.configureRoutes(router);
注冊頁面工具完成
頁面跳轉(zhuǎn)工具類實(shí)現(xiàn)方式:
頁面跳轉(zhuǎn)工具類相對于注冊功能內(nèi)容較少鹊杖,實(shí)現(xiàn)全局router
對象的獲取,并封裝頁面彈出收回的方法扛芽。
router
對象獲取工具類Application
class Application {
static FluroRouter router;
}
在創(chuàng)建router
對象時(shí)給Application.router賦值
final router = FluroRouter();
//注冊
Routes.configureRoutes(router);
//賦值
Application.router = router;
跳轉(zhuǎn)工具類NavigatorTool
/// fluro的路由跳轉(zhuǎn)工具類
class NavigatorTool {
static push(BuildContext context, String path,
) {
Application.router.navigateTo(context, path);
}
/// 返回
static void goBack(BuildContext context) {
Navigator.pop(context);
}
}
頁面跳轉(zhuǎn)工具完成
業(yè)務(wù)代碼:
- 跳轉(zhuǎn)至A1頁面
NavigatorTool.push(context, RouterA.A1);
- 跳轉(zhuǎn)至A2頁面
NavigatorTool.push(context, RouterA.A2);
3.跳 轉(zhuǎn)至B1頁面
NavigatorTool.push(context, RouterB.B1);
- 跳轉(zhuǎn)至B1頁面
NavigatorTool.push(context, RouterB.B2);
歡迎指正