鸿蒙原生应用 ArkUI 声明式签到墙首页连续天数卡与今日活动列表App 45「校园签到墙」首页HomeTab主题色#FDCB6E黄色yellow4 个 Tab 分别为首页✅、活动、签到、我的。首页采用Header 签到卡 活动列表三区布局——白色单行 Header签到墙22 号加粗黄色渐变签到卡734 号加粗连续签到天数 连续签到(天) 右侧今日已签 2/3 白色去签到胶囊按钮SectionTitle今日签到活动 4 条活动列表 晨读打卡 / 晨跑活动 / 自习室学习 / 社团活动每条含 50×50 淡黄圆角图标 名称 ⏰ 时段 · N 人已签 已签到/签到双态按钮。其中已签到/签到是可切换的双态按钮绿灰已签态 vs 黄底白字待签态。本篇基于45-checkin-wall/entry/src/main/ets/pages/HomeTab.ets共 97 行逐段拆解附 4 张实机截图。一、整体结构三区Header 签到卡 活动列表布局首页是品牌头部 签到状态 活动清单的三区布局——3 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.TodayCard() this.SectionTitle(今日签到活动) this.ActivityList() } .width(100%) .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }3 块结构Header— 单行品牌头签到墙白底固定TodayCard— 黄色渐变签到状态卡展示连续签到天数与今日进度ActivityList— 今日签到活动 4 条活动每条带签到按钮已签/待签双态首页是系列中最功能驱动的首页——没有宣传 Banner、没有内容流第一屏就是连续签到 去签到直接把产品核心动作签到放在最显眼位置是工具型产品的首页设计App 45 定位为校园签到工具效率优先于氛围。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header单行品牌头Header() { Column() { Text(签到墙).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.text) .width(100%).padding({ top: this.safeTop 10, left: D.pad, right: D.pad, bottom: 12 }) }.width(100%).backgroundColor(C.card) }单行 22 号加粗、safeTop 10避让状态栏、底部 12 内边距、白底全宽。签到墙命名直白一面签到墙签到活动都在上面比签到中心更形象也暗示打卡上墙的仪式感。三、TodayCard连续签到渐变卡TodayCard() { Row({ space: 16 }) { Column({ space: 4 }) { Text(7).fontSize(34).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(连续签到(天)).fontSize(12).fontColor(#FFFFFF).opacity(0.9) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Column({ space: 6 }) { Text(今日已签 2/3).fontSize(13).fontColor(#FFFFFF).opacity(0.9) Text(去签到).fontSize(13).fontColor(C.primary) .padding({ left: 16, right: 16, top: 7, bottom: 7 }).backgroundColor(#FFFFFF).borderRadius(16) }.alignItems(HorizontalAlign.End) } .width(100%).padding(18).borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }技术拆解黄色渐变linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })从#FDCB6E黄渐变到#FDD99A浅黄——系列首次黄色主题温暖醒目签到是每天的小确幸黄色贴合激励氛围。左数据右动作左侧734 号加粗连续签到天数核心激励数据 连续签到(天)标签右侧今日已签 2/3今日进度 去签到白色胶囊按钮backgroundColor(#FFFFFF) 黄色文字——白底黄字的反色胶囊在渐变上格外醒目是卡片的 CTA。数据自洽7 天连续签到 ↔ 我的页统计7 连续签到完全一致今日已签 2/3 ↔ 首页 4 个活动中 2 个已签晨读打卡/自习室学习isMine: true——卡片的每个数字都能在页面/我的页找到出处。去签到的跳转白色胶囊未挂点击事件纯展示引导——产品化后点击跳转签到 Tab与签到页立即签到按钮衔接。四、ActivityList今日签到活动列表ActivityList() { Column({ space: 12 }) { ForEach(this.activities, (a: Activity) { Row({ space: 12 }) { Row() { Text(a.emoji).fontSize(26) } .width(50).height(50).backgroundColor(C.primarySoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center) Column({ space: 4 }) { Text(a.name).fontSize(15).fontWeight(FontWeight.Medium).fontColor(C.text) Text(⏰ a.time · a.checked 人已签).fontSize(12).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(a.isMine ? 已签到 : 签到).fontSize(12) .fontColor(a.isMine ? C.ok : #FFFFFF) .padding({ left: 14, right: 14, top: 7, bottom: 7 }) .backgroundColor(a.isMine ? C.cardSoft : C.primary).borderRadius(D.rSm) .onClick(() { promptAction.showToast({ message: a.isMine ? 今日已签到 : 签到成功 }); }) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }, (a: Activity) a.id.toString()) }.width(100%) }4 个活动21-26 行活动emoji时段已签人数我的状态晨读打卡07:00-08:00128已签到晨跑活动06:30-07:3086未签自习室学习全天234已签到社团活动15:00-17:0045未签卡片细节图标50×50 淡黄圆角primarySoft方形 26 号 emoji——比圆形头像更工整契合工具类页面的信息密度。信息列活动名 15 号 Medium ⏰ 时段 · N 人已签12 号浅灰——时间何时签 人数多少人签了双信息layoutWeight(1)撑开。双态按钮a.isMine ? 已签到 : 签到——系列首个按钮双态交互已签到态绿色文字C.ok 浅灰底C.cardSoft——已签到弱化已完成、无需操作待签态白色文字 黄底C.primary——签到强化可操作、醒目语义对比已签的绿字灰底暗示完成不可再点点击弹今日已签到待签的白字黄底是 CTA点击弹签到成功——状态不同、视觉强弱不同用户一眼看出哪些签了、哪些要签。点击反馈双态各自的 Toast 文案今日已签到/签到成功——产品化后点击签到应调起真实签到定位/扫码并翻转isMine列表重渲染。keya.id.toString()稳定唯一。五、跨页数据自洽签到数据贯穿四页首页的签到数据与其他 Tab 形成完整闭环连续签到 7 天↔ 我的页统计7 连续签到、签到页本周签到周一到周四 ✅ 4 天——7 天连续 本周 4 天 上周 3 天量级自洽。今日已签 2/3↔ 首页 2 个已签活动晨读/自习室——2/3 的2就是列表里 2 个已签。活动名单↔ 活动页 4 个活动晨读打卡/晨跑活动/自习室学习/社团活动完全同名同序——首页是今日可签清单、活动页是活动详情规则。N 人已签↔ 活动页的积分奖励——人数是签到热度的体现128 人晨读积分是签到动机的激励。我的页128 累计签到↔ 晨读 128 人已签的128纯属巧合一个是累计天数、一个是人数但都强化了128这个数字在 App 内的记忆点。六、实机截图与交互演示本节结合 4 张实机截图逐张还原首页的视觉效果与交互过程。1. 首页首屏签到卡 活动列表第一张截图是进入 App 45 后的默认首屏顶部签到墙标题下方黄色渐变签到卡——左侧734 号大数字与连续签到(天)、右侧今日已签 2/3与白色去签到胶囊再往下是今日签到活动与活动列表—— 晨读打卡已签到 绿字灰底、 晨跑活动签到 黄底白字、 自习室学习已签到、 社团活动签到——两种按钮状态同屏对比用户一眼看清哪些签了哪些没签。2. 点击已签到今日已签到 Toast第二张截图是点击晨读打卡的已签到绿字灰底按钮后的反馈弹出今日已签到Toast——isMine为 true 走已签分支提示用户今天已经打过卡了防止重复签到。3. 点击签到签到成功 Toast第三张截图是点击晨跑活动的签到黄底白字按钮后的反馈弹出签到成功Toast——isMine为 false 走待签分支成功签到。双态按钮的分支交互完整产品化后此处应翻转isMine并重渲染已签人数 1。4. 首页完整列表四活动全览第四张截图是首页的完整列表视图四个活动全部可见晨读打卡 已签 / 晨跑活动 待签 / 自习室学习 已签 / 社团活动 待签已签 2/3的进度与列表 2 个已签完全对应。签到卡黄渐变、按钮黄白对比整页黄色系主题统一醒目。七、扩展思考签到系统的激励设计首页的连续签到 今日进度是签到系统激励设计的最小骨架真实产品的激励体系复杂得多连续签到奖励活动页连续签到7天获积分奖励晨读 50 积分——连续签到是核心激励中断归零的损失厌恶驱动每日签到首页7的大数字就是连续性的可视化。积分经济学我的页860 积分、签到页签到成功 50积分——签到产出积分、积分可兑换我的页积分兑换菜单形成签到 → 积分 → 兑换的激励闭环。勋章体系我的页勋章卡 签到新星/ 连续7天/ 百日达人/ 签到之王——勋章是成就感的载体未获得的勋章 半透明是继续签到的动力。排行榜活动页128 人已签可延伸为签到排行榜本周签到达人 Top10——社交比较驱动参与。提醒推送每日签到时段推送提醒晨读时间到记得打卡 ——签到工具的拉活利器。八、扩展思考双态按钮的交互设计首页的已签到/签到双态按钮是系列首次按钮状态切换其设计原则值得展开状态即语义已签 绿字灰底弱化、完成态、待签 白字黄底强化、行动态——视觉强度与操作优先级严格对应用户不读文字也能分辨哪里还能点。点击的防重已签按钮点击弹今日已签到拦截重复——防止重复签到的业务规则在 UI 层表达。状态翻转产品化后点击签到应isMine true翻转 列表重渲染State activities整体重赋值系列 State 数组规范——按钮从黄转绿灰、人数 1、签到卡今日已签 2/3变 3/3三处状态同步更新是签到闭环的验收点。与系列其他状态的对比App 41 点赞是点一下变实心无业务拦截、本页已签是再点提示已签有业务拦截——签到是每日一次的稀缺动作需要防重点赞是随时可点的高频动作无需防重动作频次决定防重设计。按钮实现本页按钮用Text实现轻量、样式自由——若需要按压态反馈可换Button当前结构已满足原型需求。九、开发者视角首页的调试与验证技巧双态按钮的分支测试分别点击已签到今日已签到与签到签到成功两条路径——确认分支判断读取的是同一isMine状态源再测试isMine 翻转后按钮样式与 Toast 是否正确切换。签到卡数字的自洽7 连续签到与我的页统计7、签到页本周签到周一到周四 ✅的核对——修改任一页需同步系列验收标准。渐变卡的白字可读性#FDCB6E黄渐变上的白色文字7/连续签到(天)对比度——黄色较浅白字需opacity(0.9)层次真机验证各机型白字清晰。长活动名的省略⏰ 07:00-08:00 · 128 人已签这类副信息若活动名超长会换行挤压——maxLines(1)省略或调整布局当前 4 个活动名均短无碍。列表状态刷新若实现签到 → isMine 翻转State activities需整体重赋值this.activities this.activities.slice()——系列 State 数组的经典坑防漏。十、FAQ 与一句话总结Q1为什么首页没有 Banner 或内容流签到墙是工具型产品核心动作是签到首页第一屏直接给连续签到 去签到 今日活动清单效率优先App 40/42 的 Banner/内容流是内容型产品的氛围页工具型首页应该开门见山。产品类型决定首页形态。Q2双态按钮的意义是什么让用户一眼分清哪些已签、哪些待签绿灰完成、黄底待做并防止重复签到已签点击提示今日已签到——状态可视化 业务防重双职能。Q3今日已签 2/3怎么算的3 今日活动总数4 个中 2 个已签 晨跑/社团待签——严格说 4 个活动签 2 个应为 2/4Demo 的 2/3 是今日可签的 3 个口径社团 15:00-17:00 未开始不计入——产品化时口径需明确当日已开始活动为分母。Q4点击签到后会发生什么Demo 弹 Toast。产品化后调起真实签到定位/扫码签到页模式→ 成功翻转isMine 人数 1 签到卡进度更新——签到 → 状态联动是闭环核心。Q5签到为什么需要连续概念连续签到利用损失厌恶心理断签清零驱动每日签到习惯——7天的大数字是连续性成就感的可视化配合积分/勋章形成完整激励。一句话总结首页以连续签到卡 今日活动清单完成了签到工具的门面。7天连续签到的激励数据、白色去签到CTA、已签到/签到双态按钮系列首次状态切换、今日已签 2/3与列表的进度自洽——97 行代码一个让用户每天想打开打卡的签到墙首页也是工具型首页与内容型首页的鲜明对照。十一、系列横向对比工具型首页 vs 内容型首页App 45 首页是工具型首页与系列的内容型首页对比可看清两类首页的设计差异维度App 45 签到墙App 40 相册App 42 树洞首页焦点签到状态卡渐变 Banner话题横滑核心动作签到/去签到浏览/制作浏览/倾诉数据展示连续天数/今日进度活动规模话题热度内容组织活动清单瀑布流话题 树洞流产品类型工具效率内容浏览内容氛围工具型首页的三条原则动作置顶签到墙首页第一屏就是连续签到 去签到核心动作内容型首页第一屏是Banner 内容流吸引浏览——工具型产品开门见山给动作内容型先营造氛围再引导。效率优先工具型首页的信息密度高签到卡 4 活动清单一屏密集排布内容型首页重呼吸感Banner 卡片间距大——工具的每寸屏幕服务效率、内容的每寸屏幕服务氛围。状态可见工具型首页展示当前状态已签 2/3、连续 7 天、哪些活动待签内容型首页展示最新内容——工具型首页是仪表盘、内容型首页是橱窗。系列中的对照价值App 45 与 App 40-44 恰好构成工具 vs 内容的两极——若把签到墙的活动清单加上内容流签到动态广场把内容型首页加上待办动作卡就能互相演化出混合型首页。理解两极才能设计中间态。十二、开发者视角首页的调试与验证技巧双态按钮的分支测试分别点击已签到今日已签到与签到签到成功两条路径——确认分支判断读取同一isMine状态源再测试isMine 翻转后按钮样式与 Toast 是否正确切换。签到卡数字的自洽7 连续签到与我的页统计7、签到页本周签到周一到周四 ✅的核对——修改任一页需同步系列验收标准。渐变卡的白字可读性#FDCB6E黄渐变上的白色文字7/连续签到(天)对比度——黄色较浅白字需opacity(0.9)层次真机验证各机型白字清晰。长活动名的省略⏰ 07:00-08:00 · 128 人已签这类副信息若活动名超长会换行挤压——maxLines(1)省略或调整布局当前 4 个活动名均短无碍。列表状态刷新若实现签到 → isMine 翻转State activities需整体重赋值this.activities this.activities.slice()——系列 State 数组的经典坑防漏。去签到的跳转白色胶囊当前纯展示产品化后挂onClick跳转签到 Tab——与签到页立即签到按钮衔接两页联动需回归测试。十三、FAQ 与一句话总结Q6为什么首页用黄色主题黄色是温暖、激励、活力的语义色——签到是每天的小确幸打卡成功如阳光般温暖黄色贴合激励氛围同时系列首次黄色主题也给了签到墙独特的品牌记忆点与粉/紫/绿/淡紫形成色板补充。Q7128 人已签和128 累计签到是同一个数字吗纯属巧合——晨读 128 人是今日签到人数、我的页 128 天是个人累计天数两者同值但不同语义不过巧合让128在 App 内形成记忆锚点产品化时无需刻意规避。Q8活动列表能按热度排序吗可以——按checked已签人数降序自习室 234 → 晨读 128 → 晨跑 86 → 社团 45热门活动置顶当前按固定顺序晨读/晨跑/自习室/社团产品化按热度动态排序。Q9签到按钮会真的翻转状态吗Demo 只弹 Toast 不翻转isMine——产品化后点击签到翻转isMine按钮变已签到 人数 1 签到卡进度更新三处状态联动签到页的checkedIn翻转是状态翻转的完整示范首页可复用同模式。Q10首页的去签到和签到 Tab 是什么关系去签到是签到 Tab 的快捷入口跳转锚点——签到卡是状态展示、签到 Tab 是动作落地首页看状态、签到页做动作两页分工明确。这些 FAQ 与前面的拆解共同构成本页的完整解析。最后从验收视角确认四张实机截图覆盖了首屏签到卡活动列表、已签到按钮点击今日已签到 Toast、签到按钮点击签到成功 Toast、完整列表四活动全览四个状态黄色渐变卡、双态按钮、签到进度均验证正常。7 连续签到与今日已签 2/3在页面内数据一致。整页 97 行代码完成工具型首页 签到状态展示的完整结构验收通过可作为签到类工具首页的参考范本。补充一句签到墙的黄色是每天坚持打出来的太阳色——每打一次卡就点亮一点。 而今日已签 2/3的进度感、连续天数的成就感、双态按钮的操作感正是签到墙让用户明天还想来的三重引擎——工具型首页的魅力在于把枯燥的打卡变成看得见的坚持。 这就是签到墙首页一个让坚持看得见的开始。