鸿蒙原生应用 ArkUI 实战：拆解 —— 签到墙活动页的积分奖励标签与规则信息卡

鸿蒙原生应用 ArkUI 实战：拆解 —— 签到墙活动页的积分奖励标签与规则信息卡

App 45「校园签到墙」活动页（Func1Tab），主题色#FDCB6E黄色（yellow），4 个 Tab 分别为首页（✅）、活动（📅）、签到（📍）、我的（👤）。活动页采用"Header + 活动信息列表"两区布局——白色单行 Header（"活动信息"20 号加粗）+4 张活动信息卡（📚 晨读打卡 / 🏃 晨跑活动 / 🎯 自习室学习 / 🎨 社团活动，每张含 50×50 淡黄圆角图标 + 活动名 + ⏰ 时段 + 橙色"50 积分"奖励标签 + 淡黄规则区"📋 连续签到7天获积分奖励"）。每张卡展示"活动名、时间、签到规则、积分奖励"四项信息，是签到活动的"说明书"。本篇基于45-checkin-wall/entry/src/main/ets/pages/Func1Tab.ets（共 77 行）逐段拆解，附 4 张实机截图。

一、整体结构：两区"Header + 活动信息列表"布局

活动页是"品牌头部 + 活动信息卡列表"的两区布局：

build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.ActList() } .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) }

2 块结构：

1. Header— 单行品牌头（"活动信息"）
2. ActList— 4 张活动信息卡，展示每个签到活动的完整"说明书"

与首页"今日签到清单"（可操作：签到按钮）不同，活动页是"活动百科"（信息展示：规则+奖励）——首页回答"今天签什么"、活动页回答"每个活动怎么签、有什么奖励"，两页分工清晰。

项目源码开源：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高度、白底、底部对齐——系列二级页统一范式。"活动信息"而非"活动列表"的命名暗示本页的定位是"查看活动详情信息"而非"参与活动"（参与在首页/签到页），信息展示型页面。

三、ActList：活动信息卡

ActList() { Column({ space: 14 }) { ForEach(this.acts, (a: ActInfo) => { Column({ space: 12 }) { 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.Bold).fontColor(C.text) Text('⏰ ' + a.time).fontSize(12).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(a.reward).fontSize(12).fontColor(C.warn) .padding({ left: 8, right: 8, top: 3, bottom: 3 }).backgroundColor('#FFF3E0').borderRadius(6) }.width('100%') Row({ space: 8 }) { Text('📋').fontSize(13) Text(a.rule).fontSize(13).fontColor(C.textSub).layoutWeight(1) } .width('100%').padding(10).backgroundColor(C.cardSoft).borderRadius(D.rSm) } .width('100%').padding(14).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) .onClick(() => { promptAction.showToast({ message: a.name }); }) }, (a: ActInfo) => a.id.toString()) }.width('100%') }

4 个活动（21-26 行）：

卡片细节：

1. 头行（图标 + 名称/时间 + 奖励）：50×50 淡黄圆角图标 + 名称 15 号加粗 + ⏰ 时段 12 号浅灰（layoutWeight(1)撑开）+橙色积分奖励标签——fontColor(C.warn)橙色文字 +#FFF3E0浅橙底 + 圆角 6 的"50 积分"小标签，橙色是"奖励"的通用语义色（金/橙 = 价值），一眼吸引。
2. 规则区：独立一行——📋 图标 + 规则文字 13 号深灰（textSub），backgroundColor(C.cardSoft)淡黄浅底 + 圆角 10——规则用"底色区块"与主信息区区分，视觉上"上信息、下规则"层次分明。
3. 签到方式多样化：4 个活动的规则揭示三种签到方式——连续签到（晨读）、定位签到（晨跑）、扫码签到（自习室/社团）——对应签到页的"扫码/定位"两种模式 + 连续机制，规则与签到页功能严格对应。
4. 积分梯度：50/30/20/40 分——晨读最高（连续 7 天难度大）、自习室最低（全天可签容易），积分与签到难度成正比，激励体系自洽。
5. 整卡点击：点击 Toast 活动名——产品化后进入活动详情页（含签到入口）。

四、跨页数据自洽：活动页是签到体系的"规则说明书"

活动页与首页、签到页、我的页的联动：

