flutter-fluro

flutter路由

地址

• 导入方法

dependencies:
 fluro: "^1.3.4"
或
dependencies:
 fluro:
   git: git://github.com/theyakka/fluro.git

• 使用

  • 初始化

    final router = Router();
  

  • 初始化完成之后需要定义routers和handlers

     var usersHandler = Handler(handlerFunc: (BuildContext                       context, Map params) {
       return UsersScreen(params["id"][0]);
   });
   void defineRoutes(Router router) {
       router.define("/users/:id", handler: usersHandler);
    }
  

  同vue一样 "/"这个是默认页面

  • 在MaterialApp.onGenerateRoute 传入router.generator；

  Widget build(BuildContext context) {
  // TODO: implement build
  return new MaterialApp(
   title: "首页",
   theme: new ThemeData(
     textTheme: new TextTheme(
       body1: new TextStyle(fontSize: 14.0,color: Color(0xff333333)),
     )
   ),
   onGenerateRoute: _router.generator,
  );
  }
  

  geterator 是一个函数内部实现：

  Route generator(RouteSettings routeSettings) {
    RouteMatch match =
        matchRoute(null, routeSettings.name, routeSettings: routeSettings);
    return match.route;
  }
  

  所以也可以通过以下方式定义跳转方式

  onGenerateRoute: (RouteSettings routeSettings){
       RouteMatch match = _router.matchRoute(null,routeSettings.name,routeSettings:routeSettings,transitionType: TransitionType.inFromRight);
       return match.route;
     },
  

  • 跳转

    Navigator.of(context).pushNamed("/skills/popupmenu");
  

写下来一想深刻点