最近改造項(xiàng)目，感覺Flutter路由這塊需要打磨打磨，想起來之前好像聽說過通過注解來生成路由映射的工具褲，嗯，很快就搜索到阿里寫的annotation_route，先start一下，看了下issue，沒有對(duì)頁面分散到各個(gè)模塊的情況進(jìn)行處理，看了下issue時(shí)間，貌似沒有改進(jìn)的計(jì)劃，放棄。

只能自己挖井(挖坑)了，不久之前剛學(xué)會(huì)用Dart Pub Global 創(chuàng)建命令行應(yīng)用程序。
感覺這個(gè)注解應(yīng)該跟官方的json_annotation很相似，于是立刻下載下來，看源碼。

在看源碼的過程中，低調(diào)大佬做了個(gè)ok_route，以及掘金一個(gè)小伙伴做了route_generator_repo，都是通過注釋，來生成路由映射的解決方案，因?yàn)樽詈蟪尸F(xiàn)方式跟自己構(gòu)思的有所不同，所以還是決定繼續(xù)看源碼，哈哈哈，感興趣的同學(xué)可以去看看，找到合適自己的路由注解。

看到源碼，首先映入眼簾的是

dependencies:
  analyzer: any

analyzer主要負(fù)責(zé)將dart代碼轉(zhuǎn)換成為ast(abstract syntax tree)，具體是什么意思，我隨便一搜索，又是大廠的文章
Flutter動(dòng)態(tài)化，看完感覺如果官方能支持dart代碼=》AST=》dart代碼的話，你們心心念念的熱修復(fù)應(yīng)該就能成了。

之后我又看了下

dependencies:
  build_runner_core: any
  build_runner: any

在build_runner_core的main.dart,我看到PackageGraph如何對(duì)Package的解析。從build_runner中看到了builder執(zhí)行的過程，本來想另開一篇水一下的，后面看到暴打小女孩已經(jīng)寫過了Flutter 注解處理及代碼生成,感興趣的小伙伴可以自己去看一下。

現(xiàn)在知道了怎么解析項(xiàng)目結(jié)構(gòu)以及引用的模塊，知道怎么解析一個(gè)dart代碼，寫法法路由就順利多了，下面直接上使用手冊。

描述

通過注解快速完成路由映射.

• ff_annotation_route
  • 描述
  • 使用
    • 增加引用
    • 添加注解
      • 空構(gòu)造
      • 帶參數(shù)構(gòu)造
      • FFRoute
    • 生成文件
      • 環(huán)境
      • 激活
      • 執(zhí)行命令
      • 命令參數(shù)
    • Main.dart
    • Push
      • Push name
      • Push name with arguments

使用

增加引用

添加引用到dev_dependencies，及你需要注解的project/packages到pubspec.yaml中

dev_dependencies:
  ff_annotation_route: latest-version

執(zhí)行 flutter packages get 下載

添加注解

空構(gòu)造

import 'package:ff_annotation_route/ff_annotation_route.dart';

@FFRoute(
  name: "fluttercandies://mainpage",
  routeName: "MainPage",
)
class MainPage extends StatelessWidget 
{
  // ...
}

帶參數(shù)構(gòu)造

import 'package:ff_annotation_route/ff_annotation_route.dart';

@FFRoute(
  name: "fluttercandies://picswiper",
  routeName: "PicSwiper",
  argumentNames: ["index", "pics"],
  showStatusBar: false,
  pageRouteType: PageRouteType.transparent,
)
class PicSwiper extends StatefulWidget {
  final int index;
  final List<PicSwiperItem> pics;
  PicSwiper({this.index, this.pics});
  // ...
}

FFRoute

生成文件

環(huán)境

添加dart的bin的路徑到你的系統(tǒng) $PATH.

cache\dart-sdk\bin

更多信息

不清楚的可以看掘金

激活

pub global activate ff_annotation_route

執(zhí)行命令

到你的項(xiàng)目根目錄下面執(zhí)行.

ff_route <command> [arguments]

命令參數(shù)

可用的命令:

Main.dart

• 如果運(yùn)行的命令帶有參數(shù) --route-helper , FFNavigatorObserver/FFRouteSettings
  將會(huì)生成在 xxx_route_helper.dart 中，用于協(xié)助追蹤頁面和設(shè)置狀態(tài)欄。

• 如果運(yùn)行的命令帶有參數(shù) --route-helper ，FFTransparentPageRoute 將會(huì)生成在
  xxx_route_helper.dart 中，可以使用它來 push 一個(gè)透明的 PageRoute 。

Widget build(BuildContext context) {
    return OKToast(
        child: MaterialApp(
      title: 'ff_annotation_route demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      navigatorObservers: [
        FFNavigatorObserver(routeChange:
            (RouteSettings newRouteSettings, RouteSettings oldRouteSettings) {
          //you can track page here
          print(
              "route change: ${oldRouteSettings?.name} => ${newRouteSettings?.name}");
          if (newRouteSettings is FFRouteSettings &&
              oldRouteSettings is FFRouteSettings) {
            if (newRouteSettings?.showStatusBar !=
                oldRouteSettings?.showStatusBar) {
              if (newRouteSettings?.showStatusBar == true) {
                SystemChrome.setEnabledSystemUIOverlays(
                    SystemUiOverlay.values);
                SystemChrome.setSystemUIOverlayStyle(
                    SystemUiOverlayStyle.dark);
              } else {
                SystemChrome.setEnabledSystemUIOverlays([]);
              }
            }
          }
        })
      ],
      builder: (c, w) {
        ScreenUtil.instance =
            ScreenUtil(width: 750, height: 1334, allowFontScaling: true)
              ..init(c);
        var data = MediaQuery.of(c);
        return MediaQuery(
          data: data.copyWith(textScaleFactor: 1.0),
          child: w,
        );
      },
      initialRoute: Routes.FLUTTERCANDIES_MAINPAGE,// fluttercandies://mainpage
      onGenerateRoute: (RouteSettings settings) =>
          onGenerateRouteHelper(settings, notFoundFallback: NoRoute()),
    ),
  );
}

更多信息

Push

Push name

  Navigator.pushNamed(context, Routes.FLUTTERCANDIES_MAINPAGE /* fluttercandies://mainpage */);

Push name with arguments

參數(shù)必須是一個(gè) Map<String, dynamic>

  Navigator.pushNamed(
    context,
    Routes.FLUTTERCANDIES_PICSWIPER, // fluttercandies://picswiper
    arguments: {
      "index": index,
      "pics": listSourceRepository
          .map<PicSwiperItem>((f) => PicSwiperItem(f.imageUrl, des: f.title))
          .toList(),
    },
  );

結(jié)語

不同于其他的路由注解方案，我加入了對(duì)埋點(diǎn)，全屏模式以及路由類型的處理。路由注解方案很多，找到一個(gè)合適自己的就好了，歡迎提問題。

最后放上 ff_annotation_route，歡迎加入Flutter Candies，一起生產(chǎn)可愛的Flutter 小糖果(QQ群:181398081)

最最后放上Flutter Candies全家桶，真香。

image