HarmonyOS ArkTS实战：运动预约我的页 —— 签到按钮与成就墙的组合技

HarmonyOS ArkTS实战运动预约我的页 —— 签到按钮与成就墙的组合技App 14「运动场地预约」我的 TabProfileTab是个人中心页。整页用渐变用户卡片张运动 Lv.5 1280/2000 经验条 可交互签到按钮 4 栏统计 3 列成就墙6 徽章 4 解锁 本周运动时长条形图 6 项菜单带数字/NEW 角标 AboutInfo 组成。本篇基于14-sports-booking/entry/src/main/ets/pages/ProfileTab.ets约 313 行逐段拆解附 4 张实机截图。一、整体结构6 个 Builder 的绿色个人中心ProfileTab 与 App 13 我的页结构同源但有几处关键差异签到交互、3 列成就墙、菜单角标数字build() { Column() { Scroll() { Column({ space: 14 }) { this.UserCard() this.StatRow() this.AchievementWall() this.WeeklyChart() this.MenuList() this.AboutInfo() } .width(100%) .padding({ left: D.pad, right: D.pad, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }6 个块顺序UserCard身份→ StatRow数据→ AchievementWall成就→ WeeklyChart行为图→ MenuList资产→ AboutInfo关于。与 App 13 我的页对比维度App 13 我的App 14 我的主题紫 #8B5CF6绿 #16A34A用户卡小明同学 Lv.4张运动 Lv.5经验条74%手动硬编码1280/2000 Progress 64%签到静态只弹 Toast可交互checked 状态翻转成就墙横向 Row 一行 6 个Grid 3 列 2 行菜单5 项6 项带数字角标App 14 的签到是真交互App 13 的签到只弹 Toast 不改变状态——这是本系列个人中心的又一次进化。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、UserCard渐变用户卡 经验条 可交互签到UserCard 是个人中心的门面比 App 13 多了签到按钮的状态翻转Builder UserCard() { Column({ space: 12 }) { Row({ space: 14 }) { Row() { Text().fontSize(32) } .width(60).height(60) .backgroundColor(#FFFFFF).opacity(0.3).borderRadius(30) .justifyContent(FlexAlign.Center) Column({ space: 4 }) { Row({ space: 8 }) { Text(张运动).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Row() { Text(Lv.5).fontSize(10).fontColor(#FFFFFF) } .padding({ left: 8, right: 8, top: 3, bottom: 3 }) .backgroundColor(#FFFFFF).opacity(0.25).borderRadius(8) } Text(运动达人 · 已坚持 28 天).fontSize(12).fontColor(#FFFFFF).opacity(0.85) } .alignItems(HorizontalAlign.Start).layoutWeight(1) Text(编辑).fontSize(12).fontColor(#FFFFFF).opacity(0.85) .padding({ left: 8, right: 8, top: 4, bottom: 4 }) .border({ width: 1, color: #FFFFFF }).borderRadius(D.rSm) .onClick(() { promptAction.showToast({ message: 编辑资料 }); }) } .width(100%) Column({ space: 4 }) { Row() { Text(经验值).fontSize(11).fontColor(#FFFFFF).opacity(0.85) Blank() Text(1280 / 2000).fontSize(11).fontColor(#FFFFFF).opacity(0.85) } .width(100%) Progress({ value: 64, total: 100 }) .color(#FFFFFF).backgroundColor(#33FFFFFF) .height(6).borderRadius(3).width(100%) } .width(100%) Row() { Text(this.checked ? ✓ 今日已签到 : 每日签到 10 积分) .fontSize(13).fontColor(#FFFFFF) .layoutWeight(1) Text(this.checked ? 已签到 : 签到) .fontSize(13).fontColor(C.primary) .padding({ left: 16, right: 16, top: 6, bottom: 6 }) .backgroundColor(#FFFFFF).borderRadius(D.rSm) .onClick(() { if (!this.checked) { this.checked true; promptAction.showToast({ message: 签到成功 10 积分 }); } }) } .width(100%) .padding({ left: 12, right: 12, top: 10, bottom: 10 }) .backgroundColor(#33FFFFFF).borderRadius(D.rSm) } .width(100%) .padding(16) .borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }2.1 头像 姓名 Lv.5 编辑头像60×60 正圆borderRadius(30)#FFFFFF30% 透明 图标姓名张运动 18sp 加粗白字 Lv.5 白色胶囊标签#FFFFFF25% 透明Slogan运动达人 · 已坚持 28 天12sp 白字 85% 透明编辑右侧编辑文字按钮白描边border({ width: 1, color: #FFFFFF })——暗示个人资料可编辑Lv.5 与 App 13 的 Lv.4 呼应App 14 用户等级更高5 vs 4经验更多1280/2000 vs 74%——不同 App 的用户数据不同体现每个 demo 是独立用户。2.2 经验条数字 Progress 双通道Column({ space: 4 }) { Row() { Text(经验值).fontSize(11).fontColor(#FFFFFF).opacity(0.85) Blank() Text(1280 / 2000).fontSize(11).fontColor(#FFFFFF).opacity(0.85) } .width(100%) Progress({ value: 64, total: 100 }) .color(#FFFFFF).backgroundColor(#33FFFFFF) .height(6).borderRadius(3).width(100%) }Progress({ value: 64, total: 100 })1280/2000 64%进度条显示 64%。数字1280/2000 进度条64%双通道——数字告诉精确值进度条告诉大致比例。白色进度条.color(#FFFFFF)前景白 .backgroundColor(#33FFFFFF)背景 20% 白——在绿色渐变上白色进度条比绿色更醒目与背景区分。2.3 签到按钮真交互本页核心亮点Row() { Text(this.checked ? ✓ 今日已签到 : 每日签到 10 积分) .fontSize(13).fontColor(#FFFFFF) .layoutWeight(1) Text(this.checked ? 已签到 : 签到) .fontSize(13).fontColor(C.primary) .padding({ left: 16, right: 16, top: 6, bottom: 6 }) .backgroundColor(#FFFFFF).borderRadius(D.rSm) .onClick(() { if (!this.checked) { this.checked true; promptAction.showToast({ message: 签到成功 10 积分 }); } }) }签到按钮是真状态翻转.onClick(() { if (!this.checked) { this.checked true; promptAction.showToast({ message: 签到成功 10 积分 }); } })未签到checked false→ 左侧文字每日签到 10 积分 右侧白色签到按钮点击签到 →this.checked true→左侧变✓ 今日已签到 右侧变已签到 Toast 签到成功 10 积分再点不触发if (!this.checked)拦截——防止重复签到这是本系列第一个点击后状态永久改变的交互App 13 的签到只弹 Toast 不改变状态。State checked: boolean false驱动两处文字同步变化左侧提示 右侧按钮文案一处状态、两处渲染。签到是每日留存机制10 积分激励每天回来签到配合成就墙长期目标形成每日 长期的双层激励。三、StatRow4 栏统计 悬浮效果StatRow 是 4 个统计数字预约 14 / 时长 28h / 场地 5 / 卡路里 2.5kBuilder StatRow() { Row() { ForEach(this.stats, (s: StatItem) { Column({ space: 4 }) { Text(s.value).fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) Text(s.label).fontSize(11).fontColor(C.textDim) } .layoutWeight(1) .alignItems(HorizontalAlign.Center) }, (s: StatItem) s.label) } .width(100%) .margin({ top: -28 }) .padding({ top: 14, bottom: 14 }) .backgroundColor(C.card).borderRadius(D.rMd) .border({ width: 1, color: C.stroke }) }**margin({ top: -28 })负边距让统计卡上浮**到 UserCard 底部形成卡片叠加效果与 App 13 一致。4 栏同色C.text深色——与预约页统计一样颜色留给状态。统计口径与首页 HeroCard 一致预约 14 首页本月预约 14、时长 28h 首页运动时长 28h、卡路里 2.5k 首页消耗卡路里 2.5k——跨页数据一致是单一数据源的体现虽然 demo 是手写一致的。四、AchievementWall3 列 Grid 成就墙AchievementWall 是 6 个徽章的 3 列 Grid4 解锁 2 未解锁Builder AchievementWall() { Column({ space: 12 }) { Row() { Text(成就墙).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text) Blank() Text(4/6).fontSize(12).fontColor(C.textDim) } .width(100%) Grid() { ForEach(this.badges, (b: Badge) { GridItem() { Column({ space: 6 }) { Row() { Text(b.emoji).fontSize(24) } .width(48).height(48) .backgroundColor(b.unlocked ? C.primarySoft : C.cardSoft) .borderRadius(24) .justifyContent(FlexAlign.Center) .opacity(b.unlocked ? 1.0 : 0.4) Text(b.name).fontSize(10).fontColor(b.unlocked ? C.text : C.textDim) } .alignItems(HorizontalAlign.Center) } }, (b: Badge) b.id.toString()) } .columnsTemplate(1fr 1fr 1fr) .columnsGap(10) .rowsGap(10) .width(100%) } .width(100%) .padding(14) .backgroundColor(C.card).borderRadius(D.rMd) .border({ width: 1, color: C.stroke }) }与 App 13 的差异Row 一行 6 个 → Grid 3 列 2 行.columnsTemplate(1fr 1fr 1fr) .columnsGap(10) .rowsGap(10)App 13 用 Row 一行排 6 个每个 1/6 宽很挤App 14 用 Grid 3 列每个 1/3 宽徽章更大更清晰——Grid 更适合徽章多、要看清图标的场景。6 个徽章运动主题 篮球达人解锁⚽ 足球之星解锁 羽毛球手解锁 百发百中解锁 运动冠军未解锁 金牌会员未解锁解锁/未解锁三件套背景C.primarySoft浅绿 vsC.cardSoft浅灰、透明度opacity 1.0vs0.4、文字C.textvsC.textDim。4/6是硬编码App 13 用.filter(a a.unlocked).length动态算App 14 直接写死4/6——如果 badge 数据变了如解锁 5 个这里的 4/6 不会自动更新。真实项目应像 App 13 那样动态计算。这是 App 14 的一个回退值得对比学习。五、WeeklyChart本周运动时长WeeklyChart 与首页 WeeklyChart 同构7 天条形图 总计 7.5hBuilder WeeklyChart() { Column({ space: 12 }) { Row() { Text(本周运动时长).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text) Blank() Text(总计 7.5h).fontSize(12).fontColor(C.primary) } .width(100%) Row({ space: 4 }) { ForEach(this.barData, (b: BarItem) { Column({ space: 6 }) { Stack({ alignContent: Alignment.Bottom }) { Column() .width(18).height(b.value) .linearGradient({ angle: 180, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) .borderRadius(4) } .width(24).height(90) Text(b.day).fontSize(10).fontColor(C.textDim) } .layoutWeight(1) .alignItems(HorizontalAlign.Center) }, (b: BarItem) b.day) } .width(100%) } .width(100%) .padding(14) .backgroundColor(C.card).borderRadius(D.rMd) .border({ width: 1, color: C.stroke }) }与首页 WeeklyChart 完全同构barData 相同40/65/50/80/90/70/35只是标题本周运动趋势→本周运动时长、汇总平均 61%→总计 7.5h。总计 7.5h的计算40655080907035 430百分比如果按每周 7.5h 运动反推430% ≈ 7.5h/周 → 每天约 61 分钟——数据设计有内在一致性平均 61% ≈ 每天 61 分钟 ≈ 总计 7.5h。为什么我的页和首页用同一个图——因为本周运动数据是全局用户数据首页趋势视角和我的页个人视角显示同一份数据的不同标题。跨页数据一致是单一数据源原则的体现。六、MenuList6 项菜单 数字/NEW 角标MenuList 是 6 个菜单项预约日历/我的好友/我的收藏/积分商城/消息通知/意见反馈角标有数字和NEW两种Builder MenuList() { Column({ space: 0 }) { ForEach(this.menus, (m: MenuItem) { Row({ space: 12 }) { Row() { Text(m.emoji).fontSize(20) } .width(36).height(36) .backgroundColor(C.primarySoft).borderRadius(10) .justifyContent(FlexAlign.Center) Column({ space: 2 }) { Text(m.label).fontSize(14).fontColor(C.text) Text(m.desc).fontSize(11).fontColor(C.textDim) } .alignItems(HorizontalAlign.Start).layoutWeight(1) if (m.badge.length 0) { if (m.badge NEW) { Text(m.badge).fontSize(9).fontColor(#FFFFFF) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .backgroundColor(C.danger).borderRadius(4) } else { Text(m.badge).fontSize(9).fontColor(#FFFFFF) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .backgroundColor(C.danger).borderRadius(9) .constraintSize({ minWidth: 18 }).textAlign(TextAlign.Center) } } Text().fontSize(12).fontColor(C.textDim) } .width(100%) .padding({ left: 14, right: 14, top: 12, bottom: 12 }) .backgroundColor(C.card) .onClick(() { promptAction.showToast({ message: m.label }); }) if (m.id this.menus.length) { Divider().color(C.stroke).margin({ left: 50 }) } }, (m: MenuItem) m.id.toString()) } .width(100%) .borderRadius(D.rMd) .border({ width: 1, color: C.stroke }) .clip(true) }6.1 两种角标NEW 胶囊 数字圆形if (m.badge NEW) { Text(m.badge).fontSize(9).fontColor(#FFFFFF) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .backgroundColor(C.danger).borderRadius(4) } else { Text(m.badge).fontSize(9).fontColor(#FFFFFF) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .backgroundColor(C.danger).borderRadius(9) .constraintSize({ minWidth: 18 }).textAlign(TextAlign.Center) }两种角标形态NEW→borderRadius(4)小圆角胶囊C.danger红底白字数字2→borderRadius(9)大圆角接近正圆constraintSize({ minWidth: 18 })最小宽 18vp让2也撑成圆形textAlign(TextAlign.Center)居中数字徽标badge是移动端标配——iOS 的红色数字角标、微信的未读消息数都是这个设计。constraintSize({ minWidth: 18 })让 1 位数也是正圆、2 位数如 23自动变椭圆——最小宽 居中是数字徽标的正确做法。6 项菜单的角标编排 预约日历 — badge 2数字2 个待确认预约呼应预约页统计 我的好友 — 无角标⭐ 我的收藏 — 无角标 积分商城 — badge NEW新功能引导⚙️ 消息通知 — 无角标 意见反馈 — 无角标2与预约页的待确认 2呼应跨页数据一致NEW标记新功能——数字给有内容要处理的信号NEW 给有新功能的信号两种角标语义不同。6.2 分隔线if (m.id this.menus.length) { Divider().color(C.stroke).margin({ left: 50 }) }m.id this.menus.length判断最后一条不加分隔线——id 从 1 开始menus.length6所以 id1~5 加线、id6 不加。注意这个判断比idx length - 1更脆弱——如果菜单数据 id 不是从 1 开始连续如删除一条 id2判断会失效。用 ForEach 的 idx 判断更可靠idx this.menus.length - 1。margin({ left: 50 })让分隔线不贯穿全宽从图标右侧开始iOS 风格。七、AboutInfo版本号AboutInfo 是底部版本信息比 App 13 多一行版权Builder AboutInfo() { Column({ space: 6 }) { Text(运动场地预约 v1.0.0).fontSize(12).fontColor(C.textDim) Text(基于 HarmonyOS 6.0 ArkTS 开发).fontSize(11).fontColor(C.textDim) Text(© 2024 智慧校园).fontSize(10).fontColor(C.textDim).opacity(0.6) } .width(100%) .padding({ top: 16, bottom: 16 }) .alignItems(HorizontalAlign.Center) }3 行版本号 → 技术栈 → 版权。opacity(0.6)让版权行最淡层级最低。© 2024 智慧校园是品牌露出——虽然 demo 无真实版权但演示了底部品牌区的规范。八、State 的克制与签到状态ProfileTab 只有1 个 Statechecked: boolean签到状态。这是 4 个 Tab 中最少的 State 页面。为什么这么少因为本页几乎纯展示用户数据/成就/图表都是 private 不可变数据唯一会变的是签到状态。**展示页 State 少交互页 State 多**是健康状态管理的铁律页面State 数量类型首页 HomeTab1keyword展示搜索场地 Func1Tab5venue/selected/name/phone/note交互表单预约 Func2Tab1activeTab筛选我的 ProfileTab1checked展示签到4 个 Tab 的 State 数量分布正好反映页面复杂度——表单页最多5 个展示页最少1 个。九、签到 → 经验 → 成就的游戏化闭环App 14 我的页把游戏化做完整了签到 10 积分每日激励→ 改变checked状态经验条 1280/2000长期目标→ 进度 64%还差 720 经验升级成就墙 4/6身份认同→ 4 个已解锁2 个待挑战Lv.5 徽章等级象征→ 最高等级身份每日签到行为→ 经验增长进度→ 成就解锁身份→ 等级提升地位是完整游戏化链路。与 App 13 相比App 13 的签到只弹 Toast 不改状态App 14 的签到真改变状态——但 App 14 的经验条没有跟着签到 10 积分变化1280/2000是硬编码真实项目应exp 10并联动进度条。状态联动是游戏化的下一步。十、总结本页模板Scroll( UserCard渐变 头像/姓名/Lv 经验条 签到交互 StatRow4 栏统计 负边距悬浮 AchievementWall3 列 Grid 成就墙 WeeklyChart7 天条形图 MenuList6 项菜单 数字/NEW 角标 AboutInfo版本 技术栈 版权 )核心可复用点可交互签到State checkedif (!this.checked)防重复3 列 Grid 成就墙比 Row 一行更清晰数字徽标constraintSize({ minWidth: 18 })正圆负边距悬浮卡margin({ top: -28 })个人中心页模板已在本系列出现 2 次App 13/14。十一、签到状态的持久化问题State checked: boolean false的签到状态目前只存在内存里——应用重启后 checked 会重置为 false用户又能再签一次。真实项目的签到必须持久化有三个层级本地持久化ohos.data.preferences首选项存checkedlastCheckInDate。启动时读如果lastCheckInDate是今天checked true显示今日已签到如果昨天重置为 false 并允许签到新的一天服务端持久化签到调POST /api/checkin服务端记录今天这个用户签过了返回积分。即使卸载重装服务端也知道今天已签本地 服务端双写最稳的方案——本地首选项保证离线可用弱网时先本地标记联网后同步服务端ohos.data.preferences是 ArkTS 的本地存储 API类似 Web 的 localStorage示例import { preferences } from kit.ArkData; // 读 const prefs await preferences.getPreferences(context, user_pref); const checked await prefs.get(checked, false); // 写 await prefs.put(checked, true); await prefs.flush();每日签到的核心是日的判定lastCheckInDate today则已签、否则可签。用日期字符串如 2026-08-18比时间戳更可靠时区问题少。状态 日期双字段才能支撑每天一次的业务逻辑。当前 demo 的内存状态是原型阶段的合理简化但把持久化写进这篇解析是为了让读者知道**从 demo 到产品的差距在哪**——状态管理只是第一步持久化才是真实业务。十二、用户数据的跨页一致性治理我的页的统计预约 14/时长 28h/卡路里 2.5k与首页 HeroCard本月预约 14/运动时长 28h/消耗卡路里 2.5k完全一致——同一份用户数据在两个页面重复出现。demo 的手写一致有两个隐患改一处漏一处如果产品经理说把预约数改成 15首页改了我这页忘了改两个页面数字打架数据源不唯一HomeTab 的stats和 ProfileTab 的stats是两份独立硬编码没有共享一份数据的机制真实项目的解决方案// 全局用户数据源AppStorage 或单例 AppStorage.setOrCreate(userStats, { appointments: 14, duration: 28h, calories: 2.5k }); // 任何页面读取 StorageProp(userStats) userStats: UserStats;把用户数据放进全局存储AppStorage或抽成 service 单例各页只读不写——单一数据源原则的落地。这样改数据只需改一处所有页面自动同步。更进一步如果用户数据来自后端应该在EntryAbility启动时拉取一次存进 AppStorage各页StorageProp订阅——**拉取一次全局共享各页响应式更新**是鸿蒙应用数据架构的推荐模式。跨页一致性是数据架构的试金石demo 可以靠手写一致糊弄过去真实项目必须靠数据源唯一保证。读者从这篇解析里应该学到把会跨页共享的数据提升到全局存储而不是各页各存一份。十三、签到 10 积分与经验值的联动当前签到点击只改checked经验值 1280/2000 没有跟着 10。真实项目应联动// 签到积分 经验 双增 onClick(() { if (!this.checked) { this.checked true; this.exp Math.min(this.exp 10, 2000); // 经验 10封顶 2000 promptAction.showToast({ message: 签到成功 10 积分 10 经验 }); } })Math.min(exp 10, 2000)防止经验溢出签到 72 次后满级。经验条Progress value也要改为this.exp / 2000 * 100动态计算——一处签到、多处联动checked exp 进度条 文案。更进一步经验升级应联动成就墙——exp 1600时解锁运动冠军徽章badges[4].unlocked true。签到 → 经验 → 成就的完整联动才是游戏化的终点。状态联动是响应式 UI 的进阶State一变所有依赖它的 UI 同步更新。App 14 的签到只联动 1 处checked → 文案真实项目应联动 N 处checked exp progress badge。从1 处联动到N 处联动是 demo 与产品的差距也是本文想传递的游戏化进阶思路。到此App 14「运动场地预约」我的页解析完毕。