Flutter+开源鸿蒙实战｜校园易生活Day7 个人中心完善+我的发布/收藏+退出登录+主题切换+全局UI美化（项目闭环）
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
<!– Schema.org 结构化数据 –>
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"BlogPosting",
"headline":"Flutter+开源鸿蒙实战 校园易生活Day7 个人中心完善+我的发布+我的收藏+主题切换+项目闭环",
"author":{"@type":"Person","name":"鸿蒙跨端开发者"},
"publisher":{"@type":"Organization","name":"CSDN开源鸿蒙跨平台社区"},
"datePublished":"2026-05-07",
"description":"校园易生活Day7终极完善，彻底搞定个人中心全功能：我的发布/收藏列表、详情跳转、退出登录弹窗、全局主题切换，同时做全局UI美化，修复所有细节bug，实现项目完整闭环，口语化讲解+核心代码+新手避坑，适配鸿蒙多端",
"keywords":"Flutter,开源鸿蒙,OpenHarmony,校园易生活,Day7,个人中心完善,我的发布,我的收藏,主题切换,项目闭环"
}
</script>
一、前言
哈喽小伙伴们，咱们校园易生活系列终于来到Day7啦！🥳 也是咱们这个项目的「闭环收官日」～
先快速回顾下前面6天的成果，咱们一步步从0搭建，到今天已经完成了90%的功能：
Day1：项目骨架、底部导航、鸿蒙多端适配基础；
Day2：第三方库集成、首页轮播、Toast/网络监听；
Day3-Day4：闲置市场列表、商品详情、收藏功能、路由传参；
Day5：闲置发布、相册选图、本地缓存、校园求助入口；
Day6：校园跑腿、任务列表、接单逻辑、个人中心基础骨架。
今天Day7，咱们不新增复杂功能，重点做「完善+美化+闭环」——把个人中心彻底做完，解决所有细节bug，优化全局UI，让整个APP看起来更专业、更流畅，完全达到毕设交付标准。
而且我还加了一个超实用创意功能：全局主题切换（清新青绿色/简约灰色），毕设里加这个小功能，答辩时绝对加分！
全文依旧保持口语化大白话，不搞生硬术语，每段代码前都讲清用途，代码只放核心几行；预判新手最后阶段容易踩的“收尾坑”，逐点通俗解答；所有优化都适配鸿蒙手机、平板，真机运行效果拉满，做完就能直接展示、答辩。
今日核心目标（收尾闭环版）：
二、今日依赖库说明
无需新增任何第三方库！
直接复用前面所有依赖：getx、flutter_screenutil、flutter_easy_refresh、fluttertoast、shared_preferences、image_picker。
不用改配置、不用装依赖，重点做完善和美化，省心收尾。
三、版块1：完善「我的发布」页面（关联闲置/跑腿数据）
文字讲解（大白话）
Day6咱们搭了个人中心的基础架子，今天先完善「我的发布」——点击个人中心的“我的发布”，跳转到新页面，展示自己发布的所有闲置商品和跑腿任务，分开布局，一目了然。
不用重新造数据，直接关联之前闲置、跑腿控制器的数据，过滤出“自己发布”的内容（模拟逻辑，后期对接接口可直接替换），复用之前封装的卡片，不用重复写UI。
class MyPublishPage extends StatelessWidget {
final IdleController idleCtrl = Get.find();
final RunController runCtrl = Get.find();
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("我的发布")),
body: SingleChildScrollView(
child: Column(children: [
// 闲置发布列表（复用之前的闲置卡片）
Text("我的闲置", style: TextStyle(fontSize: 16.sp)),
Obx(() => ListView.builder(
shrinkWrap: true,
itemCount: idleCtrl.idleList.length,
itemBuilder: (ctx, i) => buildIdleCard(idleCtrl.idleList[i]),
)),
// 跑腿发布列表（复用之前的跑腿卡片）
Text("我的跑腿", style: TextStyle(fontSize: 16.sp)),
Obx(() => ListView.builder(
shrinkWrap: true,
itemCount: runCtrl.taskList.length,
itemBuilder: (ctx, i) => buildRunTaskCard(runCtrl.taskList[i]),
)),
]),
),
);
}
}
四、版块2：完善「我的收藏」页面（关联本地缓存）
文字讲解（大白话）
「我的收藏」页面，展示自己收藏过的所有闲置商品，关联Day5做的本地缓存——只要之前收藏过，不管重启APP还是鸿蒙设备，再次进入我的收藏，都能看到收藏的商品，点击还能跳转到商品详情页，形成完整交互闭环。
复用闲置卡片，加上“取消收藏”按钮，点击就能取消收藏，同时更新本地缓存，逻辑和详情页收藏功能联动。
class MyCollectPage extends StatelessWidget {
final IdleController idleCtrl = Get.find();
final IdleDetailController collectCtrl = Get.find();
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("我的收藏")),
body: Obx(() => ListView.builder(
itemCount: idleCtrl.idleList.length,
itemBuilder: (ctx, i) {
var model = idleCtrl.idleList[i];
return GestureDetector(
onTap: () => Get.to(const IdleDetailPage(), arguments: model),
child: buildIdleCard(model),
);
},
)),
);
}
}
五、版块3：个人中心功能入口跳转绑定
文字讲解（大白话）
把个人中心的“我的发布”“我的收藏”，和上面新建的两个页面绑定，点击就能跳转，不用复杂路由配置，用GetX路由一键跳转，同时给入口加个小图标，看着更美观、更直观，符合鸿蒙APP的交互习惯。
// 个人中心功能入口（完善版）
ListTile(
leading: const Icon(Icons.publish),
title: const Text("我的发布"),
onTap: () => Get.to(const MyPublishPage()),
),
ListTile(
leading: const Icon(Icons.star),
title: const Text("我的收藏"),
onTap: () => Get.to(const MyCollectPage()),
),
六、版块4：开发退出登录功能（弹窗确认+交互反馈）
文字讲解（大白话）
个人中心加一个“退出登录”入口，点击不会直接退出，而是弹出一个确认弹窗（防止误触），点击“确认”就返回首页，同时弹出Toast提示“退出登录成功”，点击“取消”就关闭弹窗，交互很完整，也很贴近真实APP的逻辑，新手也能轻松实现。
ListTile(
leading: const Icon(Icons.logout),
title: const Text("退出登录"),
onTap: () => Get.dialog(
AlertDialog(
title: const Text("确认退出？"),
actions: [
TextButton(onPressed: () => Get.back(), child: const Text("取消")),
TextButton(
onPressed: () {
Get.offAll(const MainTabPage()); // 返回首页
ToastUtil.show("退出登录成功～");
},
child: const Text("确认"),
),
],
),
),
),
七、版块5：创意功能——全局主题切换（毕设加分项）
文字讲解（大白话）
这是我给你加的「毕设加分创意功能」，普通校园APP很少做，特别亮眼！
实现两种全局主题切换：默认的清新青绿色（贴合校园风格）、简约灰色（适配深色模式），点击个人中心的“主题切换”按钮，一键切换整个APP的主题颜色，包括导航栏、按钮、选中状态，适配鸿蒙系统深色/浅色模式，交互流畅不卡顿。
核心主题管理代码（简单好懂）：
class ThemeController extends GetxController {
// 主题状态：false=默认青绿色，true=简约灰色
final RxBool isGreyTheme = false.obs;
// 切换主题
void toggleTheme() {
isGreyTheme.value = !isGreyTheme.value;
// 全局主题颜色切换
Get.changeTheme(
isGreyTheme.value
? ThemeData(primarySwatch: Colors.grey)
: ThemeData(primarySwatch: Colors.teal),
);
}
}
八、版块6：全局UI美化（统一风格，修复bug）
文字讲解（大白话）
收尾阶段，重点做UI美化，让整个APP看起来更专业、更整洁，解决前期的小bug，这也是毕设答辩的加分点：
核心美化代码（统一按钮样式）：
// 全局统一按钮组件（复用）
Widget buildElevatedBtn(String text, Function() onTap) {
return ElevatedButton(
onPressed: onTap,
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(horizontal: 30.w, vertical: 12.h),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.r)),
),
child: Text(text, style: TextStyle(fontSize: 14.sp)),
);
}
九、版块7：鸿蒙多端适配终极优化
文字讲解（大白话）
最后做一次多端适配优化，确保在鸿蒙所有设备上都能完美运行，无bug、无错乱：
十、版块8：新手收尾常见问题（口语化逐点解答）
问题1：我的发布/收藏页面，数据不显示或显示错乱？
解答：核心原因是「数据没关联对」，排查两点：
① 有没有正确获取闲置、跑腿控制器（Get.find()），控制器没拿到，自然没有数据；
② 列表有没有用Obx包裹，没包裹的话，数据变化页面不会刷新，加上就好。
问题2：主题切换没反应，颜色不变？
解答：两个常见坑：
① 没有初始化ThemeController，忘了写Get.put(ThemeController())，控制器没启动；
② 没有用Get.changeTheme()方法切换主题，只是改了变量，没通知全局主题更新。
问题3：退出登录后，还能返回个人中心？
解答：因为用了Get.back()，只是返回上一页，要改成Get.offAll(const MainTabPage())，清空所有页面栈，只保留首页，这样就不能返回个人中心了。
问题4：美化后，部分页面布局错乱、卡片重叠？
解答：美化时改了间距、圆角，可能影响了之前的布局。检查所有固定数值，确保全部用.w .h .sp适配单位；另外检查ListTile的leading、title是否对齐，卡片margin是否统一。
问题5：本地缓存异常，收藏状态偶尔丢失？
解答：大概率是缓存的key名字不一致，比如保存时用“collect_status”，读取时用“collect”，名字错一个字就读取失败；另外确保每次收藏/取消收藏，都调用了保存缓存的方法。
问题6：鸿蒙平板上，我的发布页面列表拉伸变形？
解答：ListView.builder没有加shrinkWrap: true，导致列表无限拉伸，加上shrinkWrap: true，让列表自适应内容高度，就不会变形了。
十一、Day7 开发总结（项目闭环版）
今天咱们彻底完成了校园易生活项目的「闭环收尾」，总结一下Day7干的核心事儿：
项目整体总结（全程回顾）
从Day1到Day7，咱们从0搭建了一个「Flutter+开源鸿蒙」跨平台校园APP，包含五大核心模块：
✅ 校园首页（轮播、资讯、求助入口）
✅ 闲置市场（列表、详情、发布、收藏、缓存）
✅ 校园跑腿（任务列表、发布需求、简易接单）
✅ 校园通讯录（基础预留，可后续扩展）
✅ 个人中心（我的发布、我的收藏、退出登录、主题切换）
整个项目符合毕设标准，有基础功能、有创意亮点、有多端适配、有完整交互，代码规范、可维护性强，直接拿去答辩、展示都全没问题！
v
十二、项目后续可扩展方向（可选）
如果想让毕设更优秀，后续可以扩展这些功能：
