Flutter 多模块 + 组件化架构设计实践

发布于:2025-08-15 ⋅ 阅读:(17) ⋅ 点赞:(0)

在中大型 Flutter 项目中,如果所有代码都堆在一个工程里,很快就会遇到编译慢、依赖混乱、协作冲突等问题。
多模块化(Multi-module)+ 组件化(Componentization)是一种常见且高效的架构方案,能让项目在规模扩张时依然保持清晰、可维护和可扩展。


一、为什么要多模块 + 组件化?

在 Flutter 中,早期项目往往是“单体工程”,所有页面、逻辑、资源都放在 lib/ 下,导致:

  • 编译慢:改一行代码就需要全量编译。
  • 依赖混乱:不同业务直接互相 import,耦合度高。
  • 协作冲突多:多人改动同一目录或文件。
  • 复用难:公共功能无法方便地在其他项目使用。

多模块化 负责物理拆分和依赖隔离,组件化 负责提高复用和插拔能力,两者结合,效果就像 Android 多 Module + iOS CocoaPods + Web 微前端。


二、架构分层设计

一个典型的 Flutter 多模块 + 组件化架构,可以分为三层:

1. Core 层(核心基础层)

提供全局可复用的基础能力:

  • 网络(如 Dio 封装)
  • 本地存储(SharedPreferences、SQLite)
  • 日志系统
  • 国际化(i18n)
  • 主题 & 样式
  • 工具类(时间、加密、正则等)
  • 路由管理

📂 示例目录:

packages/core_network/
packages/core_ui/
packages/core_utils/


2. Feature 层(业务功能层)

每个业务功能是一个独立模块,包含该功能所需的 UI、逻辑、数据访问等。

示例:

  • feature_auth(登录注册)
  • feature_home(首页)
  • feature_profile(个人中心)
  • feature_settings(设置)

📂 目录结构示例:

packages/feature_home/
├── lib/
│ ├── ui/ # 页面 & Widget
│ ├── controllers/ # 状态管理(GetX/BLoC)
│ ├── models/ # 数据模型
│ ├── repository/ # 数据访问接口
│ └── feature_home.dart


3. Shared 层(公共组件层)

可跨模块复用的 UI 组件和业务组件:

  • 公共 UI(按钮、表单、弹窗、轮播图)
  • 公共业务组件(地址选择器、地图选择、扫码)
  • 动画库
  • 状态控件(加载、空状态、错误页)

📂 示例:

packages/shared_widgets/
packages/shared_business/


三、模块间通信方式

为了降低耦合,模块之间不要直接 import 内部类,可以用以下几种方式:

1. 路由协议化

统一路由注册表:

// core_router.dart
class AppRoutes {
  static const login = '/auth/login';
  static const profile = '/profile';
}

调用:

Get.toNamed(AppRoutes.login, arguments: {...});2. 抽象接口(依赖倒置原则)

公共接口放在 core 层,由具体模块实现:

// core/interfaces/user_service.dart
abstract class UserService {
  String getCurrentUserId();
}

主工程或 DI 时绑定实现:

Get.put<UserService>(UserServiceImpl());3. 事件总线

跨模块数据广播:

eventBus.fire(UserLoggedInEvent(userId));4. 依赖注入

使用 GetXRiverpod、injectable、get_it 进行运行时依赖注入。

⸻

四、项目结构设计

推荐 Monorepo(一个 Git 仓库管理所有模块):

my_app/
 ├── app/                  # 主应用(壳工程)
 ├── packages/
 │    ├── core_network/
 │    ├── core_ui/
 │    ├── feature_auth/
 │    ├── feature_home/
 │    ├── shared_widgets/
 │    └── shared_business/
 ├── pubspec.yaml

	•	主工程依赖各个模块:path: ../packages/core_network
	•	本地调试方便,统一版本管理

⸻

五、架构依赖关系图

 ┌────────────────────────────────────┐
 │               App Shell            │
 │   - 全局路由                        │
 │   - 依赖注入 / 状态管理               │
 └──────────────▲─────────────────────┘
                │
 ┌──────────────┼─────────────────────┐
 │              │                     │
 │      Feature Modules               │
 │  feature_auth  feature_home  ...   │
 │   (独立UI+逻辑+数据)                 │
 └──────────────▲─────────────────────┘
                │
 ┌──────────────┼─────────────────────┐
 │              │                     │
 │     Shared Components              │
 │  shared_widgets / shared_business  │
 └──────────────▲─────────────────────┘
                │
 ┌──────────────┼─────────────────────┐
 │              │                     │
 │   Core Infrastructure              │
 │ core_network / core_ui / utils     │
 └────────────────────────────────────┘


⸻

六、落地建议
	•	小型项目:按目录分模块(单工程多目录)。
	•	中型项目:Feature + Core + Shared 拆分为 packages。
	•	大型项目/多团队:完全组件化,多 repo 或私有 pub 仓库管理。

⸻

七、总结

多模块化解决了物理拆分和依赖隔离,组件化让代码具备高复用和可插拔性。
在 Flutter 中引入多模块 + 组件化,可以显著提升大型项目的编译速度、维护性和协作效率。

网站公告

今日签到

点亮在社区的每一天
去签到