Flutter 法法路由註解

法的空間發表於2019-08-19
Flutter路由

最近改造專案，感覺Flutter路由這塊需要打磨打磨，想起來之前好像聽說過通過註解來生成路由對映的工具褲，嗯，很快就搜尋到阿里寫的annotation_route，先start一下，看了下issue，沒有對頁面分散到各個模組的情況進行處理，看了下issue時間，貌似沒有改進的計劃，放棄。

只能自己挖井(挖坑)了，不久之前剛學會用Dart Pub Global 建立命令列應用程式。 感覺這個註解應該跟官方的json_annotation很相似，於是立刻下載下來，看原始碼。

在看原始碼的過程中，低調大佬做了個ok_route，以及掘金一個小夥伴做了route_generator_repo，都是通過註釋，來生成路由對映的解決方案，因為最後呈現方式跟自己構思的有所不同，所以還是決定繼續看原始碼，哈哈哈，感興趣的同學可以去看看，找到合適自己的路由註解。

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

dependencies:
  analyzer: any
複製程式碼

analyzer主要負責將dart程式碼轉換成為ast(abstract syntax tree)，具體是什麼意思，我隨便一搜尋，又是大廠的文章 Flutter動態化，看完感覺如果官方能支援dart程式碼=》AST=》dart程式碼的話，你們心心念唸的熱修復應該就能成了。

之後我又看了下

dependencies:
  build_runner_core: any
  build_runner: any
複製程式碼

在build_runner_core的main.dart,我看到PackageGraph如何對Package的解析。從build_runner中看到了builder執行的過程，本來想另開一篇水一下的，後面看到暴打小女孩已經寫過了Flutter 註解處理及程式碼生成,感興趣的小夥伴可以自己去看一下。

現在知道了怎麼解析專案結構以及引用的模組，知道怎麼解析一個dart程式碼，寫法法路由就順利多了，下面直接上使用手冊。

使用

增加引用

新增引用到dev_dependencies，你需要註解的project/packages的pubspec.yaml中

dev_dependencies:
  ff_annotation_route: any
複製程式碼

執行 flutter packages get 下載

新增註解

空構造

import 'package:ff_annotation_route/ff_annotation_route.dart';

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

複製程式碼

帶引數構造

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

parameter description default
name 路由的名字(e.g., "/settings"). required
argumentNames 路由的引數的名字 -
showStatusBar 是否顯示狀態列 true
routeName 用於埋點收集資料的頁面名字 ''
pageRouteType 路由的型別(material, cupertino, transparent) -
description 路由的描述 ''

生成檔案

環境

新增dart的bin的路徑到你的系統 $PATH.

cache\dart-sdk\bin

更多資訊

不清楚的可以看掘金

啟用

pub global activate ff_annotation_route

執行命令

你可以到你的專案路徑下面執行 ff_annotation_route

你也可以直接執行，並且帶上你的專案路徑 ff_annotation_route path=

命令引數

使用 parameter=xxx, 使用空格隔開多個引數

引數 描述 預設
path 你的專案路徑 當前路徑
generateRouteNames 是否在根專案中的 xxx_route.dart 生成全部路由的名字 false
mode 0或者1, 模式1會生成 xxx_route_helper.dart 來幫助你處理 showStatusBar/routeName/pageRouteType 0
routeSettingsNoArguments 如果為true， FFRouteSettings 將沒有arguments這個引數,這個是主要是為了適配Flutter低版本 false

Main.dart

  • 如果你設定命令帶有引數 mode=1, FFNavigatorObserver/FFRouteSettings 將會生成 在 xxx_route_helper.dart 他們幫助追蹤頁面和設定狀態列.

  • 如果你設定命令帶有引數 mode=1,FFTransparentPageRoute 將會生成 在 xxx_route_helper.dart 它幫助push一個透明的PageRoute.

Widget build(BuildContext context) {
    return OKToast(
        child: MaterialApp(
      title: 'ff_annotation_route demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      navigatorObservers: [
        FFNavigatorObserver(routeChange: (name) {
          //you can track page here
          print(name);
        }, showStatusBarChange: (bool showStatusBar) {
          if (showStatusBar) {
            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: "fluttercandies://mainpage",
      onGenerateRoute: (RouteSettings settings) {
        var routeResult =
            getRouteResult(name: settings.name, arguments: settings.arguments);

        if (routeResult.showStatusBar != null ||
            routeResult.routeName != null) {
          settings = FFRouteSettings(
              arguments: settings.arguments,
              name: settings.name,
              isInitialRoute: settings.isInitialRoute,
              routeName: routeResult.routeName,
              showStatusBar: routeResult.showStatusBar);
        }

        var page = routeResult.widget ?? NoRoute();

        switch (routeResult.pageRouteType) {
          case PageRouteType.material:
            return MaterialPageRoute(settings: settings, builder: (c) => page);
          case PageRouteType.cupertino:
            return CupertinoPageRoute(settings: settings, builder: (c) => page);
          case PageRouteType.transparent:
            return FFTransparentPageRoute(
                settings: settings,
                pageBuilder: (BuildContext context, Animation<double> animation,
                        Animation<double> secondaryAnimation) =>
                    page);
          default:
            return Platform.isIOS
                ? CupertinoPageRoute(settings: settings, builder: (c) => page)
                : MaterialPageRoute(settings: settings, builder: (c) => page);
        }
      },
    ));
  }
複製程式碼

更多資訊

Push

Push name

  Navigator.pushNamed(context, "fluttercandies://mainpage");
複製程式碼

Push name with arguments

引數應該是一個 Map<String,dynamic>

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

複製程式碼

結語

不同於其他的路由註解方案，我加入了對埋點，全屏模式以及路由型別的處理。路由註解方案很多，找到一個合適自己的就好了，歡迎提問題。

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

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

Flutter 法法路由註解

相關文章