1. 程式人生 > 其它 >Flutter 命名路由以及命名路由傳引數

Flutter 命名路由以及命名路由傳引數

在一些中大型專案當中基本路由配置起來太麻煩了,所以有了命名路由,命名路由就是把所有路由集中起來統一管理,完了以後要用直接呼叫即可!

我們來看具體使用步驟:

先建立一個路由檔案:\lib\routes\Routes.dart

在這裡我們引入我們所有要跳轉到的頁面:

示例:

import 'package:film/pages/tabs.dart';  
import 'package:flutter/material.dart';
import '../pages/atabs/from.dart';
import '../pages/atabs/search.dart';
import '../pages/atabs/fromz.dart';

然後接下來就是定義路由 有一個不傳引數和一個傳引數的:

final Map<String, Function> routes = {
  '/': (context) => tabs(),
  '/from': (context) => from(),  //不傳引數
  '/fromxz': (context, {arguments}) => fromxz(arguments: arguments) //傳引數
};

不傳引數還好,傳引數要進行下一步。

然後接下來開始寫判斷傳參和不傳參 固定寫法

var onGenerateRoute = (RouteSettings settings) {
  //String? 表示name為可空型別
  final String? name = settings.name;
  //Function? 表示pageContentBuilder為可空型別
  final Function? pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route =
          MaterialPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
};

之後然後再在全域性變數裡面進行引入:

import './routes/Routes.dart';

首先這裡我們設定一個初始化載入的路由和給onGenerateRoute 路由賦值上面我已經匯入寫入了

接下來我們就可以使用我們已經配置好的路由了

傳入的引數我們通過建構函式進行接受