
示例工程【免费下载链接】flutter_architecture_samplesTodoMVC for Flutter项目地址https://gitcode.com/gh_mirrors/fl/flutter_architecture_samples点击查看免费下载app_spec.md 是本仓库flutter_architecture_samples即 TodoMVC for Flutter 的多架构对比项目的核心规范文档它定义了一个合格的示例应用长什么样从界面行为、交互细节到数据持久化策略、测试覆盖和路由约定都有明确且可验收的条款。本文以该规范为骨架结合仓库中 vanilla 参考实现及相关核心包的源码逐条拆解这些要求的背后逻辑与落地方式帮助你在实现或评审任何一套新架构示例时拥有一份可直接对照的检查清单。规范定位vanilla 是唯一参考基准规范的出发点非常明确本仓库同时维护十余种状态管理方案的实现vanilla、bloc、redux、mobx、mvc、scoped_model、states_rebuilder 等如果没有统一标准各示例在交互细节上必然分叉进而失去同规格对比架构的意义。因此规范要求以 vanilla 实现作为参考应用新示例应以它为基线新应用看起来、行为起来必须与模板和其他示例完全一致Your app should look and behave exactly like the template and the other examples实现前建议先实际体验其他应用的交互遇到不清晰或可改进之处再反馈。同时每个示例都必须附带 README说明整体实现方式、所用框架以及构建流程可参考 vanilla/README.md。从仓库结构看vanilla 之所以被选为基准是因为它只依赖 Flutter 自带的StatefulWidget没有任何第三方状态管理库是最纯粹的功能基线。其 vanilla/README.md 详细阐述了本仓库最重要的两个基础模式通过状态提升Lifting State Up共享数据通过回调函数反向更新父级状态。代码规范从格式到平台全覆盖规范对代码本身提出 5 条硬性要求直接决定了所有示例的工程基线要求具体内容仓库佐证代码格式化使用dartfmt格式化代码各示例 lib 目录下所有.dart文件均遵循 Dart 官方格式静态分析使用 vanilla 的.analysis_options.yaml保证零分析错误仓库根目录的 analysis_options.yaml 即该基线启用了 pedantic 1.9.0 规则集视觉一致性使用基础包base package提供的 Theme 和 Widgets除非要演示某种替代实践todos_app_core/lib/src/theme.dart 中的ArchSampleTheme平台支持应用必须同时运行在 Android 和 iOS 上每个示例均含android/与ios/平台工程测试应用必须包含测试各示例均有test/目录如 vanilla/test/app_state_test.dart其中基础包指的是仓库中的两个核心共享库todos_app_core提供主题、本地化、路由常量、Widget Key 等 UI 基础设施。例如 todos_app_core/lib/src/theme.dart 定义的ArchSampleTheme基于ThemeData.dark()将主色设为Colors.grey[800]、强调色设为Colors.cyan[300]并统一配置了 SnackBar 背景与操作按钮颜色保证所有示例外观一致todos_repository_core定义数据层抽象TodosRepository接口让各架构示例可以注入不同的持久化实现。analysis_options.yaml中的规则如always_declare_return_types、prefer_single_quotes、unnecessary_new等是 Google 内部强制执行的 lint 集合示例代码可以直接作为符合该风格的范例阅读。用户界面规范逐屏逐项的行为契约规范用 8 个小节定义了从主页到统计页的全部界面行为下面逐屏对照源码拆解。1. Home Screen两个 Tab 的应用骨架主页包含两个 TabTodos 列表与Stats 统计。在 vanilla/lib/screens/home_screen.dart 中通过BottomNavigationBar实现Tab 切换状态由HomeScreenState自己管理activeTab这正体现了 vanilla 架构只提升需要共享的状态的原则——当前 Tab 对其它 Widget 无意义所以留在本地。2. List of Todos列表的全部交互细节TodoList 承担了列表核心交互规范要求的行为及其源码对应如下加载态从文件存储或网络加载完成前显示 loading 屏幕。源码中loading true时渲染CircularProgressIndicatorvanilla/lib/widgets/todo_list.dart展示与跳转点击某项进入 Todo Details 屏通过Navigator.push直接压入DetailScreenvanilla/lib/widgets/todo_list.dart勾选完成/未完成点击每项的 Checkbox 调用updateTodo回调滑动删除 SnackBar Undo这是最容易遗漏的细节。滑动删除后必须弹出 SnackBar包含被删 Todo 的标题与 Undo 按钮点击 Undo 时被删除项要追加到列表末尾。vanilla/lib/widgets/todo_list.dart 中的_removeTodo完整实现了这一流程removeTodo(todo)后展示SnackBar2 秒其SnackBarAction回调直接addTodo(todo)由于AppState.todos.add是追加操作被恢复的项自然落在列表尾部过滤右上角过滤图标弹出 All / Active / Completed 选项批量操作右上角 Overflow 菜单提供 Mark All complete 与 Clear completed。3. Add Todo新增 Todo 的校验铁律AddEditScreen 是一个新增/编辑共用的表单屏规范对新增模式的要求在源码中清晰可见任务输入框TextField在打开Add New Todo时必须自动聚焦源码中autofocus: isEditing ? false : truevanilla/lib/screens/add_edit_screen.dart新增时为true编辑时为false必须.trim()后再判空为空则报错validator: (val) val.trim().isEmpty ? ... : nullvanilla/lib/screens/add_edit_screen.dart必须存在 Notes 输入框存放备注点击 按钮关闭屏幕并把新 Todo 追加到列表form.validate()通过后form.save()再调用addTodo回调并Navigator.popvanilla/lib/screens/add_edit_screen.dart按返回键关闭屏幕且不创建onWillPop直接返回true允许退出vanilla/lib/screens/add_edit_screen.dart。4. Todo Details详情、编辑与删除DetailScreen 满足规范三条要求展示任务与笔记全文Checkbox 切换完成状态并通过updateTodo回写保证返回主列表后状态同步vanilla/lib/screens/detail_screen.dart点击 Edit 进入编辑屏这里演示了规范所说的push 新 Route方式用MaterialPageRoute直接压入复用AddEditScreenvanilla/lib/screens/detail_screen.dart右上角删除图标删除后关闭详情屏、回到列表并弹出带 Undo 的 SnackBar行为与列表滑动删除一致。5. Edit Todo编辑模式的差异点编辑模式与新增共用同一表单但有两个关键差异任务输入框不自动聚焦autofocus: false点击 ✓ 按钮Icons.check保存修改后返回详情屏且修改必须反映到详情页——updateTodo(widget.todo, task: task, note: note)直接更新同一个Todo对象vanilla/lib/screens/add_edit_screen.dart。按返回键则不保存任何修改。规范特别要求编辑时的任务字段同样要.trim()后校验非空。6. Filter Todos三种可见性与选中高亮过滤菜单必须提供 All活动完成、Active仅活动、Completed仅完成三项并高亮当前选中项。FilterButton 用PopupMenuButtonVisibilityFilter实现三个菜单项选中项通过activeStyle强调色accentColor着色区别于普通项实际过滤逻辑由 vanilla/lib/models.dart 中的AppState.filteredTodos根据VisibilityFilter枚举all/active/completed完成。7. Overflow Menu动态文案与条件显示Overflow 菜单的行为是规范中状态逻辑最强的部分只要存在未完成项菜单项显示Mark all complete点击后全部标记为完成若全部已完成菜单项显示Mark all incomplete点击后全部标记为未完成提供 Clear completed当不存在已完成项时该项必须隐藏。ExtraActionsButton 接收allComplete与hasCompletedTodos两个布尔量决定文案与是否渲染逻辑落在 vanilla/lib/models.dart 的allComplete、hasCompletedTodosgetter 与 toggleAll、clearCompleted 方法上。toggleAll的实现是取反全选状态todos.forEach((todo) todo.complete !allCompleted)。8. Stats Screen统计与联动统计页显示 Completed 与 Active 两项数量该 Tab 下右上角过滤菜单必须隐藏通过 Overflow 菜单执行批量操作后统计必须同步刷新。vanilla/lib/widgets/stats_counter.dart 负责展示数量由 vanilla/lib/models.dart 的numActive、numCompleted计算。过滤菜单的隐藏是通过 FilterButton 的AnimatedOpacityIgnorePointer组合实现的传入isActive: activeTab AppTab.todosvanilla/lib/screens/home_screen.dart切到 Stats Tab 时透明度降为 0 且不响应点击。统计与列表共用同一个AppState任何setState都会触发两个 Tab 的重新构建从而天然满足联动要求。数据层规范三级持久化与简单同步策略规范定义了数据持久化的三层结构这是所有示例数据层设计的共同前提内存缓存In-memory cache——快磁盘文件、SQLiteDb——慢网络——非常慢本仓库用 Mock 服务演示由于跨层同步的复杂度因场景而异示例统一采用最简单的同步策略每次读取操作优先返回内存缓存若无则读磁盘再否则请求网络每次写入/删除操作依次更新缓存 → 更新本地 → 更新远程首次网络请求后不再重复命中网络允许使用 Mock Web Service 演示无需真的搭建远程服务。这一分层思想体现在数据层抽象上。todos_repository_core/lib/src/todos_repository.dart 定义的TodosRepository接口只有两个方法loadTodos()优先从文件存储、出错或缺失时回退 Web Client与saveTodos()同时持久化到本地磁盘与 Web。vanilla 应用通过 vanilla/lib/main.dart 注入LocalStorageRepository基于SharedPreferences的KeyValueStorage作为实现todos_repository_local_storage/lib/src/reactive_repository.dart 则展示了内存缓存BehaviorSubject 本地落盘的经典组合每次增删改先更新内存中的 Subject再调用底层saveTodos持久化。值得一提的是 vanilla 的持久化触发方式VanillaAppState重写了setStatevanilla/lib/app.dart在每次状态刷新后自动调用repository.saveTodos(...)把每次状态更新即落盘的规范要求落到了架构层面。测试规范单元测试与集成测试双轨单元 / Widget 测试规范要求示例必须包含测试理由是架构是否易于测试是选型时的重要考量不要求编写穷尽的 Widget 测试套件但如果架构便于 Widget 测试应提供演示。vanilla 的做法极具参考价值把业务逻辑从 Widget 中抽离成纯 Dart 对象PODO——vanilla/lib/models.dart 中的AppState、Todo不依赖 Flutter因此可以直接用test包做纯单元测试无需 Widget 树。集成测试所有示例都必须通过统一的集成测试套件即 integration_tests 目录其使用方式与原理记录在 integration_tests/README.md用flutter_driver驱动测试测试代码按Page Object ModelPOM模式组织将 UI 查找器与操作封装成HomeTestScreen、TodoItemElement等类提升可读性与可复用性运行命令cd vanilla/后执行flutter drive --target test_driver/todo_app.dart各示例的 vanilla/test_driver/todo_app.dart 通过enableFlutterDriverExtension()启用驱动扩展并启动应用。集成测试之所以能在所有架构间通用依赖的是统一的基础设施Widget Key 约定。所有可交互控件都挂有ArchSampleKeys定义的稳定 Key如__todoList__、__addTodoFab__、__snackbar__见 todos_app_core/lib/src/keys.dart测试通过find.byValueKey精确定位从而与具体架构无关。集成测试 README 也诚实列出了当前flutter_driver的限制尚无法发送文本输入新增/编辑未覆盖与检测 Checkbox 勾选状态。路由规范两条必选命名路由规范规定应用必须包含 2 条命名路由定义于 todos_app_core/lib/src/routes.dart路由目的地说明/主 Tabs 屏列表 统计的入口/addTodo新增 Todo 屏FAB 点击后跳转而 Details 与 Edit 屏可以二选一使用命名路由或直接用Navigator.push压入新 Route。vanilla 的 vanilla/lib/app.dart 同时示范了两种方式主页与新增页走routes:命名路由表详情页与编辑页则由Navigator.of(context).push(MaterialPageRoute(...))直接压栈。小结用规范驱动架构对比回顾全文app_spec.md 通过参考应用、代码规范、界面行为、数据层、测试、路由六条主线把一致体验落成了可逐项验收的硬指标交互细节trim 校验、SnackBar Undo 追加到末尾、过滤高亮、批量操作文案有精确的文案与行为约定数据层有三层缓存与先内存后磁盘再网络的简单同步策略工程质量由 lint 规则、单元测试和跨架构通用基于稳定 Key 的flutter_driver集成测试兜底。对开发者和架构评估者而言这份规范就是对照任何一套新示例bloc、redux、mobx、mvc……的验收清单而 vanilla 则是最低复杂度、最能看清规范本意的活教材推荐从它开始逐屏体验、逐条对照。赞分享示例工程【免费下载链接】flutter_architecture_samplesTodoMVC for Flutter项目地址https://gitcode.com/gh_mirrors/fl/flutter_architecture_samples点击查看免费下载相关推荐Awesome Claude Skills与GitHub Actions集成开发流程自动化的完整指南Awesome Claude Skills与GitHub Actions集成开发流程自动化的完整指南 在现代软件开发中自动化是提升效率的关键。AwesomeAI 技能AI 插件人工智能工作流自动化TodoMVC jQuery 示例单文件架构下的经典 Todo 应用实现解析TodoMVC jQuery 示例单文件架构下的经典 Todo 应用实现解析 TodoMVC 仓库中的 examples/jquery https://lin示例工程前端用 Java 编写前端GWT TodoMVC 示例的架构、编译与构建全解析用 Java 编写前端GWT TodoMVC 示例的架构、编译与构建全解析 Google Web ToolkitGWT是一套用于构建和优化复杂浏览器应用的示例工程前端创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考