Flutter 四层组件化 + MVVM 项目架构规范。适用于 Flutter 项目开发、新模块创建、目录结构设计、代码评审、架构对齐。支持在项目中直接创建/搭建整套 MVVM+组件化目录结构。
Flutter 组件化 + MVVM 架构规范是一项面向实际任务的技能,主要用于四层纵向依赖 (严格单向):;业务模块内 MVVM :;
业务组件层:强业务实现,按模块拆分,模块间通过路由通信;component;功能组件层:公司/团队通用能力(支付、分享、推送等),与业务有一定绑定;foundation;基础组件层:与公司/项目。
它将相关步骤、工具调用和结果整理方式集中到统一流程中,帮助使用者更快完成目标并减少重复操作。从功能定位来看,该技能强调把分散的操作要求整理成清晰、可复用的处理流程,使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数,再依据技能说明逐步执行;若输入条件不完整,应先补齐信息或采用保守配置,避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期,并对异常提示、缺失字段和边界情况进行处理;涉及批量任务时,还应保存进度,避免中断后重复操作。
四层纵向依赖(严格单向):
app → business → component → foundation
业务模块内 MVVM:
View (page/view) → ViewModel → Repository → Model
| 层级 | 职责 |
|---|---|
| app | 主工程层:全局配置、路由、启动项、模块编排,无业务逻辑 |
| business | 业务组件层:强业务实现,按模块拆分,模块间通过路由通信 |
| component | 功能组件层:公司/团队通用能力(支付、分享、推送等),与业务有一定绑定 |
| foundation | 基础组件层:与公司/项目无关的底层能力,强可移植性 |
{module}/
├── page/ # 页面:xxx_page.dart → XxxPage
├── view/ # 视图:xxx_view.dart、xxx_navigation_bar.dart 等
├── view_model/
├── model/
└── repository/
xxx_page.dart,类 XxxPagexxx_view.dart → XxxView;功能型 xxx_navigation_bar.dart → XxxNavigationBarwidget 关键字app → business → component → foundation当用户要求创建目录结构、搭建架构、新建模块、scaffold 时,在项目 lib/ 下直接创建以下结构:
全量创建(新项目或完整搭建):
lib/app/config/、lib/app/pages/lib/business/{module}/ 下每个模块含 page/、view/、view_model/、model/、repository/lib/component/(可含 pay、share、push、update 等子目录)lib/foundation/(network、image、router、db、utils、base 等)增量创建(新增业务模块):
lib/business/ 下创建 {module_name}/page/、view/、view_model/、model/、repository/创建时按 references/architecture.md 中的完整目录结构执行,确保层级与命名符合规范。
详细目录结构、各层说明、MVVM 职责、命名规范、代码示例、Code Review 标准见 references/architecture.md。
相关专题
热门下载
相关下载
精品课程
共6课时 | 54.7万人学习
共89课时 | 134.1万人学习
共49课时 | 82.6万人学习
最新文章