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 路由赋值上面我已经导入写入了 

Flutter 命名路由以及命名路由传参数

 

接下来我们就可以使用我们已经配置好的路由了

Flutter 命名路由以及命名路由传参数

传入的参数我们通过构造函数进行接受

上一篇:flutter 设置Appbar上面的电池显示的状态栏的背景与颜色


下一篇:Flutter 按键事件监听 RawKeyboardListener