鸿蒙原生应用实战ArkTS 实现扫码/定位双模式签到大卡与状态翻转App 45「校园签到墙」签到页Func2Tab主题色#FDCB6E黄色yellow4 个 Tab 分别为首页✅、活动、签到、我的。签到页采用Header 模式切换 签到卡 本周签到四区布局——白色单行 Header签到20 号加粗扫码签到/定位签到双模式选中黄底白字 黄描边签到大卡160×160 淡黄圆角方 / 52 号图标随模式切换 扫描签到二维码/定位当前位置 全宽立即签到按钮点击后按钮翻转✅ 今日已签到绿字灰底本周签到卡周一到周日 7 天周一至周四 ✅、周五至周日 ⭕。本篇基于45-checkin-wall/entry/src/main/ets/pages/Func2Tab.ets共 91 行逐段拆解附 4 张实机截图。一、整体结构四区Header 模式 签到卡 本周布局签到页是品牌头部 模式选择 签到动作 周进度的四区布局——3 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 16 }) { this.ModeRow() this.CheckCard() this.WeekCard() } .width(100%) .padding({ left: D.pad, right: D.pad, top: 16, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }4 块结构Header— 单行品牌头签到ModeRow— 扫码/定位双模式State modeCheckCard— 签到大卡模式图标 提示 立即签到按钮State checkedIn状态翻转WeekCard— 本周签到 7 天进度签到页是系列中交互状态最多的页面——State mode模式切换State checkedIn签到状态翻转双状态驱动完成选模式 → 点签到 → 变已签的核心闭环。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header单行标题Header() { Row() { Text(签到).fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) } .width(100%).height(this.safeTop 56).padding({ top: this.safeTop, left: D.pad, right: D.pad }) .backgroundColor(C.card).alignItems(VerticalAlign.Bottom) }单行 20 号加粗、safeTop 56高度、白底、底部对齐——系列二级页统一范式。Tab 名签到与页面标题一致点击底部 Tab 即进入签到动作页。三、ModeRow扫码/定位双模式ModeRow() { Row({ space: 10 }) { ForEach(this.modes, (m: string, idx: number) { Text(m).fontSize(14) .fontColor(this.mode idx ? #FFFFFF : C.textSub) .textAlign(TextAlign.Center).layoutWeight(1).padding({ top: 10, bottom: 10 }) .backgroundColor(this.mode idx ? C.primary : C.card).borderRadius(D.rSm) .border({ width: 1, color: this.mode idx ? C.primary : C.stroke }) .onClick(() { this.mode idx; }) }, (m: string) m) }.width(100%) }2 种签到模式14 行[扫码签到, 定位签到]——与活动页规则的三种方式扫码/定位/连续中的两种对应连续签到是机制、扫码/定位是动作。技术要点等分胶囊两个 TextlayoutWeight(1)平分选中黄底白字 黄描边、未选白底灰字 浅灰描边——选中态底色 描边双表达App 43 发送方式同款手法。模式与图标联动mode变化驱动签到卡图标切换mode 0 ? : ——选模式即时看图标交互反馈直观。两种模式的产品语义扫码扫活动二维码/定位GPS 围栏——对应活动页扫描自习室二维码/定位操场完成签到的规则模式选择是签到方式的入口。四、CheckCard签到大卡 立即签到按钮CheckCard() { Column({ space: 12 }) { Stack({ alignContent: Alignment.Center }) { Column().width(160).height(160).backgroundColor(C.primarySoft).borderRadius(D.rLg) Column({ space: 10 }) { Text(this.mode 0 ? : ).fontSize(52) Text(this.mode 0 ? 扫描签到二维码 : 定位当前位置).fontSize(14).fontColor(C.primary) } } Button(this.checkedIn ? ✅ 今日已签到 : 立即签到).fontSize(15) .fontColor(this.checkedIn ? C.ok : #FFFFFF) .backgroundColor(this.checkedIn ? C.cardSoft : C.primary) .width(100%).height(48).borderRadius(D.rMd) .onClick(() { this.checkedIn true; promptAction.showToast({ message: 签到成功 50积分 }); }) } .width(100%).padding(20).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }技术拆解大图标区Stack({ alignContent: Alignment.Center })内 160×160 淡黄圆角方 52 号 / 图标随 mode 切换 14 号淡紫提示文字扫描签到二维码/定位当前位置——大图标的仪式感签到是个动作大图标强化动作感区别于普通表单按钮。立即签到按钮的状态翻转this.checkedIn ? ✅ 今日已签到 : 立即签到——系列最完整的按钮状态机待签态立即签到黄底白字CTA 强化已签态✅ 今日已签到绿字灰底完成弱化点击this.checkedIn true翻转 Toast签到成功 50积分状态持久翻转后按钮永久停在已签到Demo 无重置模拟今日只能签一次——与首页已签到双态、活动页连续签到7天规则完全一致。50积分Toast 与活动页晨读的50 积分奖励一致当前默认签晨读——签到成功即得对应活动积分。五、WeekCard本周签到 7 天WeekCard() { Column({ space: 12 }) { Text(本周签到).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Row() { ForEach(this.weekDays, (d: string, idx: number) { Column({ space: 6 }) { Text(this.weekStatus[idx] ? ✅ : ⭕).fontSize(22) Text(d).fontSize(11).fontColor(C.textDim) }.layoutWeight(1) }, (d: string, idx: number) d idx) }.width(100%) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }本周数据15-16 行weekDays [一,二,三,四,五,六,日]weekStatus [true, true, true, true, false, false, false]——周一至周四 ✅已签、周五至周日 ⭕未签。技术要点状态即 emoji已签 ✅ / 未签 ⭕——用 emoji 直接表达签到状态无需颜色/样式简洁直观。7 天等分每天layoutWeight(1)七等分整行✅/⭕22 号 星期字11 号浅灰上下排布。与连续签到的关系本周 4 天 ✅周一至周四 首页7 天连续本周 4 上周 3——周进度是连续签到的本周切片数据自洽。key 防冲突d idx索引拼接星期字唯一但保持规范。周进度的激励未签的 ⭕周五至周日是本周剩余可签日的视觉提示——看着 ⭕ 变 ✅ 是每周的仪式感。六、跨页数据自洽签到动作的全局联动签到页是签到动作的落地页与首页、活动页、我的页形成闭环立即签到 → 首页签到成功应翻转首页对应活动的isMine晨读打卡 → 已签到、签到卡今日已签 2/3变 3/3——签到动作驱动首页状态。签到成功 50积分↔ 活动页晨读50 积分——签到的积分与活动奖励一致。本周签到 4/7 ✅↔ 首页7 连续签到、我的页7 连续签到——周进度是连续天数的本周视图。我的页128 累计签到 / 860 积分↔ 每次签到 1 天 / N 积分——签到动作的长期累计。勋章 连续7天↔ 连续签到 7 天达成——签到行为的成就化。七、实机截图与交互演示本节结合 4 张实机截图逐张还原签到页的交互链路。1. 签到页首屏双模式 签到卡 本周第一张截图是签到页默认首屏顶部签到标题下方扫码签到 / 定位签到双模式扫码为黄底白字选中态再往下是签到大卡——160×160 淡黄圆角方内 52 号图标 扫描签到二维码提示 全宽黄底立即签到按钮底部本周签到卡——周一至周四 ✅、周五至周日 ⭕7 天等分排布。整页黄色系统一签到动作的仪式感强。2. 点击定位签到模式切换 图标联动第二张截图是点击定位签到后的状态选中态切换到定位签到黄底白字 黄描边签到卡图标从 变为 、提示从扫描签到二维码变为定位当前位置——State mode由 0 变 1模式选择与图标提示双处联动用户即时看到选了定位就是定位签到。3. 点击立即签到按钮状态翻转 Toast第三张截图是点击立即签到后的反馈弹出签到成功 50积分Toast——State checkedIn由 false 变 true按钮从立即签到黄底白字翻转为✅ 今日已签到绿字灰底。这是系列中按钮状态真实翻转的完整交互App 41 点赞、首页签到按钮同模式签到动作的完成感强烈。4. 签到页完整视图本周签到全览第四张截图是签到页的完整视图双模式定位选中、签到大卡 定位当前位置 已签到按钮、本周签到周一至周四 ✅ / 周五至周日 ⭕全部可见。签到成功后的已签到绿字灰底按钮与本周 4 天 ✅ 呼应——今天签了、本周已签 4 天的状态一致。八、扩展思考扫码与定位签到的技术实现签到页的两种模式是真实签到系统的入口其技术实现值得展开扫码签到调起相机ohos.multimedia.camera→ 扫描活动二维码二维码识别库→ 校验码的有效性活动 时段 未签过→ 写入签到记录。动态二维码每分钟刷新防截图代签。定位签到ohos.geoLocationManager获取 GPS → 计算与活动地点的距离地理围栏半径内→ 距离校验通过才可签到——晨跑定位操场即此模式防在家签到。时间校验无论哪种模式都要校验当前时间在活动时段内晨读 07:00-08:00——时段外提示未在签到时段。一签一制checkedIn状态即今日已签的服务端对应——签过即锁定防重复服务端用(userId, activityId, date)唯一键保证幂等。异常处理扫码失败识别不了/二维码过期、定位失败GPS 未开/不在围栏——都需要明确错误提示与重试入口签到体验的容错性。九、扩展思考签到打卡的产品仪式感签到页的大图标 按钮翻转 周进度构成了签到仪式的三件套大图标的仪式感160×160 大图标区/不是功能必需一个小按钮就能签到但它把签到从一个操作变成一个仪式——大图标 中央提示让用户专注准备签到仪式感提升完成率。按钮翻转的成就感立即签到→✅ 今日已签到的翻转是即时正反馈看到自己签成了——配合 Toast签到成功 50积分完成感三连按钮变 Toast 积分是行为心理学中即时奖励的标准实践。周进度的持续感✅ 从周一到周四的推进是长期正反馈看着一周的圆圈逐个变实——周进度把每日签到变成每周仪式配合连续 7 天勋章形成日 → 周 → 成就的激励阶梯。连续签到的损失厌恶断签会清零连续天数首页7归零——已签的不能断的心理驱动每日打开是签到产品的核心引擎。与实体签到的呼应实体签到墙是签名上墙一笔一画、电子签到是图标翻转一点一瞬——电子签到保留了仪式感这个灵魂只是载体数字化。十、开发者视角签到页的调试与验证技巧checkedIn 状态的持久性签到后按钮永久已签到无重置——验证刷新页面/切 Tab 再回来状态是否保持Demo 中 State 在页面实例内保持切 Tab 不销毁产品化用 Preferences 持久化当日签到状态。mode 与图标的联动点击两种模式确认图标/提示/按钮语义同步切换 扫码 / 定位——mode 0 ? ... : ...分支的正确性是验收点。周进度与连续天数的口径本周 4/7 ✅ 与首页7 连续本周 4 上周 3——若用户模拟日期变化两者需一致测试时用固定数据验证口径。Button 的选中态签到按钮用Button组件区别于首页 Text 模拟——确认翻转后文字/颜色/背景全更新且无按压残留态。Stack 居中的图标溢出52 号 emoji 在 160×160 内居中——窄屏/字号差异下确认不溢出方框必要时降号。十一、FAQ 与一句话总结Q1为什么签到页有两个模式对应活动页的两种签到方式扫码自习室/社团现场扫码与定位晨跑操场围栏——用户按参与的活动选择签到方式模式选择是用哪种方式证明我到了。Q2签到成功后按钮为什么变了立即签到→✅ 今日已签到的状态翻转是即时正反馈看到签成了也是今日只能签一次的业务表达已签即锁定——与首页已签到双态、活动页连续签到规则一致。Q3本周签到是本周的真实记录吗Demo 用静态weekStatus周一至周四 ✅。产品化后从服务端拉取本周签到记录与首页连续 7 天、我的页统计联动——周进度是连续签到的本周切片。Q450积分是怎么定的当前默认签到晨读活动活动页晨读50 积分——产品化后按所选活动积分奖励晨读 50/晨跑 30/自习室 20/社团 40与活动页积分标签一致。Q5签到需要真的扫码/定位吗Demo 的签到按钮直接翻转无真实扫码/定位——产品化后接入相机扫码与 GPS 定位扩展思考详述按钮点击触发真实校验后再翻转。当前 Demo 保留了交互形态技术链路是产品化步骤。一句话总结签到页以双模式 签到大卡 周进度完成了签到动作的完整闭环。扫码/定位模式选择与图标联动、立即签到 → ✅ 今日已签到的按钮状态翻转系列最完整状态机、本周 7 天 ✅/⭕ 的周进度可视化——91 行代码一个点一下就有仪式感的签到页也是选模式 → 签到 → 看进度三幕式签到体验的标准参考。十二、系列横向对比动作按钮的状态机三种形态App 45 签到页的立即签到 → 已签到翻转是系列按钮状态机的第三种形态与前代对比形态代表交互状态持久性Toast 反馈App 39-40点击弹 Toast无状态变化点赞翻转App 41 首页空心↔实心 数字可反复切换签到翻转App 45 签到页立即↔已签 颜色单向锁定签到翻转的独特性点赞是可逆再点取消、签到是不可逆今日一次——所以签到的翻转是单向锁定翻过去就回不来直到次日重置而点赞是双向切换随时取消。动作的可逆性决定状态机的方向可逆动作用切换、不可逆动作用锁定这是按钮状态机设计的核心原则。签到页的立即签到 → ✅ 今日已签到完美示范了锁定式状态机——配合首页已签到双态同样单向、签到页checkedIn持久切 Tab 不重置三处共同构成签到产品的一日一签状态体系。与本周进度的联动按钮翻转今日已签与本周签到周一到周四 ✅是日状态 → 周状态的递进——单日签到的完成感 一周的积累感两层反馈共同强化签到习惯这是系列其他 App点赞/抱抱无周期性不具备的习惯养成设计。十三、开发者视角签到页的调试与验证技巧checkedIn 状态的持久性签到后按钮永久已签到无重置——验证刷新页面/切 Tab 再回来状态是否保持Demo 中 State 在页面实例内保持切 Tab 不销毁产品化用 Preferences 持久化当日签到状态。mode 与图标的联动点击两种模式确认图标/提示/按钮语义同步切换 扫码 / 定位——mode 0 ? ... : ...分支的正确性是验收点。周进度与连续天数的口径本周 4/7 ✅ 与首页7 连续本周 4 上周 3——若用户模拟日期变化两者需一致测试时用固定数据验证口径。Button 的选中态签到按钮用Button组件区别于首页 Text 模拟——确认翻转后文字/颜色/背景全更新且无按压残留态。Stack 居中的图标溢出52 号 emoji 在 160×160 内居中——窄屏/字号差异下确认不溢出方框必要时降号。重复点击的防重已签到后再次点击按钮——当前无防重会重复 Toast签到成功产品化需在checkedIn为 true 时拦截今日已签到与首页双态按钮的防重逻辑一致。十四、FAQ 与一句话总结Q6签到后能取消吗不能——签到是不可逆动作今日一次签了就锁定这与点赞可取消不同若产品需要误签撤销应在签到后短时间内提供撤销如 2 分钟内过期锁定。Q7两种模式的签到结果一样吗一样——都记为当日签到积分按活动发放模式只是证明到场的方式产品化后签到记录应标注扫码/定位来源我的页签到记录可展示便于核对。Q8本周签到为什么从周一开始周一是惯例的周起始国内习惯——weekDays [一,二,...]从周一开始展示若产品面向国际化用户可改为周日起始周日 每周第一天。Q9签到成功 50积分的 50 是怎么定的当前默认签到晨读活动活动页晨读50 积分——产品化后按所选活动积分奖励晨读 50/晨跑 30/自习室 20/社团 40签到页可显示本次签到可得 XX 积分。Q10签到页和首页去签到怎么衔接首页去签到跳转本页并自动选中当前活动的签到模式——两页共享签到状态checkedIn首页看进度、本页做动作切换无状态丢失。这些 FAQ 与前面的拆解共同构成本页的完整解析。最后从验收视角确认四张实机截图覆盖了首屏双模式签到卡本周、定位模式切换 图标联动、立即签到按钮翻转 Toast、完整视图已签到状态 本周全览四个状态模式切换与图标联动、按钮状态翻转、本周 ✅/⭕ 进度均验证正常。签到成功 50积分与活动页晨读奖励一致。整页 91 行代码完成选模式 → 签到 → 看进度的三幕式签到体验验收通过可作为签到动作页面的标准参考。补充一句每一次签到都是与自己的一次小小约定。 签到墙的故事从每天清晨的第一下点击开始。 签到页的每一处交互都在为习惯的养成添砖加瓦。