鸿蒙原生应用 ArkTS 严格模式实战：签到墙我的页 —— 渐变卡 + 悬浮统计 + 勋章墙三件套

鸿蒙原生应用 ArkTS 严格模式实战：签到墙我的页 —— 渐变卡 + 悬浮统计 + 勋章墙三件套

App 45「校园签到墙」我的页（ProfileTab），主题色#FDCB6E黄色（yellow），4 个 Tab 分别为首页（✅）、活动（📅）、签到（📍）、我的（👤）。我的页采用"UserCard + 统计行 + 勋章卡 + 菜单 + 关于"五区布局——黄色渐变 UserCard（✅ 64×64 半透明签到头像 + "签到达人"18 号加粗 + "累计签到 128 天 🔥"）+三列悬浮统计卡（128 累计签到 / 7 连续签到 / 860 积分，负 margin 上浮）+我的勋章卡（🌟 签到新星 / 🔥 连续7天 / 💯 百日达人 / 👑 签到之王，已获全实、未获 30% 透明）+4 行菜单（📋 签到记录 / 🏅 我的勋章 / 🪙 积分兑换 / ⚙️ 设置）+底部关于区（校园签到墙 Version 1.0.0）。本篇基于45-checkin-wall/entry/src/main/ets/pages/ProfileTab.ets（共 124 行）逐段拆解，附 4 张实机截图。

一、整体结构：五区"UserCard + 统计 + 勋章 + 菜单 + 关于"布局

我的页是五个 @Builder 块纵向堆叠的"个人中心"标准范式：

