Flutter路由模块化管理方案

总结记录一下Flutter路由模块管理：

1、创建路由基类

Dart 复制代码

abstract class BaseRouteConfig {
  Map<String, WidgetBuilder> get routes;
}

2、创建不同模块的路由配置类

Dart 复制代码

// 认证模块路由
class AuthRoutes extends BaseRouteConfig {
  @override
  Map<String, WidgetBuilder> get routes => {
    'login': (context) {
      final int viType = ModalRoute.of(context)?.settings.arguments as int;
      return PassLoginPage(viType: viType);
    },
    '/login': (context) => const LoginPage(),
    'phoneVerifyCode': (context) {
      final phone = ModalRoute.of(context)?.settings.arguments as String?;
      return PhoneVerifyCodePage(phone: phone);
    },
    '/phoneVerifyCode': (context) => const PhoneVerifyCodePage(),
    // 其他认证相关路由...
  };
}

// 用户中心模块路由
class UserCenterRoutes extends BaseRouteConfig {
  @override
  Map<String, WidgetBuilder> get routes => {
    'editPersonal': (context) => const EditPersonalPage(),
    'userCenter': (context) => const IndividualCenter(),
    'accountSecurity': (context) => const AccountSecurity(),
    // 其他用户中心路由...
  };
}

// 商家模块路由
class MerchantRoutes extends BaseRouteConfig {
  @override
  Map<String, WidgetBuilder> get routes => {
    'merchant': (context) => const MerchantWidget(),
    'merchantBasicInfo': (context) => const MerchantBasicInfo(),
    'merchantBasicDetail': (context) {
      final status = ModalRoute.of(context)?.settings.arguments as String?;
      return MerchantBasicDetail(status: status);
    },
    // 其他商家路由...
  };
}

3、创建聚合路由配置类

Dart 复制代码

class AppRoutes {
  static final Map<String, WidgetBuilder> _allRoutes = {};

  static void initialize() {
    _allRoutes.addAll(AuthRoutes().routes);
    _allRoutes.addAll(UserCenterRoutes().routes);
    _allRoutes.addAll(MerchantRoutes().routes);
    // 添加其他模块路由...
  }

  static Map<String, WidgetBuilder> get allRoutes => _allRoutes;
}

4、使用方法，修改 main 方法初始化路由

Dart 复制代码

void main() async {
  // ...其他初始化代码
  
  // 初始化路由配置
  AppRoutes.initialize();

  runApp(
    MaterialApp(
      // ...
      routes: AppRoutes.allRoutes,
      // ...
    )
  );
}

5、添加新路由模块的示例

Dart 复制代码

// 新增创作中心模块
class CreativeRoutes extends BaseRouteConfig {
  @override
  Map<String, WidgetBuilder> get routes => {
    'creativeCenter': (context) => const CreativeCenter(),
    'workRelease': (context) => const WorkRelease(),
    'uploadWork': (context) => const UploadWorkPage(),
    // 其他创作相关路由...
  };
}

// 在 AppRoutes 中添加
class AppRoutes {
  // ...
  static void initialize() {
    // ...
    _allRoutes.addAll(CreativeRoutes().routes);
  }
}

优势说明：

模块化管理：将路由按功能模块划分，便于维护和查找
扩展性强：新增模块只需创建新的配置类并注册到 AppRoutes
类型安全：每个路由配置都是强类型校验
参数处理：保留原有的动态参数处理逻辑
命名规范：

使用命名路由统一以'/'开头
页面路由使用小驼峰命名
Dialog 路由添加 Dialog 后缀

这种架构可以很好地支持大型项目的路由管理需求，同时保持代码的可维护性和扩展性。新的开发人员可以快速定位路由配置位置，模块负责人可以独立维护自己模块的路由配置。