羽球联盟 HarmonyOS NEXT 实战系列 (17/20)：个人中心、设置、消息与反馈闭环

wangji93

207人浏览 · 2026-07-07 22:45:33

wangji93 共创先锋 · 2026-07-07 22:45:33 发布

文章导读

个人中心要让用户感觉“这是我的应用”，前提是登录态、统计项和入口组织都是真的联动的。
设置页不能只停留在几个假开关上，深浅色、缓存清理和登录退出都要有真实结果。
反馈页虽然轻，但它决定了应用有没有把“用户说了什么”接出去。

页面效果

很多教程做到列表和详情就结束了，结果应用看上去像一套能跑的 demo，而不是可持续使用的产品。真正拉开差距的，往往是个人中心、设置和反馈这些“不炫技”的页面。它们一旦做得敷衍，用户马上会觉得这套应用缺少归属感和可信度。

个人中心与设置入口

羽球联盟在这一块没有盲目堆功能，而是先把登录态、统计项、设置入口和反馈出口组织成一个闭环。用户登录后能看到收藏、关注、浏览三组实时数字；设置里切换深浅色会立刻生效；反馈不是摆个空表单，而是能直接拉起邮件应用。这种设计不会让人惊艳，但它很像一个能长期维护的真实产品。

实战拆解

ProfilePage 最值得写进实战文章的地方，是它没有把个人中心做成静态菜单，而是做成一张状态面板。登录态由 @StorageProp('isLoggedIn') 决定，收藏、关注、浏览三组数字直接读 @StorageLink。这意味着只要其他页面更新了共享状态，个人中心就会跟着刷新，不需要额外派发“请更新个人中心”的事件。

这个页面还有一个很实用的经验：@StorageLink 的读取必须直接落在 build() 的响应链路里，不能偷懒包到外部 @Builder 里。项目里已经用注释把这个坑点明了，因为一旦依赖追踪没挂上，登录后统计数字就可能不刷新。这样的经验比单纯展示 UI 更值钱，它说明了 ArkUI 状态管理在复杂页面里的边界。

SettingsPage 则承担了另外一种职责：把偏好项真正接到系统行为上。深浅色模式不是只改一行文案，而是通过 setColorMode 触发颜色模式变更；缓存清理不是假按钮，而是弹确认框后执行清理；退出登录也不是直接清本地值，而是明确告诉用户会失去个人化内容访问权限。每个操作都给用户一个真实反馈，这才叫设置页。

反馈页看起来最轻，但也最能体现态度。页面要求用户至少输入 10 个字，并对纯标点、重复字符、无意义占位内容做了一轮过滤。校验通过后，不是停在“提交成功”的假提示，而是直接拉起系统邮件，把收件人、主题和正文带出去。这一步虽然简单，却让“反馈”从装饰性入口变成了真的出口。

关键代码

private selectDarkMode(mode: string): void {
  this.showDarkPicker = false;
  PrefStore.getInstance().setDarkMode(mode);
  let cm: ConfigurationConstant.ColorMode = ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET;
  if (mode === 'dark') {
    cm = ConfigurationConstant.ColorMode.COLOR_MODE_DARK;
  } else if (mode === 'light') {
    cm = ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
  }
  const appCtx = this.getUIContext().getHostContext()!.getApplicationContext();
  appCtx.setColorMode(cm);
  const label: string = mode === 'dark' ? '深色' : mode === 'light' ? '浅色' : '跟随系统';
  Toast.show(this.getUIContext(), `已切换为${label}`);
}