Flutter 路由——頁面表及頁面引數繫結的自動生成

大膜導師控控發表於2020-03-02

Flutter 自帶完善的路由框架,可以直接用Navigator.of(context).push(route)開啟新頁面或者用命名的方式:Navigator.of(context).pushNamed($pageName);,然後在MaterialApp#onGenerateRoute中寫若干個switch-case根據頁面名稱進行分發。如此操作雖然可行,但是在頁面數量較多時,還是略微繁瑣。

有時候頁面需要外部傳參——依賴注入,常規的方法是:

  1. 在頁面Widget上新增變數
  2. 建構函式傳入
  3. 在State中widget.something引用
  4. 同時在onGenerateRoute中建立widget中呼叫對應的建構函式。

此方法稍顯繁瑣,並且在頁面依賴變化時,又要重複這4個步驟。 如果能通過簡單的配置生成程式碼,並且直接使用,可以簡化原始碼,節省時間並且避免出錯。我先是在網上搜尋相關的解決方案,但是沒找到。因此自己動手造了這個輪子——router_generatorpub, github.

使用

安裝

dev_dependencies:
  router_generator: 0.1.1
  build_runner:
複製程式碼

引用

import 'package:router_generator/router_generator.dart';

頁面標記

@Router('third')
class ThirdPage extends StatefulWidget {
複製程式碼

在頁面Widget上使用Router註解,頁面名作為引數

引數標記

@inject
class ThirdPageState extends State<ThirdPage> {
  @RouterParam(required: true)
  Person person;
  @RouterParam(key: 'set_key')
  bool setKey = false;
  @routerParam
  Map<String, int> map;
複製程式碼

給需要注入依賴的State新增inject註解,並且在變數上新增RouterParam 註解RouterParam有兩個可選的引數:

  • key: 此引數在參數列中的鍵,預設用變數名
  • required:是否必須,如果是的話,在依賴注入時,如果參數列中沒有此引數,debug模式下會報錯,並且在生成的createRouteArgs方法中此引數為必須。

如果兩個引數都不需要,建議用routerParam註解。 從例子中可以看到,dart的各種型別包括自定義的model都是支援的

程式碼生成

執行命令:flutter packages pub run build_runner build, 更多使用方法可參考 build_runner

生成的若干dart檔案中包含:

  • 頁面路由表 main.router_table.dart
  • 頁面依賴注入 $page.inject.dart 若干個,其中 page 是你 state所在 檔案的名稱,例如 foo.dart對應foo.inject.dart

引用

路由生成

MaterialApp(
  ...
  onGenerateRoute: (RouteSettings settings) {
    String pageName = settings.name;
    var arguments = settings.arguments;
    if (arguments is Map<String, dynamic>) {
      deliverParams(pageName, arguments);
    }
    return MaterialPageRoute(builder: (_) {
      return getWidgetByPageName(pageName);
    });
  },
);
複製程式碼

修改onGenerateRoute方法,呼叫main.router_table.dart中的getWidgetByPageName,獲取對應的頁面Widget,並且deliverParams()傳遞引數。

對於嵌入原有原生的App,可參考:

onGenerateRoute: (RouteSettings settings) {
    String route = settings.name;
    Uri uri = Uri.parse(route);
    var pageName = uri.path.replaceFirst(RegExp('/'), '');
    lastRouteParams = uri.queryParameters;
    return PageRouteBuilder(pageBuilder: (BuildContext context,
        Animation<double> animation, Animation<double> secondaryAnimation) {
      return getWidgetByPageName(pageName);
    });
  },
複製程式碼

Map<String, String>型別的參數列(即uri中值為字串的參數列)也是支援的,不需要額外轉換。

依賴注入

在已注入依賴的state中import 對應的inject檔案,在使用變數前注入依賴,如:

@override
void initState() {
	super.initState();
	injectDependencies(this);
	doSometing();
}
複製程式碼

傳遞依賴


Navigator.of(context).pushNamed('second',
                    arguments: {'name': 'bar', 'count': 666});
                    
複製程式碼

可以手動建立依賴的參數列,但建議使用 inject 檔案中的 createRouteArgs方法。

Navigator.of(context).pushNamed('second',
                    arguments: createRouteArgs(name: 'bar', count: 666));

複製程式碼

總結

如此,就完成了頁面表及頁面引數繫結的自動生成,增減頁面和注入引數變得如此簡單。有問題的同學歡迎留言或者提issue,github點個贊?

相關文章