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

https://openharmonycrossplatform.csdn.net

---

#学习资料：

可参考​​​​​​https://bxming.blog.csdn.net/article/details/156203132

https://blog.csdn.net/tyty0214/article/details/157311564?fromshare=blogdetail&sharetype=blogdetail&sharerId=157311564&sharerefer=PC&sharesource=tyty0214&sharefrom=from_link

https://blog.csdn.net/tyty0214/article/details/157379995
https://blog.csdn.net/tyty0214/article/details/157442068

https://blog.csdn.net/tyty0214/article/details/157500747

https://blog.csdn.net/tyty0214/article/details/157825622

---

#前置条件：

##环境搭建
1.已安装VScode，Git，DevEco Studio，Java17，Android Studio这些软件。

##多终端工程创建运行

---

#具体流程：

##一、实现的功能

1. 分类筛选功能

   • 支持 “全部蘑菇”“可食用”“有毒 / 剧毒”3 类筛选；
   • 后端自动将 “有毒” 和 “剧毒” 标签的蘑菇合并到 “有毒 / 剧毒” 分类下；
   • 筛选后的数据自动分页（默认每页 5 条）。可以看到分类中并没有出现剧毒的蘑菇，需要进行修改。最后应出现上图内容。

2. 数据分页功能

   • 列表页支持下拉刷新、上拉加载更多；
   • 分页逻辑与筛选条件联动（不同分类下独立分页）。

3. 暗色模式功能

   • 支持 “亮色”“暗色” 3主题切换；
   • 主题切换后全局界面（首页、列表页、我的页）实时生效；
   • 主题偏好自动持久化到本地（重启应用后保留设置）。

##二、注意事项

1. 后端配置

   • 必须将 Node.js 服务监听地址设为0.0.0.0，否则虚拟机无法访问；
   • 接口路径需与 Flutter 端mushroom_dio_util.dart中的baseUrl匹配（如http://10.0.2.2:5000/api）。

2. 参数一致性

   • 前端传递的分页参数名为page和pageSize，后端需对应接收，不能用size等其他名称；
   • 筛选参数edibility的取值需与后端蘑菇数据中的edibility字段完全一致（如 “可食用”“有毒”“剧毒”）。

3. 暗色模式配置

   • 需通过ThemeProvider管理主题状态，确保所有页面使用同一主题实例；
   • 主题切换时需调用notifyListeners()触发界面重建。

##三、可能遇到的问题及解决方法

问题现象	原因	解决方法
分类筛选无效果，始终显示全部蘑菇	后端未实现edibility筛选逻辑	在server.js的接口中添加筛选代码（参考修改后的server.js）
“有毒 / 剧毒” 分类只显示 1 个蘑菇	后端未将 “剧毒” 合并到 “有毒” 分类	在后端筛选逻辑中添加 `item.edibility === ' 有毒'		item.edibility === ' 剧毒 '` 的判断
虚拟机无法访问后端接口	后端地址用了localhost或127.0.0.1	改为10.0.2.2（Android 模拟器）或电脑局域网 IP
分页加载重复数据	分页计算错误	确保start = (page - 1) * pageSize，且page在加载更多后自增
暗色模式切换后界面无变化	页面未监听主题状态	所有页面需通过Consumer<ThemeProvider>包裹界面组件
重启应用后主题恢复默认	未持久化主题偏好	使用shared_preferences将主题模式保存到本地，初始化时读取

---

#DAY11~12总结：

本次修改聚焦于应用核心功能的完善与体验优化，通过“分类筛选+分页+暗色模式”三大功能的联动实现，显著提升了应用的实用性和用户体验：

##1. 功能层面：

解决了分类筛选遗漏、分页混乱、主题不适配等核心问题，满足用户“精准查询”“高效浏览”“个性化显示”的核心需求；

##2. 技术层面：

实现了前后端参数统一、状态管理规范化、本地存储持久化，为后续功能扩展（如收藏、详情页）奠定了稳定的技术基础；

##3. 体验层面：

通过实时联动、加载状态提示、错误处理等细节优化，降低了用户操作成本，提升了应用的流畅度和易用性。
 
后续可基于当前架构，继续扩展收藏管理、蘑菇详情、搜索等功能，进一步丰富应用生态。