Flutter 法法路由註解

時間 2019-11-05

原文原文鏈接

最近改造項目，感受Flutter路由這塊須要打磨打磨，想起來以前好像據說過經過註解來生成路由映射的工具褲，嗯，很快就搜索到阿里寫的annotation_route，先start一下，看了下issue，沒有對頁面分散到各個模塊的狀況進行處理，看了下issue時間，貌似沒有改進的計劃，放棄。git

只能本身挖井(挖坑)了，不久以前剛學會用Dart Pub Global 建立命令行應用程序。感受這個註解應該跟官方的json_annotation很類似，因而馬上下載下來，看源碼。github

在看源碼的過程當中，低調大佬作了個ok_route，以及掘金一個小夥伴作了route_generator_repo，都是經過註釋，來生成路由映射的解決方案，由於最後呈現方式跟本身構思的有所不一樣，因此仍是決定繼續看源碼，哈哈哈，感興趣的同窗能夠去看看，找到合適本身的路由註解。json

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

dependencies:
 analyzer: any
複製代碼

analyzer主要負責將dart代碼轉換成爲ast(abstract syntax tree)，具體是什麼意思，我隨便一搜索，又是大廠的文章 Flutter動態化，看完感受若是官方能支持dart代碼=》AST=》dart代碼的話，大家心心念唸的熱修復應該就能成了。工具

以後我又看了下post

dependencies:
 build_runner_core: any
 build_runner: any
複製代碼

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

如今知道了怎麼解析項目結構以及引用的模塊，知道怎麼解析一個dart代碼，寫法法路由就順利多了，下面直接上使用手冊。this

使用

增長引用

添加引用到dev_dependencies，你須要註解的project/packages的pubspec.yaml中spa

dev_dependencies:
 ff_annotation_route: any
複製代碼

執行 flutter packages get 下載.net

添加註解

空構造

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(),
                });

複製代碼