当前位置：首页 > backend >正文

Flutter路由模块化管理方案

backend 2025/5/18 9:29:28

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

1、创建路由基类

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

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

// 认证模块路由
class AuthRoutes extends BaseRouteConfig {@overrideMap<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 {@overrideMap<String, WidgetBuilder> get routes => {'editPersonal': (context) => const EditPersonalPage(),'userCenter': (context) => const IndividualCenter(),'accountSecurity': (context) => const AccountSecurity(),// 其他用户中心路由...};
}// 商家模块路由
class MerchantRoutes extends BaseRouteConfig {@overrideMap<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、创建聚合路由配置类

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 方法初始化路由

void main() async {// ...其他初始化代码// 初始化路由配置AppRoutes.initialize();runApp(MaterialApp(// ...routes: AppRoutes.allRoutes,// ...));
}

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

// 新增创作中心模块
class CreativeRoutes extends BaseRouteConfig {@overrideMap<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);}
}

优势说明：