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

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

---

#前置条件：

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

##多终端工程创建运行
 

---

#具体流程：

##1：规划页面结构，创建基础页面文件

1. 划分页面模块：
   • 首页（home_page.dart）：展示应用简介、分类入口、热门推荐；
   • 数据列表页（mushroom_list_page.dart）：蘑菇数据分页加载、下拉刷新；
   • 我的中心页（mine_page.dart）：用户信息、收藏列表、测试输入框；
   • 设置页（setting_page.dart）：主题切换、缓存清理、关于应用。
2. 创建页面文件：在lib/pages目录下新建上述 4 个 Dart 文件，每个页面继承StatefulWidget。

##2：实现底部选项卡导航（核心导航组件）

1. 创建主选项卡页面（MainTabPage）：
   • 在main.dart中定义MainTabPage（继承StatefulWidget），作为应用根页面；
   • 定义_pages列表，包含 4 个页面实例（与选项卡顺序对应）；
   • 定义_selectedIndex记录当前选中的选项卡索引。
2. 配置BottomNavigationBar：
   • 设置items属性，为每个选项卡配置图标（未选中 / 选中态）、标签；
   • 配置selectedItemColor（选中态颜色）、unselectedItemColor（未选中态颜色）；
   • 设置type: BottomNavigationBarType.fixed（适配 4 个选项卡），绑定onTap事件切换_selectedIndex。
3. 用IndexedStack保留页面状态：
   • 页面主体使用IndexedStack包裹_pages，通过index: _selectedIndex切换页面；
   • 作用：切换选项卡时页面不重建，保留滚动位置、输入内容等状态。

##3：实现页面状态保留

1. 为每个页面添加状态保留能力：
   • 在每个页面的State类中混入AutomaticKeepAliveClientMixin；
   • 重写wantKeepAlive方法，返回true；
   • 在build方法中调用super.build(context)（必须执行，否则状态保留失效）。
2. 验证效果：在 “我的” 页面输入框填写内容，切换选项卡后返回，内容仍保留。

##4：实现页面间功能联动

1. 全局收藏列表：
   • 在home_page.dart中定义全局collectList（临时存储收藏的蘑菇数据）；
   • 首页 “热门推荐” 的收藏按钮点击时，向collectList添加 / 移除数据，并通过ScaffoldMessenger显示提示。
2. 收藏列表联动：
   • 在 “我的” 页面中，直接使用collectList渲染收藏列表；
   • 实现 “取消收藏”“清空收藏” 功能，操作后更新collectList并刷新 UI。

##5：优化交互与适配

1. API 数据加载适配：
   • 在首页、列表页中通过Dio请求 API 数据，处理加载中、加载失败、空数据状态；
   • 列表页实现下拉刷新、上拉加载更多功能（借助pull_to_refresh插件）。
2. 鸿蒙设备适配：
   • 在main.dart中设置SystemChrome.setPreferredOrientations锁定竖屏；
   • 用SafeArea包裹BottomNavigationBar，避开鸿蒙虚拟导航栏。

---

---

#DAY8~10总结：

##关键知识点与问题：

###知识点：

1. BottomNavigationBar：Flutter 底部导航组件，需注意type属性适配多选项卡；
2. IndexedStack：保留子组件状态的容器，适用于选项卡页面切换；
3. AutomaticKeepAliveClientMixin：实现页面状态保留的核心混入类；
4. 全局变量 / 状态管理：通过全局列表实现页面间数据联动（简单场景）；
5. API 请求与状态处理：统一处理加载中、失败、空数据等状态，提升用户体验。

###遇到的问题与解决：

1. Icon组件参数错误：误用fontSize，改为size；
2. Text组件参数错误：误用fontSize，改为通过TextStyle设置；
3. 页面状态丢失：忘记调用super.build(context)，补充后状态保留生效；
4. 虚拟机无法访问本地 API：将localhost改为电脑局域网 IP，确保网络互通。

##待优化与未解决问题：

1. 暗色模式功能失效：当前点击 “暗色模式” 开关仅显示提示，未实现真实的主题切换效果，后续需通过ThemeData配置全局主题，绑定开关状态更新 UI；
2. 分类筛选功能未生效：首页 “可食用”“有毒” 分类点击后，未实现对应条件的筛选，仅跳转到默认列表页，后续需通过页面传参将分类条件（edibility）传递给mushroom_list_page.dart，在 API 请求时携带筛选参数；
3. 分类板块优化：需移除 “未知” 蘑菇分类板块，调整home_page.dart中_categories列表的配置，删除对应的映射数据；
4. 收藏功能不完整：
   • 首页收藏的蘑菇未在 “我的” 页面收藏列表中显示，需排查collectList全局变量的访问权限或数据更新逻辑；
   • 数据列表页未添加收藏功能，后续需在mushroom_list_page.dart的列表项中添加收藏按钮，复用首页的收藏逻辑，实现全局收藏联动。