Flutter开源鸿蒙实战校园易生活Day7 个人中心完善我的发布/收藏退出登录主题切换全局UI美化项目闭环欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net!-- Schema.org 结构化数据 --scripttypeapplication/ldjson{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看起来更专业、更流畅完全达到毕设交付标准。而且我还加了一个超实用创意功能全局主题切换清新青绿色/简约灰色毕设里加这个小功能答辩时绝对加分全文依旧保持口语化大白话不搞生硬术语每段代码前都讲清用途代码只放核心几行预判新手最后阶段容易踩的“收尾坑”逐点通俗解答所有优化都适配鸿蒙手机、平板真机运行效果拉满做完就能直接展示、答辩。今日核心目标收尾闭环版完善个人中心实现「我的发布」「我的收藏」页面跳转与数据渲染打通数据关联我的发布显示自己发布的闲置/跑腿任务我的收藏显示收藏的商品开发退出登录功能弹窗确认返回首页交互更完整新增创意功能全局主题切换两种主题一键切换适配鸿蒙系统全局UI美化统一按钮、卡片、文字样式修复所有布局小bug修复前期遗留问题缓存异常、页面跳转卡顿、键盘遮挡等鸿蒙多端适配优化平板/手机/开发板视觉统一交互更流畅新手收尾常见问题汇总帮你顺利完成项目闭环。二、今日依赖库说明无需新增任何第三方库直接复用前面所有依赖getx、flutter_screenutil、flutter_easy_refresh、fluttertoast、shared_preferences、image_picker。不用改配置、不用装依赖重点做完善和美化省心收尾。三、版块1完善「我的发布」页面关联闲置/跑腿数据文字讲解大白话Day6咱们搭了个人中心的基础架子今天先完善「我的发布」——点击个人中心的“我的发布”跳转到新页面展示自己发布的所有闲置商品和跑腿任务分开布局一目了然。不用重新造数据直接关联之前闲置、跑腿控制器的数据过滤出“自己发布”的内容模拟逻辑后期对接接口可直接替换复用之前封装的卡片不用重复写UI。classMyPublishPageextendsStatelessWidget{finalIdleControlleridleCtrlGet.find();finalRunControllerrunCtrlGet.find();overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(我的发布)),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还是鸿蒙设备再次进入我的收藏都能看到收藏的商品点击还能跳转到商品详情页形成完整交互闭环。复用闲置卡片加上“取消收藏”按钮点击就能取消收藏同时更新本地缓存逻辑和详情页收藏功能联动。classMyCollectPageextendsStatelessWidget{finalIdleControlleridleCtrlGet.find();finalIdleDetailControllercollectCtrlGet.find();overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(我的收藏)),body:Obx(()ListView.builder(itemCount:idleCtrl.idleList.length,itemBuilder:(ctx,i){varmodelidleCtrl.idleList[i];returnGestureDetector(onTap:()Get.to(constIdleDetailPage(),arguments:model),child:buildIdleCard(model),);},)),);}}五、版块3个人中心功能入口跳转绑定文字讲解大白话把个人中心的“我的发布”“我的收藏”和上面新建的两个页面绑定点击就能跳转不用复杂路由配置用GetX路由一键跳转同时给入口加个小图标看着更美观、更直观符合鸿蒙APP的交互习惯。// 个人中心功能入口完善版ListTile(leading:constIcon(Icons.publish),title:constText(我的发布),onTap:()Get.to(constMyPublishPage()),),ListTile(leading:constIcon(Icons.star),title:constText(我的收藏),onTap:()Get.to(constMyCollectPage()),),六、版块4开发退出登录功能弹窗确认交互反馈文字讲解大白话个人中心加一个“退出登录”入口点击不会直接退出而是弹出一个确认弹窗防止误触点击“确认”就返回首页同时弹出Toast提示“退出登录成功”点击“取消”就关闭弹窗交互很完整也很贴近真实APP的逻辑新手也能轻松实现。ListTile(leading:constIcon(Icons.logout),title:constText(退出登录),onTap:()Get.dialog(AlertDialog(title:constText(确认退出),actions:[TextButton(onPressed:()Get.back(),child:constText(取消)),TextButton(onPressed:(){Get.offAll(constMainTabPage());// 返回首页ToastUtil.show(退出登录成功);},child:constText(确认),),],),),),七、版块5创意功能——全局主题切换毕设加分项文字讲解大白话这是我给你加的「毕设加分创意功能」普通校园APP很少做特别亮眼实现两种全局主题切换默认的清新青绿色贴合校园风格、简约灰色适配深色模式点击个人中心的“主题切换”按钮一键切换整个APP的主题颜色包括导航栏、按钮、选中状态适配鸿蒙系统深色/浅色模式交互流畅不卡顿。核心主题管理代码简单好懂classThemeControllerextendsGetxController{// 主题状态false默认青绿色true简约灰色finalRxBoolisGreyThemefalse.obs;// 切换主题voidtoggleTheme(){isGreyTheme.value!isGreyTheme.value;// 全局主题颜色切换Get.changeTheme(isGreyTheme.value?ThemeData(primarySwatch:Colors.grey):ThemeData(primarySwatch:Colors.teal),);}}八、版块6全局UI美化统一风格修复bug文字讲解大白话收尾阶段重点做UI美化让整个APP看起来更专业、更整洁解决前期的小bug这也是毕设答辩的加分点统一所有卡片的圆角10.r、阴影深度取消杂乱的颜色统一所有按钮的样式、颜色、字体大小点击有反馈统一所有页面的间距、文字大小分级视觉更整齐修复前期bug键盘遮挡、列表拉伸、图片显示异常等。核心美化代码统一按钮样式// 全局统一按钮组件复用WidgetbuildElevatedBtn(Stringtext,Function()onTap){returnElevatedButton(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干的核心事儿完善个人中心全功能我的发布、我的收藏页面实现跳转和数据渲染关联闲置/跑腿数据打通交互闭环我的收藏关联本地缓存点击可跳转详情、取消收藏逻辑完整开发退出登录功能弹窗确认Toast反馈交互更友好新增创意主题切换功能两种主题一键切换毕设加分全局UI美化统一样式、修复所有小bugAPP更专业优化鸿蒙多端适配手机/平板/开发板都能完美运行解决新手收尾阶段的6个常见问题顺利完成项目闭环。项目整体总结全程回顾从Day1到Day7咱们从0搭建了一个「Flutter开源鸿蒙」跨平台校园APP包含五大核心模块✅ 校园首页轮播、资讯、求助入口✅ 闲置市场列表、详情、发布、收藏、缓存✅ 校园跑腿任务列表、发布需求、简易接单✅ 校园通讯录基础预留可后续扩展✅ 个人中心我的发布、我的收藏、退出登录、主题切换整个项目符合毕设标准有基础功能、有创意亮点、有多端适配、有完整交互代码规范、可维护性强直接拿去答辩、展示都全没问题v十二、项目后续可扩展方向可选如果想让毕设更优秀后续可以扩展这些功能对接后端接口替换本地模拟数据实现真实数据交互完善校园通讯录实现好友添加、聊天功能新增消息通知功能接单、收藏、发布有消息提醒优化主题切换增加更多主题颜色适配鸿蒙深色模式新增个人资料编辑功能上传头像、修改昵称。