Flutter+开源鸿蒙实战｜校园易生活Day7 个人中心完善+我的发布/收藏+退出登录+主题切换+全局UI美化（项目闭环）

本文是Flutter+开源鸿蒙实战项目"校园易生活"的收官篇，主要完成个人中心功能的完善和全局UI美化。文章介绍了如何实现"我的发布"和"我的收藏"页面跳转与数据渲染，开发退出登录功能并添加确认弹窗，以及一个创意功能——全局主题切换（清新青绿色/简约灰色）。项目优化了鸿蒙多端适配，修复前期遗留问题，使整个APP达到毕设交付标准。所有功能均

xmdy5866

305人浏览 · 2026-05-07 15:34:54

xmdy5866 · 2026-05-07 15:34:54 发布

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看起来更专业、更流畅，完全达到毕设交付标准。

而且我还加了一个超实用创意功能：全局主题切换（清新青绿色/简约灰色），毕设里加这个小功能，答辩时绝对加分！

全文依旧保持口语化大白话，不搞生硬术语，每段代码前都讲清用途，代码只放核心几行；预判新手最后阶段容易踩的“收尾坑”，逐点通俗解答；所有优化都适配鸿蒙手机、平板，真机运行效果拉满，做完就能直接展示、答辩。

今日核心目标（收尾闭环版）：

完善个人中心：实现「我的发布」「我的收藏」页面跳转与数据渲染；
打通数据关联：我的发布显示自己发布的闲置/跑腿任务，我的收藏显示收藏的商品；
开发退出登录功能：弹窗确认+返回首页，交互更完整；
新增创意功能：全局主题切换（两种主题，一键切换，适配鸿蒙系统）；
全局UI美化：统一按钮、卡片、文字样式，修复所有布局小bug；
修复前期遗留问题：缓存异常、页面跳转卡顿、键盘遮挡等；
鸿蒙多端适配优化：平板/手机/开发板视觉统一，交互更流畅；
新手收尾常见问题汇总，帮你顺利完成项目闭环。

二、今日依赖库说明

无需新增任何第三方库！
直接复用前面所有依赖：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();

  @override
  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();

  @override
  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，这也是毕设答辩的加分点：

统一所有卡片的圆角（10.r）、阴影深度，取消杂乱的颜色；
统一所有按钮的样式、颜色、字体大小，点击有反馈；
统一所有页面的间距、文字大小分级，视觉更整齐；
修复前期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干的核心事儿：

完善个人中心全功能：我的发布、我的收藏页面，实现跳转和数据渲染，关联闲置/跑腿数据；
打通交互闭环：我的收藏关联本地缓存，点击可跳转详情、取消收藏，逻辑完整；
开发退出登录功能，弹窗确认+Toast反馈，交互更友好；
新增创意主题切换功能，两种主题一键切换，毕设加分；
全局UI美化，统一样式、修复所有小bug，APP更专业；
优化鸿蒙多端适配，手机/平板/开发板都能完美运行；
解决新手收尾阶段的6个常见问题，顺利完成项目闭环。

项目整体总结（全程回顾）

从Day1到Day7，咱们从0搭建了一个「Flutter+开源鸿蒙」跨平台校园APP，包含五大核心模块：
✅ 校园首页（轮播、资讯、求助入口）
✅ 闲置市场（列表、详情、发布、收藏、缓存）
✅ 校园跑腿（任务列表、发布需求、简易接单）
✅ 校园通讯录（基础预留，可后续扩展）
✅ 个人中心（我的发布、我的收藏、退出登录、主题切换）

整个项目符合毕设标准，有基础功能、有创意亮点、有多端适配、有完整交互，代码规范、可维护性强，直接拿去答辩、展示都全没问题！
v