鸿蒙原生应用 ArkTS 严格模式实战签到墙我的页 —— 渐变卡 悬浮统计 勋章墙三件套App 45「校园签到墙」我的页ProfileTab主题色#FDCB6E黄色yellow4 个 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 块结构UserCard— 黄色渐变品牌区展示签到达人身份与核心数据StatRow— 三列悬浮统计卡128 累计签到 / 7 连续签到 / 860 积分BadgeCard—系列首个勋章卡已获/未获双态MenuList— 4 行功能菜单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]] }) }技术拆解渐变头图linearGradient从#FDCB6E黄渐变到#FDD99A浅黄——与首页签到卡同款黄色渐变品牌统一系列首次黄色主题。✅ 签到头像64×64 半透明圆底 32 号 ✅——与 Tab 图标✅、勋章状态符号✅同源签到的确认符号即品牌符号。昵称签到达人达人定位与校园摄影师/明信片达人同款后缀——签到 128 天的达人是坚持的认可128 天累计签到的资历背书。副标题累计签到 128 天 ——128 天是坚持的量、是热情的火苗连续签到 7 天的火苗意象用天量化坚持、用强化热情签到产品的数据文案。底部 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 积分——三列指标完全贴合签到业务累计签到坚持总量、连续签到当前连续天数、积分激励余额——总量 连续 资产的三元统计是签到产品的标准数据模型。技术要点负 margin 悬浮.margin({ top: -24 })上移叠加在渐变区下缘——系列标志性手法。三列等分三个 ColumnlayoutWeight(1)自动三等分18 号数字 11 号标签。92% 宽度左右留 4% 呼吸边距。keys.label累计签到/连续签到/积分天然唯一。数据自洽128 累计签到 ↔ 副标题累计签到 128 天 ↔ 签到页每次签到 17 连续签到 ↔ 首页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 行emoji名称状态签到新星已获连续7天已获百日达人未获签到之王未获技术拆解已获/未获双态opacity(b.got ? 1.0 : 0.3)——已获勋章全实、未获 30% 透明 名称颜色区分已获深色/未获浅灰——半透明即未解锁灰暗的勋章是继续签到的动力想点亮它。成就阶梯签到新星入门→ 连续7天中期→ 百日达人100 天长期→ 签到之王最高荣誉——从易到难的勋章阶梯对应签到行为的不同里程碑是签到产品成就体系的最小展示。四等分每枚layoutWeight(1)四等分整行emoji30 号 名称11 号上下排布。数据联动 连续7天已获 ↔ 首页7连续天数达标 百日达人未获 ↔ 当前 128 天累计已超 100 天但 Demo 标记未获产品化按连续 100 天而非累计判定——勋章规则产品化时需明确定义。keyb.id.toString()稳定唯一。五、MenuList4 行菜单 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 行 签到记录 / 我的勋章 / 积分兑换 / ⚙️ 设置。菜单语义分析 签到记录历史签到明细每天签了哪些活动、得了几分——对应统计128 累计签到。 我的勋章勋章墙BadgeCard 的完整版含解锁条件——勋章是成就体系的管理入口。 积分兑换用积分兑换校园福利——对应860 积分的消费端积分闭环的出口。⚙️ 设置签到提醒、定位权限、隐私、关于。实现细节三栏行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全部可见。从渐变头图到版本号五区块在单屏内完整呈现。九、扩展思考签到产品的成就体系设计勋章卡是签到成就体系的最小展示完整设计值得展开勋章阶梯签到新星首次签到→ 连续7天 → 连续30天 → 百日达人连续100天→ 签到之王年度满勤——从易到难的勋章阶梯是行为激励的骨架每解锁一枚都强化继续坚持的动机。勋章规则每枚勋章明确解锁条件连续签到 N 天并在勋章详情展示进度已连续 7/30 天——进度可见的勋章比突然解锁更有驱动力看到差距才想补。勋章展示我的页勋章卡 我的勋章菜单的完整勋章墙——勋章是成就资产用户乐于展示可分享到朋友圈我的签到勋章。勋章与积分联动解锁勋章可额外奖励积分连续7天勋章 100 分——勋章是积分体系之上的成就层双激励叠加。勋章的季节性学期专属勋章期末冲刺签到 30 天——季节限定勋章制造稀缺感配合开学/考试季运营。十、扩展思考签到提醒与习惯养成签到产品最终目标是帮用户养成习惯提醒机制是关键定时提醒按活动时段推送晨读 07:00 前晨读时间到 ——ohos.reminderAgentManager的本地提醒能力配合设置菜单的提醒开关。连续性提醒连续签到中断前提醒今天还没签到连续 7 天即将清零 ⚠️——损失厌恶驱动断签前 2 小时提醒挽回率最高。成就庆祝解锁勋章/达成连续里程碑时弹窗庆祝连续签到 7 天达成获得 连续7天 勋章——成就时刻的仪式感强化习惯回路。数据回顾每周推送本周签到报告签到 5/7 天、积分 120、距离百日达人还差 80 天——周报让坚持可见是习惯养成的长期反馈。好友激励与好友互看签到记录你的室友已连续签到 30 天——社交比较是最后的激励引擎也是签到墙墙的社交化延伸。十一、开发者视角我的页的调试与验证技巧负 margin 叠层统计卡margin({ top: -24 })悬浮构建顺序UserCard 先、StatRow 后决定 StatRow 在上层——调整构建顺序需配合zIndex系列同款坑。勋章透明度的对比已获 1.0 / 未获 0.3 的透明度——验证两态在浅色卡片上的区分度0.3 足够灰但可辨认 emoji真机确认。统计数字的跨页核对128/7/860 与首页7 天、签到页50 积分、活动页积分奖励的核对是验收重点——数字处处有出处的系列标准。勋章与连续天数的口径 连续7天已获与首页7 连续一致、 百日达人未获与累计 128 天应获未获——Demo 勋章规则未按累计判定产品化时统一勋章判定逻辑连续 or 累计。菜单 key 长期方案新增菜单项改用 id 作 key当前m.title4 项内唯一——系列标准建议。十二、FAQ 与一句话总结Q1为什么有勋章卡而系列其他 App 没有签到是重复性行为每天一次勋章是重复行为的成就化——勋章把坚持的天数变成看得见的荣誉驱动用户日复一日签到。系列其他 App 的互动点赞/抱抱是事件型偶尔发生无需勋章签到是习惯型勋章是习惯养成的核心激励。产品行为频次决定成就体系的有无。Q2半透明的勋章是什么意思未解锁30% 透明——灰暗的勋章是还差一步的视觉提示激发想点亮它的动力已解锁全实是成就的可见证明。透明度即解锁状态是成就体系的最简表达。Q3860 积分能干什么对应 积分兑换菜单——兑换校园福利食堂代金券/文创/自习室时长积分来源是活动签到50/30/20/40 分 连续加成积分是签到 → 兑换闭环的货币。Q4为什么菜单只有 4 行签到产品功能域聚焦记录/勋章/兑换/设置——4 行恰好覆盖比系列常规 5 行少一行体现工具型产品功能精炼勋章卡非菜单承担成就展示功能与展示分离。一句话总结我的页以 124 行代码完成了签到达人的个人中心——黄色渐变头图配 ✅ 签到头像、累计 128 天 / 连续 7 天 / 860 积分的坚持型统计、首个勋章卡已获/未获透明度双态、4 菜单覆盖记录/勋章/兑换/设置。勋章成就体系与签到 → 积分 → 兑换的激励闭环是本页的灵魂让签到这个小事有了长期坚持的理由。十四、开发者视角我的页的调试与验证技巧负 margin 叠层统计卡margin({ top: -24 })悬浮构建顺序UserCard 先、StatRow 后决定 StatRow 在上层——调整构建顺序需配合zIndex系列同款坑。勋章透明度的对比已获 1.0 / 未获 0.3 的透明度——验证两态在浅色卡片上的区分度0.3 足够灰但可辨认 emoji真机确认。统计数字的跨页核对128/7/860 与首页7 天、签到页50 积分、活动页积分奖励的核对是验收重点——数字处处有出处的系列标准。勋章与连续天数的口径 连续7天已获与首页7 连续一致、 百日达人未获与累计 128 天应获未获——Demo 勋章规则未按累计判定产品化时统一勋章判定逻辑连续 or 累计。菜单 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 行代码完成签到达人 勋章成就的个人中心验收通过。补充一句勋章与积分是坚持者的勋章与粮草。