fluro

官方給出的例子

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對(duì)象，之后為每個(gè)需要彈出的頁(yè)面聲明Handler和標(biāo)識(shí)并在router對(duì)象中注冊(cè)，在需要彈出頁(yè)面時(shí)使用router對(duì)象調(diào)用navigateTo方法即可。

實(shí)際開(kāi)發(fā)中的用法

雖然上面說(shuō)到fluro使用方法不復(fù)雜，但是在實(shí)際開(kāi)發(fā)中，出于提高代碼可擴(kuò)展性，降低耦合度等目的,一般不會(huì)以這么直白的方式使用fluro。

我這邊使用的方式是將注冊(cè)頁(yè)面和推出頁(yè)面分割，創(chuàng)建不同的工具類來(lái)實(shí)現(xiàn)對(duì)應(yīng)功能的代碼。

舉例：

假設(shè)目前項(xiàng)目結(jié)構(gòu)為兩個(gè)模塊:模塊A,模塊B,兩個(gè)模塊分別包含兩個(gè)頁(yè)面，既A1,A2, B1,B2?，F(xiàn)在我們使用fluro實(shí)現(xiàn)這個(gè)項(xiàng)目的頁(yè)面跳轉(zhuǎn)功能

注冊(cè)頁(yè)面實(shí)現(xiàn)方式：
為了方便維護(hù)代碼，每個(gè)模塊都單獨(dú)實(shí)現(xiàn)一個(gè)用來(lái)注冊(cè)頁(yè)面的工具類，既RouterA,RouterB。
RouterA：

class RouterA implements IRouterProvider {
 // 聲明標(biāo)識(shí)
  static String A1 = "/A1";
  static String A2 = "/A2";

// initRouter方法中實(shí)現(xiàn)注冊(cè)
  @override
  void initRouter(FluroRouter router) {
    //給外部傳入的fluro的`router`對(duì)象注冊(cè)頁(yè)面
    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)注冊(cè)
  @override
  void initRouter(FluroRouter router) {
 //給外部傳入的fluro的`router`對(duì)象注冊(cè)頁(yè)面
    router.define(B1,
        handler: Handler(handlerFunc: (_, params) => const B1()));
    router.define(B2,
        handler: Handler(handlerFunc: (_, params) => const B2()));
  }
}

之后創(chuàng)建工具類Routes,它的作用是將各個(gè)模塊的注冊(cè)工具類與fluro的router對(duì)象關(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對(duì)象，并將router傳入工具類Routes進(jìn)行頁(yè)面注冊(cè)

 final router = FluroRouter();
 //注冊(cè)
 Routes.configureRoutes(router);

注冊(cè)頁(yè)面工具完成

頁(yè)面跳轉(zhuǎn)工具類實(shí)現(xiàn)方式：
頁(yè)面跳轉(zhuǎn)工具類相對(duì)于注冊(cè)功能內(nèi)容較少，實(shí)現(xiàn)全局router對(duì)象的獲取，并封裝頁(yè)面彈出收回的方法。
router對(duì)象獲取工具類Application

class Application {
  static FluroRouter router;
}

在創(chuàng)建router對(duì)象時(shí)給Application.router賦值

 final router = FluroRouter();
 //注冊(cè)
 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);
  }
}

頁(yè)面跳轉(zhuǎn)工具完成

業(yè)務(wù)代碼：

1. 跳轉(zhuǎn)至A1頁(yè)面

 NavigatorTool.push(context, RouterA.A1);

2. 跳轉(zhuǎn)至A2頁(yè)面

 NavigatorTool.push(context, RouterA.A2);

3.跳 轉(zhuǎn)至B1頁(yè)面

 NavigatorTool.push(context, RouterB.B1);

4. 跳轉(zhuǎn)至B1頁(yè)面

 NavigatorTool.push(context, RouterB.B2);

歡迎指正