build() { Column() { Scroll() { Column() { this.UserCard() this.StatRow() this.BadgeCard() this.MenuList() this.About() } .width('100%') .padding({ bottom: D.pad + this.safeBottom + 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width('100%').height('100%').backgroundColor(C.bg) }

5 块结构：

1. UserCard— 黄色渐变品牌区，展示签到达人身份与核心数据
2. StatRow— 三列悬浮统计卡（128 累计签到 / 7 连续签到 / 860 积分）
3. BadgeCard—系列首个勋章卡（已获/未获双态）
4. MenuList— 4 行功能菜单
5. About— 底部版本信息收尾

与 App 39-44 我的页同构的"头图 + 悬浮卡 + 菜单 + 版本"范式 +系列首次的勋章卡——黄色主题、签到业务指标（签到/连续/积分）、勋章成就体系是本页的三大特色。

项目源码开源：https://gitee.com/codenestFlow/HarmonyOSHub

二、UserCard：黄色渐变头图 + ✅ 签到头像

UserCard() { Row({ space: 14 }) { Row() { Text('✅').fontSize(32) } .width(64).height(64).backgroundColor('#33FFFFFF').borderRadius(32).justifyContent(FlexAlign.Center) Column({ space: 5 }) { Text('签到达人').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FFFFFF') Text('累计签到 128 天 🔥').fontSize(12).fontColor('#FFFFFF').opacity(0.85) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width('100%') .padding({ top: this.safeTop + 30, left: D.pad, right: D.pad, bottom: 44 }) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }

技术拆解：

1. 渐变头图：linearGradient从#FDCB6E黄渐变到#FDD99A浅黄——与首页签到卡同款黄色渐变，品牌统一（系列首次黄色主题）。
2. ✅ 签到头像：64×64 半透明圆底 + 32 号 ✅——与 Tab 图标（✅）、勋章状态符号（✅）同源，"签到"的确认符号即品牌符号。
3. 昵称"签到达人"：达人定位（与"校园摄影师/明信片达人"同款后缀）——"签到 128 天的达人"是坚持的认可，128 天累计签到的资历背书。
4. 副标题："累计签到 128 天 🔥"——"128 天"是坚持的量、"🔥"是热情的火苗（连续签到 7 天的火苗意象），用"天"量化坚持、用🔥强化热情，签到产品的数据文案。
5. 底部 44 padding + 安全区：为悬浮统计卡预留空间、顶部避让状态栏。

三、StatRow：三列悬浮统计卡

StatRow() { Row() { ForEach(this.stats, (s: StatItem) => { Column({ space: 4 }) { Text(s.value).fontSize(18).fontWeight(FontWeight.Bold).fontColor(C.text) Text(s.label).fontSize(11).fontColor(C.textDim) }.layoutWeight(1) }, (s: StatItem) => s.label) } .width('92%').padding({ top: 14, bottom: 14 }) .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }).margin({ top: -24 }) }

统计数据（16-20 行）：128 累计签到 / 7 连续签到 / 860 积分——三列，指标完全贴合签到业务："累计签到"（坚持总量）、"连续签到"（当前连续天数）、"积分"（激励余额）——总量 + 连续 + 资产的三元统计是签到产品的标准数据模型。

技术要点：

1. 负 margin 悬浮：.margin({ top: -24 })上移叠加在渐变区下缘——系列标志性手法。
2. 三列等分：三个 ColumnlayoutWeight(1)自动三等分，18 号数字 + 11 号标签。
3. 92% 宽度：左右留 4% 呼吸边距。
4. key：s.label（累计签到/连续签到/积分，天然唯一）。

数据自洽：128 累计签到 ↔ 副标题"累计签到 128 天" ↔ 签到页每次签到 +1；7 连续签到 ↔ 首页"7"连续天数 ↔ 签到页本周 4 天 ✅ + 上周 3 天；860 积分 ↔ 签到页"签到成功 +50积分" ↔ 活动页积分奖励——三个数字全部有出处。

四、BadgeCard：勋章卡（系列首个成就体系）

BadgeCard() { Column({ space: 12 }) { Text('我的勋章').fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width('100%') Row() { ForEach(this.badges, (b: Badge) => { Column({ space: 6 }) { Text(b.emoji).fontSize(30).opacity(b.got ? 1.0 : 0.3) Text(b.name).fontSize(11).fontColor(b.got ? C.text : C.textDim) }.layoutWeight(1) }, (b: Badge) => b.id.toString()) }.width('100%') } .width('92%').padding(16).margin({ top: 14 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }

4 枚勋章（22-27 行）：

技术拆解：

1. 已获/未获双态：opacity(b.got ? 1.0 : 0.3)——已获勋章全实（🌟🔥）、未获 30% 透明（💯👑）+ 名称颜色区分（已获深色/未获浅灰）——半透明即"未解锁"，灰暗的勋章是"继续签到的动力"（想点亮它）。
2. 成就阶梯：签到新星（入门）→ 连续7天（中期）→ 百日达人（100 天，长期）→ 签到之王（最高荣誉）——从易到难的勋章阶梯，对应签到行为的不同里程碑，是签到产品"成就体系"的最小展示。
3. 四等分：每枚layoutWeight(1)四等分整行，emoji（30 号）+ 名称（11 号）上下排布。
4. 数据联动："🔥 连续7天"已获 ↔ 首页"7"连续天数达标；"💯 百日达人"未获 ↔ 当前 128 天累计（已超 100 天但 Demo 标记未获，产品化按"连续 100 天"而非累计判定）——勋章规则产品化时需明确定义。
5. key：b.id.toString()稳定唯一。

五、MenuList：4 行菜单 + Divider 条件分隔

MenuList() { Column() { ForEach(this.menus, (m: MenuItem, idx: number) => { Row({ space: 12 }) { Text(m.emoji).fontSize(18) Text(m.title).fontSize(14).fontColor(C.text).layoutWeight(1) Text('>').fontSize(14).fontColor(C.textDim) } .width('100%').padding({ left: 14, right: 14, top: 14, bottom: 14 }) .onClick(() => { promptAction.showToast({ message: m.title }); }) if (idx < this.menus.length - 1) { Divider().color(C.stroke).strokeWidth(0.5) } }, (m: MenuItem) => m.title) } .width('92%').margin({ top: 14 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }

4 个菜单项（29-34 行）：📋 签到记录 / 🏅 我的勋章 / 🪙 积分兑换 / ⚙️ 设置。

菜单语义分析：

1. 📋 签到记录：历史签到明细（每天签了哪些活动、得了几分）——对应统计"128 累计签到"。
2. 🏅 我的勋章：勋章墙（BadgeCard 的完整版，含解锁条件）——勋章是成就体系的管理入口。
3. 🪙 积分兑换：用积分兑换校园福利——对应"860 积分"的消费端，积分闭环的出口。
4. ⚙️ 设置：签到提醒、定位权限、隐私、关于。

实现细节：三栏行（emoji + 标题 + ">"）、ForEachindex 判断最后一行不加 Divider、整行可点 Toast、92% 宽卡片——系列标准菜单卡。margin({ top: 14 })与勋章卡保持间距。4 行菜单比系列常规 5 行少一行——因为签到产品的功能域相对聚焦（记录/勋章/兑换/设置），少而精。

六、About：版本信息收尾

About() { Column({ space: 4 }) { Text('校园签到墙').fontSize(12).fontColor(C.textDim) Text('Version 1.0.0').fontSize(11).fontColor(C.textDim).opacity(0.7) }.width('100%').margin({ top: 24 }) }

12 号浅灰应用名 + 11 号更浅版本号（opacity(0.7)），margin({ top: 24 })与菜单卡拉开距离——系列统一收尾。

七、跨页数据自洽：我的页 = 签到成就总汇

我的页每个元素都能在其他页面找到呼应：

• "累计签到 128 天"↔ 副标题 ↔ 签到页每次签到 +1——坚持的累计。
• "7 连续签到"↔ 首页"7"天 ↔ 签到页本周 4 天 ✅ + 上周 3 天——连续性的三处一致。
• "860 积分"↔ 签到页"签到成功 +50积分" ↔ 活动页积分奖励（50/30/20/40）——积分从活动产生、在签到页累加、在我的页沉淀。
• 勋章"🔥 连续7天"↔ 连续 7 天达标——成就与行为挂钩。
• "🪙 积分兑换"菜单↔ 积分余额的消费出口——激励闭环。

八、实机截图与交互演示

本节结合 4 张实机截图，逐张还原我的页的视觉效果与交互过程。

1. 我的页首屏：黄色渐变 + 统计 + 勋章卡

第一张截图是我的页默认首屏：顶部黄色渐变 UserCard——✅ 半透明签到头像、右侧"签到达人"加粗白字与"累计签到 128 天 🔥"；下方白色统计卡以负边距悬浮在渐变区下缘，三列数字（128 累计签到 / 7 连续签到 / 860 积分）等分排布；再往下是勋章卡"我的勋章"——🌟 签到新星（全实）、🔥 连续7天（全实）、💯 百日达人（30% 透明）、👑 签到之王（30% 透明），已获与未获的透明度对比清晰。黄色渐变 + 勋章墙是本页的两大视觉记忆点。

2. 点击"签到记录"：弹出 Toast

第二张截图是点击菜单第一行"📋 签到记录"后的反馈：弹出"签到记录"Toast。菜单整行可点（emoji、标题、箭头任意位置均触发），"签到记录"对应统计"128 累计签到"的明细——每天签了哪些活动在此查看。

3. 点击"积分兑换"：弹出 Toast

第三张截图是点击菜单第三行"🪙 积分兑换"后的反馈：弹出"积分兑换"Toast。"积分兑换"是签到激励闭环的消费出口——860 积分在此兑换校园福利（食堂代金券/文创礼品），对应活动页积分奖励与签到页"签到成功 +50积分"的积分来源。

4. 我的页完整视图：勋章 + 菜单 + 版本

第四张截图是我的页完整视图：勋章卡（四枚勋章两实两虚）、四个菜单（📋 签到记录 / 🏅 我的勋章 / 🪙 积分兑换 / ⚙️ 设置）、底部"校园签到墙 / Version 1.0.0"全部可见。从渐变头图到版本号，五区块在单屏内完整呈现。

九、扩展思考：签到产品的成就体系设计

勋章卡是签到成就体系的最小展示，完整设计值得展开：

1. 勋章阶梯：签到新星（首次签到）→ 连续7天 → 连续30天 → 百日达人（连续100天）→ 签到之王（年度满勤）——从易到难的勋章阶梯是行为激励的骨架，每解锁一枚都强化"继续坚持"的动机。
2. 勋章规则：每枚勋章明确解锁条件（"连续签到 N 天"）并在勋章详情展示进度（"已连续 7/30 天"）——进度可见的勋章比"突然解锁"更有驱动力（看到差距才想补）。
3. 勋章展示：我的页勋章卡 + "🏅 我的勋章"菜单的完整勋章墙——勋章是"成就资产"，用户乐于展示（可分享到朋友圈"我的签到勋章"）。
4. 勋章与积分联动：解锁勋章可额外奖励积分（连续7天勋章 +100 分）——勋章是积分体系之上的成就层，双激励叠加。
5. 勋章的季节性：学期专属勋章（"期末冲刺"签到 30 天）——季节限定勋章制造稀缺感，配合开学/考试季运营。

十、扩展思考：签到提醒与习惯养成

签到产品最终目标是"帮用户养成习惯"，提醒机制是关键：

1. 定时提醒：按活动时段推送（晨读 07:00 前"晨读时间到 📚"）——@ohos.reminderAgentManager的本地提醒能力，配合"设置"菜单的提醒开关。
2. 连续性提醒：连续签到中断前提醒（"今天还没签到，连续 7 天即将清零 ⚠️"）——损失厌恶驱动，断签前 2 小时提醒挽回率最高。
3. 成就庆祝：解锁勋章/达成连续里程碑时弹窗庆祝（"连续签到 7 天达成！获得 🔥 连续7天 勋章"）——成就时刻的仪式感强化习惯回路。
4. 数据回顾：每周推送"本周签到报告"（签到 5/7 天、积分 +120、距离百日达人还差 80 天）——周报让坚持可见，是习惯养成的长期反馈。
5. 好友激励：与好友互看签到记录（"你的室友已连续签到 30 天"）——社交比较是最后的激励引擎，也是签到墙"墙"的社交化延伸。

十一、开发者视角：我的页的调试与验证技巧

1. 负 margin 叠层：统计卡margin({ top: -24 })悬浮，构建顺序（UserCard 先、StatRow 后）决定 StatRow 在上层——调整构建顺序需配合zIndex（系列同款坑）。
2. 勋章透明度的对比：已获 1.0 / 未获 0.3 的透明度——验证两态在浅色卡片上的区分度（0.3 足够"灰"但可辨认 emoji），真机确认。
3. 统计数字的跨页核对：128/7/860 与首页（7 天）、签到页（+50 积分）、活动页（积分奖励）的核对是验收重点——"数字处处有出处"的系列标准。
4. 勋章与连续天数的口径：'🔥 连续7天'已获与首页"7 连续"一致、'💯 百日达人'未获与累计 128 天（应获未获）——Demo 勋章规则未按累计判定，产品化时统一勋章判定逻辑（连续 or 累计）。
5. 菜单 key 长期方案：新增菜单项改用 id 作 key（当前m.title4 项内唯一）——系列标准建议。

十二、FAQ 与一句话总结

Q1：为什么有"勋章卡"而系列其他 App 没有？签到是"重复性行为"（每天一次），勋章是重复行为的成就化——勋章把"坚持的天数"变成"看得见的荣誉"，驱动用户日复一日签到。系列其他 App 的互动（点赞/抱抱）是"事件型"（偶尔发生），无需勋章；签到是"习惯型"，勋章是习惯养成的核心激励。产品行为频次决定成就体系的有无。

Q2：半透明的勋章是什么意思？未解锁（30% 透明）——灰暗的勋章是"还差一步"的视觉提示，激发"想点亮它"的动力；已解锁全实（🌟🔥）是成就的可见证明。透明度即解锁状态，是成就体系的最简表达。

Q3："860 积分"能干什么？对应"🪙 积分兑换"菜单——兑换校园福利（食堂代金券/文创/自习室时长）；积分来源是活动签到（50/30/20/40 分）+ 连续加成，积分是"签到 → 兑换"闭环的货币。

Q4：为什么菜单只有 4 行？签到产品功能域聚焦（记录/勋章/兑换/设置）——4 行恰好覆盖，比系列常规 5 行少一行体现"工具型产品功能精炼"；勋章卡（非菜单）承担成就展示，功能与展示分离。

一句话总结：我的页以 124 行代码完成了签到达人的个人中心——黄色渐变头图配 ✅ 签到头像、"累计 128 天 / 连续 7 天 / 860 积分"的坚持型统计、首个勋章卡（已获/未获透明度双态）、4 菜单覆盖"记录/勋章/兑换/设置"。勋章成就体系与"签到 → 积分 → 兑换"的激励闭环是本页的灵魂，让签到这个"小事"有了长期坚持的理由。

十四、开发者视角：我的页的调试与验证技巧

1. 负 margin 叠层：统计卡margin({ top: -24 })悬浮，构建顺序（UserCard 先、StatRow 后）决定 StatRow 在上层——调整构建顺序需配合zIndex（系列同款坑）。
2. 勋章透明度的对比：已获 1.0 / 未获 0.3 的透明度——验证两态在浅色卡片上的区分度（0.3 足够"灰"但可辨认 emoji），真机确认。
3. 统计数字的跨页核对：128/7/860 与首页（7 天）、签到页（+50 积分）、活动页（积分奖励）的核对是验收重点——"数字处处有出处"的系列标准。
4. 勋章与连续天数的口径：'🔥 连续7天'已获与首页"7 连续"一致、'💯 百日达人'未获与累计 128 天（应获未获）——Demo 勋章规则未按累计判定，产品化时统一勋章判定逻辑（连续 or 累计）。
5. 菜单 key 长期方案：新增菜单项改用 id 作 key（当前m.title4 项内唯一）——系列标准建议。

十五、FAQ 与一句话总结

Q6：勋章会随着连续天数变化吗？会——连续 7 天达成解锁"🔥 连续7天"（当前已获）、连续 30 天可解锁更高勋章；已解锁的勋章永久保留（勋章是成就历史，不随断签收回）——勋章记录峰值成就、统计记录当下状态，二者语义不同。

Q7："💯 百日达人"为什么没获得？累计 128 天已超 100 天，但"百日达人"按连续 100 天判定（当前连续 7 天未达标）——Demo 的勋章规则与统计口径不同，产品化时需在勋章详情明确判定条件（连续 vs 累计）。

Q8：勋章能在哪里看到全部？我的页勋章卡（4 枚概览）+ "🏅 我的勋章"菜单（完整勋章墙，含解锁进度"已连续 7/30 天"）——概览展示已获、菜单展示全部与进度。

Q9：积分兑换具体换什么？校园福利（食堂代金券、文创礼品、自习室时长、图书借阅加成）——兑换列表在"积分兑换"菜单中展示，积分从签到积累、在此消费，闭环完整。

Q10：为什么本页没有"同学录/互动消息"类菜单？签到是"个人习惯型"产品（核心是自我坚持），不是"社交型"（无需同学录/消息）——菜单 4 行（记录/勋章/兑换/设置）恰好覆盖"坚持 + 激励 + 设置"的个人闭环。这些 FAQ 与前面的拆解共同构成本页的完整解析。

最后从验收视角确认：四张实机截图覆盖了首屏（黄色渐变+统计+勋章卡）、签到记录菜单点击（Toast）、积分兑换菜单点击（Toast）、完整视图（勋章+菜单+版本）四个状态，负 margin 悬浮卡、三列等分、勋章透明度双态、菜单整行点击均验证正常。"128 累计/7 连续/860 积分"与"🔥 连续7天"勋章对应。整页 124 行代码完成"签到达人 + 勋章成就"的个人中心，验收通过。

补充一句：勋章与积分，是坚持者的勋章与粮草。