开源鸿蒙跨平台训练营DAY20：Flutter for OpenHarmony 蘑菇列表全流程开发复盘

本文介绍了基于Flutter for OpenHarmony开发的蘑菇图鉴百科应用项目。项目分为三个阶段：1)基础搭建与核心列表功能实现，包括环境配置、网络请求和多状态处理；2)架构完善与收藏功能开发，实现了底部导航、状态保留和本地持久化；3)功能迭代与体验优化，新增账号模块并解决打包问题。项目采用Dio网络请求、Provider状态管理、shared_preferences本地存储等技术栈，解决

tyty0214

147人浏览 · 2026-02-12 00:56:12

tyty0214 · 2026-02-12 00:56:12 发布

##欢迎加入开源鸿蒙跨平台社区

https://openharmonycrossplatform.csdn.net

我的笔记：

一、项目整体概述

本项目基于 Flutter for OpenHarmony 开源鸿蒙跨平台技术栈开发，从环境搭建、基础功能实现，到架构完善、状态管理、本地持久化，再到功能迭代优化，完整完成了一套蘑菇图鉴百科类跨平台应用。整个开发过程分为三阶段，循序渐进、从 0 到 1 落地完整项目。

二、三阶段开发内容总览

第一阶段｜DAY1–7：基础搭建与核心列表功能

目标：环境搭建 + 前后端数据交互 + 基础列表实现

开发环境搭建
- 配置 VSCode、Git、Java17、Android Studio、DevEco Studio
- 完成 Flutter for OpenHarmony 环境编译与验证
- 解决鸿蒙模拟器创建、签名时区不匹配等问题
Git 版本管理
- 创建远程仓库，掌握 add / commit / push / branch 等常用命令
- 实现本地代码与远端仓库同步
前后端开发
- 搭建 Node + Express 本地后端服务
- 提供蘑菇数据接口与图片资源访问
- 前端集成 Dio 实现网络请求
列表功能实现
- 蘑菇数据列表展示
- 下拉刷新 + 上拉加载更多
- 加载中、加载失败、空数据多状态处理
- 鸿蒙虚拟机网络适配（NAT 模式）
本阶段核心问题解决
- 模拟器无法访问本地 API：改用 10.0.2.2
- 刷新 / 加载状态异常：修复 _hasMore 逻辑
- 图片路径错误：统一 baseUrl 拼接规则
- Git 分支不一致：重命名为 main 分支

第二阶段｜DAY8–14：架构完善 + 收藏功能全链路落地

目标：应用架构 + 底部导航 + 状态保留 + 收藏跨页同步 + 本地持久化

应用架构与导航
- 搭建 4 大页面：首页、列表、我的收藏、设置
- 使用 BottomNavigationBar 实现底部 tab
- 使用 AutomaticKeepAliveClientMixin 实现页面状态保留
- 切换页面不重置、不丢失滚动位置
收藏功能全面升级
- 从全局变量升级为 Provider 全局状态管理
- 接入 shared_preferences 实现 本地持久化
- 实现：
  - 跨页面收藏状态实时同步
  - 点击立即变色、无需刷新
  - 重启 APP 数据不丢失
  - 多页面状态完全一致
数据与交互优化
- 蘑菇模型标准化：toJson / fromJson
- 列表分类筛选（全部 / 可食用 / 有毒 / 剧毒）
- 主题切换框架搭建
- 鸿蒙设备竖屏适配、安全区域处理
本阶段重难点突破
- 页面状态保留失效：正确使用 mixin
- 跨页不同步：改用 Provider + 监听
- 本地存储失败：JSON 序列化异常处理
- Provider 作用域失效：根节点使用 MultiProvider

第三阶段｜DAY15-19: 功能迭代与视觉交互体验优化

目标：不破坏原有功能 → 新增账号模块 → 优化体验 → 解决打包问题

功能新增（最小侵入式修改）
- 在设置页面添加：
  - 账号展示（游客 / 登录状态）
  - 登录、注册按钮（带提示）
  - 关于我们弹窗
- 主题切换增加 SnackBar 操作反馈
- 我的收藏页面完全保持不变
代码修改范围
- 只修改：setting_page.dart
- main.dart、mine_page.dart 保持原有逻辑不动
本阶段遇到的关键问题
- 语法错误：I.person 笔误 → 修正为 Icons.person
- 鸿蒙构建失败：签名证书过期
- 解决方案：重新申请证书、修改配置、清理缓存后构建成功
版本提交
- 将最新修改提交并推送到远端仓库
- 完成项目完整迭代闭环