• 4 个活动同名同序↔ 首页今日活动清单（晨读打卡/晨跑活动/自习室学习/社团活动）——首页展示"今天签哪些"、本页展示"每个怎么签"。
• 签到方式↔ 签到页两种模式——晨读的"连续签到"对应连续天数机制、晨跑的"定位操场"对应签到页"定位签到"、自习室/社团的"扫码"对应"扫码签到"——规则与功能一一对应。
• 积分奖励↔ 签到页"签到成功 +50积分"（晨读 50 分对应当日签到积分）、我的页"860 积分"（累计）——积分从活动产生、在签到页累加、在我的页沉淀。
• "连续签到7天"↔ 首页"7"连续天数、我的页勋章"🔥 连续7天"——7 天连续是晨读活动的奖励门槛，也是全 App 的核心激励目标。

五、实机截图与交互演示

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

1. 活动页首屏：活动信息卡

第一张截图是活动页默认首屏：顶部"活动信息"标题；下方第一张活动卡——📚 晨读打卡（50×50 淡黄图标）+ "⏰ 每日 07:00-08:00" + 橙色"50 积分"标签 + 淡黄规则区"📋 连续签到7天获积分奖励"；第二张"🏃 晨跑活动"（每日 06:30-07:30 / 30 积分 / 定位操场完成签到）部分可见。每张卡"图标 + 名称时间 + 橙色积分 + 规则区"的四层信息结构整齐统一。

2. 点击积分标签：整卡 Toast

第二张截图是点击"晨读打卡"卡（橙色"50 积分"标签区域）后的反馈：弹出"晨读打卡"Toast——整卡挂载onClick、闭包捕获a.name，点击卡面任意区域（图标/名称/积分/规则）都弹活动名，点击热区覆盖整卡。

3. 点击规则区：活动名 Toast

第三张截图是点击"晨读打卡"卡的淡黄规则区（📋 连续签到7天获积分奖励）后的反馈：弹出"晨读打卡"Toast——规则区是卡片内部区域，点击同样触发整卡事件，验证了"整卡可点 + 内部区域无独立事件"的层级关系。

4. 活动页完整列表：四活动全览

第四张截图是活动页的完整列表：四个活动卡全部可见（晨读打卡 50 分 / 晨跑活动 30 分 / 自习室学习 20 分 / 社团活动 40 分），积分梯度（50/30/20/40）与签到难度对应，规则区（连续/定位/扫码）揭示三种签到方式。Scroll 滚动流畅，底部安全区内边距保证 Tab 栏可点。

六、扩展思考：签到活动的规则与反作弊设计

活动页的规则（定位/扫码/连续）背后是签到系统的反作弊设计：

1. 定位签到（晨跑）："定位操场完成签到"——需在指定地理围栏内（GPS 半径校验），防止"在家也能签晨跑"——@ohos.geoLocationManager的地理围栏能力是定位签到的技术基础。
2. 扫码签到（自习室/社团）："扫描自习室二维码/现场扫码签到"——二维码每分钟刷新（动态码），防止截图转发代签——扫码签到的核心是"动态二维码 + 单设备单次"。
3. 连续签到（晨读）："连续签到7天"——需在 07:00-08:00 时段内签到（时段外无效），防止"半夜补签"——时段校验是连续签到的规则基础。
4. 时间窗口：每个活动有明确时段（07:00-08:00 等）——时段内签到才有效，new Date()与活动时段的比对是签到服务的核心校验。
5. 设备与账号：签到绑定账号（一账号一天一签）+ 设备指纹（防多开刷签）——签到是"稀缺奖励"（积分/勋章），反作弊是维持激励公平的底线。

七、扩展思考：积分体系的完整设计

活动页的积分标签是签到激励体系的一环，完整积分体系值得展开：

1. 积分来源：活动签到（50/30/20/40 分）+ 连续签到加成（连续 7 天额外奖励）——多源积分让"签到多样化"。
2. 积分消费：我的页"🪙 积分兑换"——兑换校园福利（食堂代金券/文创礼品/自习室时长）——积分是签到 → 兑换的闭环货币，让签到的努力有实际回报。
3. 积分等级：860 积分可设等级（青铜 → 黄金 → 王者签到者）——积分不仅是"余额"更是"等级"，与勋章体系（我的页勋章卡）联动。
4. 积分明细：我的页"签到记录"应展示每笔积分流水（何时签、得几分）——积分的透明性是信任基础。
5. 积分有效期：学期积分（期末清零）vs 累计积分（永久）——有效期设计影响用户兑换节奏（临期催促兑换）。

