鸿蒙原生应用实战HarmonyOS 6.0 垃圾分类我的页 —— 签到联动经验条的环保中心App 15「智能垃圾分类」我的 TabProfileTab是个人中心页。整页用渐变用户卡片李环保 Lv.6 1860/3000 经验条 可交互签到 4 栏统计分类/准确率/减碳/等级 3 列环保成就墙6 徽章 4 解锁 本周分类次数条形图总计 47 次 6 项菜单分类日历带数字 3/NEW 角标 AboutInfo 组成。本篇基于15-trash-classify/entry/src/main/ets/pages/ProfileTab.ets约 312 行逐段拆解附 4 张实机截图。一、整体结构与 App 14 同源的绿色个人中心ProfileTab 与 App 14 我的页几乎同构6 个 Builder 块、同样的布局顺序差异在数据和文案build() { Column() { Scroll() { Column({ space: 14 }) { this.UserCard() this.StatRow() this.AchievementWall() this.WeeklyChart() this.MenuList() this.AboutInfo() } .width(100%) .padding({ left: D.pad, right: D.pad, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }6 个块顺序UserCard身份→ StatRow数据→ AchievementWall成就→ WeeklyChart行为图→ MenuList资产→ AboutInfo关于。与 App 14 我的页对比维度App 14 运动App 15 环保主题色绿 #16A34A绿 #22C55E用户张运动 Lv.5李环保 Lv.6经验1280/200064%1860/300062%统计预约/时长/场地/卡路里分类/准确率/减碳/等级成就篮球/足球/羽毛球…环保新手/回收达人/减碳先锋…签到10 积分5 环保积分周图运动时长 7.5h分类次数 47 次同一套个人中心模板换主题换数据——系列化 demo 的复用方法论在我的页上体现得最彻底App 13/14/15 三连复用。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、UserCardLv.6 经验条 可交互签到UserCard 与 App 14 同构渐变用户卡差异在数据Builder UserCard() { Column({ space: 12 }) { Row({ space: 14 }) { Row() { Text().fontSize(32) } .width(60).height(60) .backgroundColor(#FFFFFF).opacity(0.3).borderRadius(30) .justifyContent(FlexAlign.Center) Column({ space: 4 }) { Row({ space: 8 }) { Text(李环保).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Row() { Text(Lv.6).fontSize(10).fontColor(#FFFFFF) } .padding({ left: 8, right: 8, top: 3, bottom: 3 }) .backgroundColor(#FFFFFF).opacity(0.25).borderRadius(8) } Text(环保达人 · 减碳 15.6kg).fontSize(12).fontColor(#FFFFFF).opacity(0.85) } .alignItems(HorizontalAlign.Start).layoutWeight(1) Text(编辑).fontSize(12).fontColor(#FFFFFF).opacity(0.85) .padding({ left: 8, right: 8, top: 4, bottom: 4 }) .border({ width: 1, color: #FFFFFF }).borderRadius(D.rSm) .onClick(() { promptAction.showToast({ message: 编辑资料 }); }) } .width(100%) Column({ space: 4 }) { Row() { Text(经验值).fontSize(11).fontColor(#FFFFFF).opacity(0.85) Blank() Text(1860 / 3000).fontSize(11).fontColor(#FFFFFF).opacity(0.85) } .width(100%) Progress({ value: 62, total: 100 }) .color(#FFFFFF).backgroundColor(#33FFFFFF) .height(6).borderRadius(3).width(100%) } .width(100%) Row() { Text(this.checked ? ✓ 今日已签到 : 每日签到 5 环保积分) .fontSize(13).fontColor(#FFFFFF) .layoutWeight(1) Text(this.checked ? 已签到 : 签到) .fontSize(13).fontColor(C.primary) .padding({ left: 16, right: 16, top: 6, bottom: 6 }) .backgroundColor(#FFFFFF).borderRadius(D.rSm) .onClick(() { if (!this.checked) { this.checked true; promptAction.showToast({ message: 签到成功 5 积分 }); } }) } .width(100%) .padding({ left: 12, right: 12, top: 10, bottom: 10 }) .backgroundColor(#33FFFFFF).borderRadius(D.rSm) } .width(100%) .padding(16) .borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }2.1 用户数据与品牌调性头像环保叶——呼应绿色环保主题姓名李环保——姓名带产品属性环保比小明/张运动更贴 App 调性等级Lv.6系列最高——用户越老练与 App 13 的 Lv.4、App 14 的 Lv.5 形成递进Slogan环保达人 · 减碳 15.6kg——减碳量直接进 Slogan把环保成果变成身份标签经验条 1860/300062%比 App 14 的 1280/2000 更高——等级越高、经验越多数据一致Lv.6 对应更多累计经验。2.2 签到 5 环保积分签到逻辑与 App 14 完全同构State checkedif (!this.checked)防重复.onClick(() { if (!this.checked) { this.checked true; promptAction.showToast({ message: 签到成功 5 积分 }); } })差异在积分值App 14 是 10 运动积分App 15 是 5 环保积分——积分值是产品设计参数环保场景每日 5 更合理运动场景 10 更有激励感。同一个交互模板不同业务参数——模板复用的完美示例。三、StatRow4 栏统计含等级StatRow 与 App 14 同构负边距悬浮卡但统计项包含等级private stats: StatItem[] [ { value: 328, label: 分类 }, { value: 92%, label: 准确率 }, { value: 15.6kg, label: 减碳 }, { value: Lv.6, label: 等级 } ];4 栏统计分类 328 / 准确率 92% / 减碳 15.6kg / 等级 Lv.6——与首页 HeroCard 三栏328/92%/15.6kg完全一致多了等级维度。跨页数据一致首页/记录页/我的页三个页面共用 328/92%/15.6kg 数据。等级作为统计项是 App 15 的特色——前两代App 13/14的统计都是行为数据订单/预约App 15 加身份数据Lv.6——行为 身份混合统计反映环保等级是用户最在意的身份标签。margin({ top: -28 })负边距悬浮 4 栏同色C.text——与 App 14 同款。四、AchievementWall环保主题成就墙AchievementWall 是 6 个环保徽章的 3 列 Grid4 解锁 2 未解锁Builder AchievementWall() { Column({ space: 12 }) { Row() { Text(成就墙).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text) Blank() Text(4/6).fontSize(12).fontColor(C.textDim) } .width(100%) Grid() { ForEach(this.badges, (b: Badge) { GridItem() { Column({ space: 6 }) { Row() { Text(b.emoji).fontSize(24) } .width(48).height(48) .backgroundColor(b.unlocked ? C.primarySoft : C.cardSoft) .borderRadius(24) .justifyContent(FlexAlign.Center) .opacity(b.unlocked ? 1.0 : 0.4) Text(b.name).fontSize(10).fontColor(b.unlocked ? C.text : C.textDim) } .alignItems(HorizontalAlign.Center) } }, (b: Badge) b.id.toString()) } .columnsTemplate(1fr 1fr 1fr) .columnsGap(10) .rowsGap(10) .width(100%) } .width(100%) .padding(14) .backgroundColor(C.card).borderRadius(D.rMd) .border({ width: 1, color: C.stroke }) }6 个环保徽章数据private badges: Badge[] [ { id: 1, emoji: , name: 环保新手, unlocked: true }, { id: 2, emoji: ♻️, name: 回收达人, unlocked: true }, { id: 3, emoji: , name: 减碳先锋, unlocked: true }, { id: 4, emoji: , name: 知识百科, unlocked: true }, { id: 5, emoji: , name: 分类王者, unlocked: false }, { id: 6, emoji: , name: 环保大使, unlocked: false } ];徽章名有成长阶梯入门级已解锁环保新手 → 回收达人 ♻️ → 减碳先锋 → 知识百科 高级目标未解锁分类王者 → 环保大使 新手→达人→先锋→百科→王者→大使的等级叙事——每个徽章名都体现环保能力等级用户有清晰的成长路径。解锁/未解锁三件套背景/透明度/文字与 App 14 同款。4/6硬编码App 13 用.filter()动态算App 14/15 都硬编码——动态计算 vs 硬编码的取舍真实项目建议动态。五、WeeklyChart本周分类次数WeeklyChart 与首页同构7 天条形图汇总改为总计 47 次Builder WeeklyChart() { Column({ space: 12 }) { Row() { Text(本周分类次数).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text) Blank() Text(总计 47 次).fontSize(12).fontColor(C.primary) } .width(100%) Row({ space: 4 }) { ForEach(this.barData, (b: BarItem) { Column({ space: 6 }) { Stack({ alignContent: Alignment.Bottom }) { Column() .width(18).height(b.value) .linearGradient({ angle: 180, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) .borderRadius(4) } .width(24).height(90) Text(b.day).fontSize(10).fontColor(C.textDim) } .layoutWeight(1) .alignItems(HorizontalAlign.Center) }, (b: BarItem) b.day) } .width(100%) } .width(100%) .padding(14) .backgroundColor(C.card).borderRadius(D.rMd) .border({ width: 1, color: C.stroke }) }总计 47 次的数据推导barData 是 50/70/45/85/60/90/75百分比强度如果按每天分类次数 ≈ 强度/2换算25352242304537 ≈ 236 次/周不对——demo 显示47 次是另一套口径可能是本周实际记录 47 次。注意这里的数据口径不一致首页趋势图是强度百分比平均 68%我的页是次数47 次——同一天的数据两个页面两个度量。真实项目应统一口径要么都显示次数要么都显示百分比这是 demo 的数据瑕疵也值得写出来提醒读者。图表本身Stack 底部对齐 渐变绿 7 天与首页/App 14 完全同构。六、MenuList6 项菜单 数字/NEW 角标MenuList 与 App 14 同构6 项菜单 两种角标数据换成环保主题private menus: MenuItem[] [ { id: 1, emoji: , label: 分类日历, desc: 查看每日分类记录, badge: 3 }, { id: 2, emoji: , label: 邀请好友, desc: 一起参与环保, badge: }, { id: 3, emoji: ⭐, label: 我的收藏, desc: 收藏的分类知识, badge: }, { id: 4, emoji: , label: 积分兑换, desc: 环保积分换好礼, badge: NEW }, { id: 5, emoji: ⚙️, label: 提醒设置, desc: 定时分类提醒, badge: }, { id: 6, emoji: , label: 意见反馈, desc: 帮助与反馈, badge: } ];角标编排 分类日历 — badge 33 条待处理记录呼应分类页统计待处理 26——demo 数字不完全一致但分类日历有内容待看的语义成立 积分兑换 — badge NEW新功能引导数字角标3和 NEW 角标的两种形态圆形/胶囊与 App 14 完全同构if (m.badge NEW) { Text(m.badge).fontSize(9).fontColor(#FFFFFF) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .backgroundColor(C.danger).borderRadius(4) } else { Text(m.badge).fontSize(9).fontColor(#FFFFFF) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .backgroundColor(C.danger).borderRadius(9) .constraintSize({ minWidth: 18 }).textAlign(TextAlign.Center) }constraintSize({ minWidth: 18 })textAlign(Center)borderRadius(9)——数字徽标的正圆三件套1 位数正圆、2 位数椭圆。菜单语义与环保主题邀请好友一起参与环保积分兑换环保积分换好礼定时分类提醒——每个菜单项都带环保业务语义不是通用菜单模板。七、AboutInfo版本信息AboutInfo 与 App 14 同构版本 技术栈 版权三行Builder AboutInfo() { Column({ space: 6 }) { Text(智能垃圾分类 v1.0.0).fontSize(12).fontColor(C.textDim) Text(基于 HarmonyOS 6.0 ArkTS 开发).fontSize(11).fontColor(C.textDim) Text(© 2024 智慧校园).fontSize(10).fontColor(C.textDim).opacity(0.6) } .width(100%) .padding({ top: 16, bottom: 16 }) .alignItems(HorizontalAlign.Center) }智能垃圾分类 v1.0.0——App 名随产品变化运动场地预约 v1.0.0 → 智能垃圾分类 v1.0.0模板参数化。八、State 的克制ProfileTab 只有 1 个 Statechecked: boolean签到状态——与 App 14 完全一致展示页 1 个 State是本系列的我的页标准。4 个 Tab 的 State 分布页面State 数量类型首页 HomeTab1keyword展示搜索识别 Func1Tab6keyword/selectedCat/result/resultCat/resultColor/note交互查询分类 Func2Tab1activeTab筛选我的 ProfileTab1checked展示签到识别页 6 个 State 是 4 页最多——它承载搜索 选择 预览 提交最复杂的交互其他 3 页各 1 个展示/筛选/签到。**State 数量 页面交互复杂度**再次得到验证。九、游戏化闭环环保版App 15 我的页的游戏化链路环保版签到 5 环保积分每日激励→checked翻转经验条 1860/300062%长期目标→ 还差 1140 经验成就墙 4/6身份认同→ 环保新手→回收达人→减碳先锋→知识百科Lv.6 徽章等级象征→ 系列最高等级与 App 13/14 的游戏化对比App签到积分等级成就主题13 音乐伪签到只 Toast—Lv.4通用徽章14 运动10 积分真交互运动积分Lv.5运动徽章15 环保5 环保积分真交互环保积分Lv.6环保徽章系列的游戏化从伪到真、从通用到主题化——App 15 的环保积分/环保成就让游戏化与产品主题深度绑定。十、与 App 14 我的页的同构总结维度App 14 运动我的App 15 环保我的布局6 块同构6 块同构签到10 积分5 积分成就运动 6 徽章环保 6 徽章菜单6 项6 项数字3/NEW周图运动时长 7.5h分类次数 47 次About运动预约 v1.0.0垃圾分类 v1.0.0两页 95% 代码相同差异只在数据——这是模板复用的最强证明一个绿色个人中心模板换数据源即可生成任意主题的个人页。十一、数据一致性与口径本页数据与首页/记录页的呼应分类 328 首页本月分类 328 分类页总记录 328三页一致 ✓准确率 92% 首页准确率 92%两页一致 ✓减碳 15.6kg 首页本月减碳 15.6kg两页一致 ✓本周 47 次vs 首页平均 68%口径不一致 ✗详见第五节三个页面共享 328/92%/15.6kg但周数据口径不统一——demo 的大部分一致 小部分瑕疵是真实项目数据的常态。读者应学习跨页一致的好习惯也警惕口径不统一的坑。十二、环保积分体系的设计App 15 的积分体系签到 5 环保积分背后应该有完整的积分经济模型1. 积分获取渠道多源签到 5、每次分类 2、分享环保知识 1、邀请好友 50、完成测试 10——行为越多、积分越多激励用户持续使用。2. 积分消耗渠道闭环积分兑换菜单第 4 项积分兑换——环保袋、种子、绿植、优惠券——积分能花出去才有价值。没有消耗渠道的积分体系会通货膨胀用户失去获取动力。3. 积分与经验分离本页经验值1860/3000 升级 Lv.6和环保积分签到 5是两套体系——经验决定等级身份积分决定兑换资产。等级体系成长 积分体系经济双轨是游戏化设计的标准架构微信运动步数经验、支付宝蚂蚁森林能量积分都如此。4. 防刷机制签到每天一次checked 日期持久化、分类同物品重复不计数去重、分享每日上限 3 次——防刷是积分经济模型的安全底线。demo 只实现了签到 5一个积分动作但积分 多源获取 兑换消耗 防刷的完整模型值得在真实项目中设计——积分体系是留存的核心引擎。十三、个人中心的身份叙事进化对比系列 3 个我的页可以清晰看到**身份叙事的进化**App用户等级Slogan叙事主线13 音乐小明同学Lv.4活跃用户·已使用 28 天使用时长我用了多久14 运动张运动Lv.5运动达人·已坚持 28 天坚持天数我坚持多久15 环保李环保Lv.6环保达人·减碳 15.6kg环保成果我贡献了什么叙事从使用时长 → 坚持天数 → 环保成果——App 15 的减碳 15.6kg是最强的身份标签我做了什么贡献比我用了多久更有激励性贡献感 社会价值感。成果型身份减碳 kg/种树棵数/帮助人数是公益类/环保类 App 的黄金标准——支付宝蚂蚁森林把种树做成身份我已经种了 3 棵树激励效果远大于连续签到 30 天。设计启示个人中心的 Slogan 应该写用户的贡献成果而非用户的使用时长——前者是我给世界带来了什么后者是我在 App 上花了多少时间。十四、4 个 Tab 的完整闭环App 15 四个 Tab 构成完整闭环首页♻️ 知识入口 ↓ 看到分类指南 45%→ 想学 识别 查询分类 ↓ 查到旧报纸 → 可回收物→ 产生记录 分类️ 记录管理 ↓ 看到占比厨余 48%→ 调整习惯 我的 身份沉淀 ↓ 签到 5 → 经验涨 → 成就解锁 → 身份升级 ↓ 回到首页看到减碳 15.6kg→ 继续使用知识 → 行动 → 记录 → 身份四环相扣每个 Tab 都有明确的下一步引导首页引导学、识别引导查、分类引导改、我的引导签——Tab 间闭环是系列 demo 的最高级设计前几代 App 的 Tab 相对独立。十五、小结App 15「智能垃圾分类」我的页解析完毕。Lv.6 环保达人 四色编码 doSearch 真逻辑 环保游戏化 积分经济模型让 App 15 成为系列的环保主题标杆。
鸿蒙原生应用实战：HarmonyOS 6.0 垃圾分类我的页 —— 签到联动经验条的环保中心
鸿蒙原生应用实战HarmonyOS 6.0 垃圾分类我的页 —— 签到联动经验条的环保中心App 15「智能垃圾分类」我的 TabProfileTab是个人中心页。整页用渐变用户卡片李环保 Lv.6 1860/3000 经验条 可交互签到 4 栏统计分类/准确率/减碳/等级 3 列环保成就墙6 徽章 4 解锁 本周分类次数条形图总计 47 次 6 项菜单分类日历带数字 3/NEW 角标 AboutInfo 组成。本篇基于15-trash-classify/entry/src/main/ets/pages/ProfileTab.ets约 312 行逐段拆解附 4 张实机截图。一、整体结构与 App 14 同源的绿色个人中心ProfileTab 与 App 14 我的页几乎同构6 个 Builder 块、同样的布局顺序差异在数据和文案build() { Column() { Scroll() { Column({ space: 14 }) { this.UserCard() this.StatRow() this.AchievementWall() this.WeeklyChart() this.MenuList() this.AboutInfo() } .width(100%) .padding({ left: D.pad, right: D.pad, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }6 个块顺序UserCard身份→ StatRow数据→ AchievementWall成就→ WeeklyChart行为图→ MenuList资产→ AboutInfo关于。与 App 14 我的页对比维度App 14 运动App 15 环保主题色绿 #16A34A绿 #22C55E用户张运动 Lv.5李环保 Lv.6经验1280/200064%1860/300062%统计预约/时长/场地/卡路里分类/准确率/减碳/等级成就篮球/足球/羽毛球…环保新手/回收达人/减碳先锋…签到10 积分5 环保积分周图运动时长 7.5h分类次数 47 次同一套个人中心模板换主题换数据——系列化 demo 的复用方法论在我的页上体现得最彻底App 13/14/15 三连复用。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、UserCardLv.6 经验条 可交互签到UserCard 与 App 14 同构渐变用户卡差异在数据Builder UserCard() { Column({ space: 12 }) { Row({ space: 14 }) { Row() { Text().fontSize(32) } .width(60).height(60) .backgroundColor(#FFFFFF).opacity(0.3).borderRadius(30) .justifyContent(FlexAlign.Center) Column({ space: 4 }) { Row({ space: 8 }) { Text(李环保).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Row() { Text(Lv.6).fontSize(10).fontColor(#FFFFFF) } .padding({ left: 8, right: 8, top: 3, bottom: 3 }) .backgroundColor(#FFFFFF).opacity(0.25).borderRadius(8) } Text(环保达人 · 减碳 15.6kg).fontSize(12).fontColor(#FFFFFF).opacity(0.85) } .alignItems(HorizontalAlign.Start).layoutWeight(1) Text(编辑).fontSize(12).fontColor(#FFFFFF).opacity(0.85) .padding({ left: 8, right: 8, top: 4, bottom: 4 }) .border({ width: 1, color: #FFFFFF }).borderRadius(D.rSm) .onClick(() { promptAction.showToast({ message: 编辑资料 }); }) } .width(100%) Column({ space: 4 }) { Row() { Text(经验值).fontSize(11).fontColor(#FFFFFF).opacity(0.85) Blank() Text(1860 / 3000).fontSize(11).fontColor(#FFFFFF).opacity(0.85) } .width(100%) Progress({ value: 62, total: 100 }) .color(#FFFFFF).backgroundColor(#33FFFFFF) .height(6).borderRadius(3).width(100%) } .width(100%) Row() { Text(this.checked ? ✓ 今日已签到 : 每日签到 5 环保积分) .fontSize(13).fontColor(#FFFFFF) .layoutWeight(1) Text(this.checked ? 已签到 : 签到) .fontSize(13).fontColor(C.primary) .padding({ left: 16, right: 16, top: 6, bottom: 6 }) .backgroundColor(#FFFFFF).borderRadius(D.rSm) .onClick(() { if (!this.checked) { this.checked true; promptAction.showToast({ message: 签到成功 5 积分 }); } }) } .width(100%) .padding({ left: 12, right: 12, top: 10, bottom: 10 }) .backgroundColor(#33FFFFFF).borderRadius(D.rSm) } .width(100%) .padding(16) .borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }2.1 用户数据与品牌调性头像环保叶——呼应绿色环保主题姓名李环保——姓名带产品属性环保比小明/张运动更贴 App 调性等级Lv.6系列最高——用户越老练与 App 13 的 Lv.4、App 14 的 Lv.5 形成递进Slogan环保达人 · 减碳 15.6kg——减碳量直接进 Slogan把环保成果变成身份标签经验条 1860/300062%比 App 14 的 1280/2000 更高——等级越高、经验越多数据一致Lv.6 对应更多累计经验。2.2 签到 5 环保积分签到逻辑与 App 14 完全同构State checkedif (!this.checked)防重复.onClick(() { if (!this.checked) { this.checked true; promptAction.showToast({ message: 签到成功 5 积分 }); } })差异在积分值App 14 是 10 运动积分App 15 是 5 环保积分——积分值是产品设计参数环保场景每日 5 更合理运动场景 10 更有激励感。同一个交互模板不同业务参数——模板复用的完美示例。三、StatRow4 栏统计含等级StatRow 与 App 14 同构负边距悬浮卡但统计项包含等级private stats: StatItem[] [ { value: 328, label: 分类 }, { value: 92%, label: 准确率 }, { value: 15.6kg, label: 减碳 }, { value: Lv.6, label: 等级 } ];4 栏统计分类 328 / 准确率 92% / 减碳 15.6kg / 等级 Lv.6——与首页 HeroCard 三栏328/92%/15.6kg完全一致多了等级维度。跨页数据一致首页/记录页/我的页三个页面共用 328/92%/15.6kg 数据。等级作为统计项是 App 15 的特色——前两代App 13/14的统计都是行为数据订单/预约App 15 加身份数据Lv.6——行为 身份混合统计反映环保等级是用户最在意的身份标签。margin({ top: -28 })负边距悬浮 4 栏同色C.text——与 App 14 同款。四、AchievementWall环保主题成就墙AchievementWall 是 6 个环保徽章的 3 列 Grid4 解锁 2 未解锁Builder AchievementWall() { Column({ space: 12 }) { Row() { Text(成就墙).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text) Blank() Text(4/6).fontSize(12).fontColor(C.textDim) } .width(100%) Grid() { ForEach(this.badges, (b: Badge) { GridItem() { Column({ space: 6 }) { Row() { Text(b.emoji).fontSize(24) } .width(48).height(48) .backgroundColor(b.unlocked ? C.primarySoft : C.cardSoft) .borderRadius(24) .justifyContent(FlexAlign.Center) .opacity(b.unlocked ? 1.0 : 0.4) Text(b.name).fontSize(10).fontColor(b.unlocked ? C.text : C.textDim) } .alignItems(HorizontalAlign.Center) } }, (b: Badge) b.id.toString()) } .columnsTemplate(1fr 1fr 1fr) .columnsGap(10) .rowsGap(10) .width(100%) } .width(100%) .padding(14) .backgroundColor(C.card).borderRadius(D.rMd) .border({ width: 1, color: C.stroke }) }6 个环保徽章数据private badges: Badge[] [ { id: 1, emoji: , name: 环保新手, unlocked: true }, { id: 2, emoji: ♻️, name: 回收达人, unlocked: true }, { id: 3, emoji: , name: 减碳先锋, unlocked: true }, { id: 4, emoji: , name: 知识百科, unlocked: true }, { id: 5, emoji: , name: 分类王者, unlocked: false }, { id: 6, emoji: , name: 环保大使, unlocked: false } ];徽章名有成长阶梯入门级已解锁环保新手 → 回收达人 ♻️ → 减碳先锋 → 知识百科 高级目标未解锁分类王者 → 环保大使 新手→达人→先锋→百科→王者→大使的等级叙事——每个徽章名都体现环保能力等级用户有清晰的成长路径。解锁/未解锁三件套背景/透明度/文字与 App 14 同款。4/6硬编码App 13 用.filter()动态算App 14/15 都硬编码——动态计算 vs 硬编码的取舍真实项目建议动态。五、WeeklyChart本周分类次数WeeklyChart 与首页同构7 天条形图汇总改为总计 47 次Builder WeeklyChart() { Column({ space: 12 }) { Row() { Text(本周分类次数).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text) Blank() Text(总计 47 次).fontSize(12).fontColor(C.primary) } .width(100%) Row({ space: 4 }) { ForEach(this.barData, (b: BarItem) { Column({ space: 6 }) { Stack({ alignContent: Alignment.Bottom }) { Column() .width(18).height(b.value) .linearGradient({ angle: 180, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) .borderRadius(4) } .width(24).height(90) Text(b.day).fontSize(10).fontColor(C.textDim) } .layoutWeight(1) .alignItems(HorizontalAlign.Center) }, (b: BarItem) b.day) } .width(100%) } .width(100%) .padding(14) .backgroundColor(C.card).borderRadius(D.rMd) .border({ width: 1, color: C.stroke }) }总计 47 次的数据推导barData 是 50/70/45/85/60/90/75百分比强度如果按每天分类次数 ≈ 强度/2换算25352242304537 ≈ 236 次/周不对——demo 显示47 次是另一套口径可能是本周实际记录 47 次。注意这里的数据口径不一致首页趋势图是强度百分比平均 68%我的页是次数47 次——同一天的数据两个页面两个度量。真实项目应统一口径要么都显示次数要么都显示百分比这是 demo 的数据瑕疵也值得写出来提醒读者。图表本身Stack 底部对齐 渐变绿 7 天与首页/App 14 完全同构。六、MenuList6 项菜单 数字/NEW 角标MenuList 与 App 14 同构6 项菜单 两种角标数据换成环保主题private menus: MenuItem[] [ { id: 1, emoji: , label: 分类日历, desc: 查看每日分类记录, badge: 3 }, { id: 2, emoji: , label: 邀请好友, desc: 一起参与环保, badge: }, { id: 3, emoji: ⭐, label: 我的收藏, desc: 收藏的分类知识, badge: }, { id: 4, emoji: , label: 积分兑换, desc: 环保积分换好礼, badge: NEW }, { id: 5, emoji: ⚙️, label: 提醒设置, desc: 定时分类提醒, badge: }, { id: 6, emoji: , label: 意见反馈, desc: 帮助与反馈, badge: } ];角标编排 分类日历 — badge 33 条待处理记录呼应分类页统计待处理 26——demo 数字不完全一致但分类日历有内容待看的语义成立 积分兑换 — badge NEW新功能引导数字角标3和 NEW 角标的两种形态圆形/胶囊与 App 14 完全同构if (m.badge NEW) { Text(m.badge).fontSize(9).fontColor(#FFFFFF) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .backgroundColor(C.danger).borderRadius(4) } else { Text(m.badge).fontSize(9).fontColor(#FFFFFF) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .backgroundColor(C.danger).borderRadius(9) .constraintSize({ minWidth: 18 }).textAlign(TextAlign.Center) }constraintSize({ minWidth: 18 })textAlign(Center)borderRadius(9)——数字徽标的正圆三件套1 位数正圆、2 位数椭圆。菜单语义与环保主题邀请好友一起参与环保积分兑换环保积分换好礼定时分类提醒——每个菜单项都带环保业务语义不是通用菜单模板。七、AboutInfo版本信息AboutInfo 与 App 14 同构版本 技术栈 版权三行Builder AboutInfo() { Column({ space: 6 }) { Text(智能垃圾分类 v1.0.0).fontSize(12).fontColor(C.textDim) Text(基于 HarmonyOS 6.0 ArkTS 开发).fontSize(11).fontColor(C.textDim) Text(© 2024 智慧校园).fontSize(10).fontColor(C.textDim).opacity(0.6) } .width(100%) .padding({ top: 16, bottom: 16 }) .alignItems(HorizontalAlign.Center) }智能垃圾分类 v1.0.0——App 名随产品变化运动场地预约 v1.0.0 → 智能垃圾分类 v1.0.0模板参数化。八、State 的克制ProfileTab 只有 1 个 Statechecked: boolean签到状态——与 App 14 完全一致展示页 1 个 State是本系列的我的页标准。4 个 Tab 的 State 分布页面State 数量类型首页 HomeTab1keyword展示搜索识别 Func1Tab6keyword/selectedCat/result/resultCat/resultColor/note交互查询分类 Func2Tab1activeTab筛选我的 ProfileTab1checked展示签到识别页 6 个 State 是 4 页最多——它承载搜索 选择 预览 提交最复杂的交互其他 3 页各 1 个展示/筛选/签到。**State 数量 页面交互复杂度**再次得到验证。九、游戏化闭环环保版App 15 我的页的游戏化链路环保版签到 5 环保积分每日激励→checked翻转经验条 1860/300062%长期目标→ 还差 1140 经验成就墙 4/6身份认同→ 环保新手→回收达人→减碳先锋→知识百科Lv.6 徽章等级象征→ 系列最高等级与 App 13/14 的游戏化对比App签到积分等级成就主题13 音乐伪签到只 Toast—Lv.4通用徽章14 运动10 积分真交互运动积分Lv.5运动徽章15 环保5 环保积分真交互环保积分Lv.6环保徽章系列的游戏化从伪到真、从通用到主题化——App 15 的环保积分/环保成就让游戏化与产品主题深度绑定。十、与 App 14 我的页的同构总结维度App 14 运动我的App 15 环保我的布局6 块同构6 块同构签到10 积分5 积分成就运动 6 徽章环保 6 徽章菜单6 项6 项数字3/NEW周图运动时长 7.5h分类次数 47 次About运动预约 v1.0.0垃圾分类 v1.0.0两页 95% 代码相同差异只在数据——这是模板复用的最强证明一个绿色个人中心模板换数据源即可生成任意主题的个人页。十一、数据一致性与口径本页数据与首页/记录页的呼应分类 328 首页本月分类 328 分类页总记录 328三页一致 ✓准确率 92% 首页准确率 92%两页一致 ✓减碳 15.6kg 首页本月减碳 15.6kg两页一致 ✓本周 47 次vs 首页平均 68%口径不一致 ✗详见第五节三个页面共享 328/92%/15.6kg但周数据口径不统一——demo 的大部分一致 小部分瑕疵是真实项目数据的常态。读者应学习跨页一致的好习惯也警惕口径不统一的坑。十二、环保积分体系的设计App 15 的积分体系签到 5 环保积分背后应该有完整的积分经济模型1. 积分获取渠道多源签到 5、每次分类 2、分享环保知识 1、邀请好友 50、完成测试 10——行为越多、积分越多激励用户持续使用。2. 积分消耗渠道闭环积分兑换菜单第 4 项积分兑换——环保袋、种子、绿植、优惠券——积分能花出去才有价值。没有消耗渠道的积分体系会通货膨胀用户失去获取动力。3. 积分与经验分离本页经验值1860/3000 升级 Lv.6和环保积分签到 5是两套体系——经验决定等级身份积分决定兑换资产。等级体系成长 积分体系经济双轨是游戏化设计的标准架构微信运动步数经验、支付宝蚂蚁森林能量积分都如此。4. 防刷机制签到每天一次checked 日期持久化、分类同物品重复不计数去重、分享每日上限 3 次——防刷是积分经济模型的安全底线。demo 只实现了签到 5一个积分动作但积分 多源获取 兑换消耗 防刷的完整模型值得在真实项目中设计——积分体系是留存的核心引擎。十三、个人中心的身份叙事进化对比系列 3 个我的页可以清晰看到**身份叙事的进化**App用户等级Slogan叙事主线13 音乐小明同学Lv.4活跃用户·已使用 28 天使用时长我用了多久14 运动张运动Lv.5运动达人·已坚持 28 天坚持天数我坚持多久15 环保李环保Lv.6环保达人·减碳 15.6kg环保成果我贡献了什么叙事从使用时长 → 坚持天数 → 环保成果——App 15 的减碳 15.6kg是最强的身份标签我做了什么贡献比我用了多久更有激励性贡献感 社会价值感。成果型身份减碳 kg/种树棵数/帮助人数是公益类/环保类 App 的黄金标准——支付宝蚂蚁森林把种树做成身份我已经种了 3 棵树激励效果远大于连续签到 30 天。设计启示个人中心的 Slogan 应该写用户的贡献成果而非用户的使用时长——前者是我给世界带来了什么后者是我在 App 上花了多少时间。十四、4 个 Tab 的完整闭环App 15 四个 Tab 构成完整闭环首页♻️ 知识入口 ↓ 看到分类指南 45%→ 想学 识别 查询分类 ↓ 查到旧报纸 → 可回收物→ 产生记录 分类️ 记录管理 ↓ 看到占比厨余 48%→ 调整习惯 我的 身份沉淀 ↓ 签到 5 → 经验涨 → 成就解锁 → 身份升级 ↓ 回到首页看到减碳 15.6kg→ 继续使用知识 → 行动 → 记录 → 身份四环相扣每个 Tab 都有明确的下一步引导首页引导学、识别引导查、分类引导改、我的引导签——Tab 间闭环是系列 demo 的最高级设计前几代 App 的 Tab 相对独立。十五、小结App 15「智能垃圾分类」我的页解析完毕。Lv.6 环保达人 四色编码 doSearch 真逻辑 环保游戏化 积分经济模型让 App 15 成为系列的环保主题标杆。