Flutter路由统一注册的简化

2,212 阅读1分钟

       受到Flutter中实现无Context跳转 对Flutter路由管理库Fluro的封装 的启发,决定对Flutter路由管理这块做个整理。

对Flutter路由管理库Fluro的封装一文中,routes的定义已经简化成如下:


但写起来还是觉得此话臃肿,请看再次简化后的写法

  <String, Function>{
    /// 没有参数
    PageNames.LOGIN: (par) => LoginPage(),

    /// 2个参数
    PageNames.SETTINGS: (par) => SettingsPage(par["title"], par["content"]),

    /// 1个参数
    PageNames.PROFILE: (par) => MaterialPageRoute(builder: (ctx) => ProfilePage(par))
  }.forEach((name, builder) {
    defineRoute(name, builder);
  });

看起来还算清爽

看一下route_util.dart的代码,其实思路还是和Flutter中实现无Context跳转一样,利用

NavigatorObserver获取到全局的Navigator

typedef Widget RouteWidgetBuilder(dynamic parameter);
typedef Route RouteBuilder(dynamic parameter);

NavigatorObserver navigatorObserver = NavigatorObserver();
Map pages = <String, Function>{};

void defineRoute(String name, Function builder) => pages[name] = builder;

Route<dynamic> generateRoute(RouteSettings setting) {
  Function builder = pages[setting.name];

  print("generateRoute ${setting.name} $builder");
  if (builder is RouteWidgetBuilder) {
    return MaterialPageRoute(builder: (ctx) {
      return builder(setting.arguments);
    });
  } else if (builder is RouteBuilder) {
    return builder(setting.arguments);
  }
  return null;
}

Future pushNamed(String page, [Object arg]) {
  return navigatorObserver.navigator.pushNamed(page, arguments: arg);
}

NavigatorState navigator() => navigatorObserver.navigator;

materialApp 注册路由生成器

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      navigatorObservers: [navigatorObserver],
      onGenerateRoute: generateRoute,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

基本上大功告成了,完整的代码已上传至github