八、开发者视角：活动页的调试与验证技巧

1. 奖励标签的橙色对比：#FFF3E0浅橙底 +C.warn橙字在 12 号小字号下的可读性——真机验证橙色标签清晰，必要时加深字色。
2. 规则区与主区的区分：规则区cardSoft淡黄底与卡片白底、图标淡黄底（primarySoft）——三种浅色（白/淡黄/浅橙）在同一卡片内需层次清晰，真机确认无"糊成一片"。
3. 整卡点击的边界：onClick挂外层 Column 覆盖全卡——确认积分标签、规则区、图标都可点（无独立事件遮挡），与首页"签到"按钮（Text 独立 onClick）的层级不同（本页整卡一个事件）。
4. 长规则文本的换行：规则文字 13 号layoutWeight(1)撑开——长规则（"扫描自习室二维码并拍照确认"）会自动换行，验证规则区高度自适应。
5. 数据自洽：4 个活动与首页同名同序、积分与签到页"签到成功 +50积分"一致——修改任一页需同步（建议抽公共数据源）。

九、FAQ 与一句话总结

Q1：活动页和首页的活动列表有什么区别？首页是"今日可签清单"（带签到按钮，可操作），活动页是"活动规则说明书"（带积分/规则，供查看）——一个行动、一个知识，首页回答"今天签什么"、活动页回答"怎么签、有什么奖励"。

Q2：为什么积分标签用橙色？橙色（C.warn）在系列中是"奖励/警示"的语义色——积分是"价值"（金色联想），用橙色标签醒目地传达"签了就有奖励"，与黄色主色形成"黄底 + 橙标"的邻近色搭配，和谐醒目。

Q3：三种签到方式是怎么确定的？按活动场景设计：晨跑需要到场（定位）、自习室/社团有固定地点（扫码）、晨读是习惯养成（连续）——签到方式匹配活动性质，规则区的"说明书"功能就是让用户提前知道"这个活动怎么签"。

Q4：积分会被清零吗？Demo 未实现。产品化按学期或年度清零（积分有效期），或永久累计——有效期设计影响兑换节奏，是产品运营决策。

Q5：点击活动卡后去哪？Demo 弹 Toast。产品化后进入活动详情页（大图 + 规则 + 积分 + 签到入口 + 参与人数）——活动页的卡片是详情页的入口。

一句话总结：活动页以"活动信息卡"完成了签到活动的规则展示——图标 + 名称/时间 + 橙色积分标签 + 规则区的四层信息卡，把每个签到活动的"怎么签、有什么奖励"讲得清清楚楚。橙色积分的奖励语义、三种签到方式的规则对应、积分梯度与难度匹配，让本页既是"签到说明书"又是"激励展示墙"——77 行代码，一个让用户"看完就想签到"的活动信息页。

十、系列横向对比：规则说明类页面的三种形态

活动页是"规则说明页"，与系列其他信息展示页对比可看清其设计定位：

差异要点：

1. 信息维度：App 45 活动卡的信息是"规则 + 奖励"（怎么签 + 得多少），App 40 活动卡是"日期 + 人数"（何时 + 多少人），App 42 话题卡是"描述 + 条数"（是什么 + 多少条）——信息维度永远服务于页面职能：签到活动页卖"奖励"（吸引力）、活动清单页卖"热度"（参与感）、话题目录页卖"规模"（内容量）。
2. 奖励的可视化：App 45 的橙色积分标签（C.warn+ 浅橙底）是系列中唯一的"奖励标签"——积分是签到产品的核心激励，奖励需要最醒目的视觉（橙色 = 价值），其他页面的数据标签（条数/人数）用浅灰即可。
3. 规则区的设计：App 45 用"浅黄底区块"（cardSoft）隔离规则——规则是"说明书"信息，用底色区块与主信息区分，读起来像"附注"；App 40 的日期/人数直接嵌在信息流里（同层级），因为它们是"主数据"不是"说明"。

复用价值：本页"四层信息卡（图标/名称时间/奖励标签/规则区）"可直接复用到任何"活动 + 规则 + 奖励"类页面（竞赛报名、课程介绍、任务说明），是信息型卡片的成熟模板。

十一、扩展思考：签到活动的运营与季节性

活动页的 4 个活动是签到运营的基础盘，其运营节奏值得展开：

1. 常驻活动 + 限时活动：晨读/晨跑/自习室是常驻（每日可签）、社团活动是周期（周三）——产品可增加"限时活动"（考试周"冲刺签到"、节日"双倍积分"）——常驻保底 + 限时刺激的运营组合。
2. 活动的季节轮换：秋季学期推"晨跑"（天气凉爽）、冬季推"图书馆自习"（室内）——活动按季节调整，签到内容与校园生活节奏同步。
3. 活动的积分调节：新活动上线初期高积分（拉新）、成熟后回调——积分是运营杠杆，活动页的积分标签随运营策略动态调整。
4. 活动的参与反馈：活动卡可加"参与人数"（首页已有"128 人已签"）与"我的本周参与次数"——个人进度 vs 集体热度的双反馈。
5. 活动与勋章的联动：特定活动签到可解锁专属勋章（"晨跑达人"勋章）——活动 + 勋章的双激励，让每个活动都有"集章"的收藏价值。

十二、开发者视角：活动页的调试与验证技巧

1. 奖励标签的橙色对比：#FFF3E0浅橙底 +C.warn橙字在 12 号小字号下的可读性——真机验证橙色标签清晰，必要时加深字色。
2. 规则区与主区的区分：规则区cardSoft淡黄底与卡片白底、图标淡黄底（primarySoft）——三种浅色（白/淡黄/浅橙）在同一卡片内需层次清晰，真机确认无"糊成一片"。
3. 整卡点击的边界：onClick挂外层 Column 覆盖全卡——确认积分标签、规则区、图标都可点（无独立事件遮挡）。
4. 长规则文本的换行：规则文字 13 号layoutWeight(1)撑开——长规则（"扫描自习室二维码并拍照确认"）会自动换行，验证规则区高度自适应。
5. 数据自洽：4 个活动与首页同名同序、积分与签到页"签到成功 +50积分"一致——修改任一页需同步（建议抽公共数据源）。

十三、FAQ 与一句话总结

Q6：为什么规则要单独用底色区块？规则是"说明性信息"（怎么签），与"主信息"（活动名/时间/奖励）性质不同——浅黄底区块把规则"隔开"，用户扫一眼即知"上面是活动信息、下面是签到规则"，信息分层清晰。

Q7：积分标签为什么不做成按钮？积分是"展示信息"（看奖励）而非"操作入口"（点积分没意义）——做成标签（非按钮样式）避免误导用户点击；点整卡进入活动详情才是正确操作路径。

Q8：活动的签到方式会变吗？会——运营可按场景调整规则（晨跑从定位改为扫码、新增"拍照签到"）——规则区文字随运营更新，卡片结构不变。

Q9：活动页需要搜索/筛选吗？4 个活动全量展示即可（无筛选必要）；活动扩展到 20+ 时可加"常驻/限时"分段（复用系列分段控件）——规模决定是否筛选。

Q10：活动详情页是什么样？点击活动卡进入详情页——大封面 + 活动名 + 完整规则 + 积分奖励 + 参与人数 + "去签到"按钮 + 历史签到记录——活动卡是详情页的入口，本页的四层信息是详情页的浓缩。这些 FAQ 与前面的拆解共同构成本页的完整解析。

最后从验收视角确认：四张实机截图覆盖了首屏（活动信息卡）、积分标签点击（活动名 Toast）、规则区点击（活动名 Toast）、完整列表（四活动全览）四个状态，橙色积分标签、规则区底色块、四层信息卡均验证正常。4 个活动的积分（50/30/20/40）与签到方式（扫码/定位/连续）在页面内数据一致。整页 77 行代码完成"活动规则说明书"的信息展示，验收通过，可作为规则说明类页面的参考范本。

补充一句：活动的积分与规则，是签到墙为每一份坚持标好的价码与路标。 规则说明的清晰度，决定了用户参与的热情度——本页正是这句话的最佳实践。 签到活动页，让每一次坚持都有清晰的回报。