自建站shopify邢台市旅游景点排名前十

自建站shopify,邢台市旅游景点排名前十,注册公司应该去哪个部门,app网站开发招聘个人首页#xff1a; VON 鸿蒙系列专栏#xff1a; 鸿蒙开发小型案例总结 综合案例 #xff1a;鸿蒙综合案例开发 鸿蒙6.0#xff1a;从0开始的开源鸿蒙6.0.0 鸿蒙5.0#xff1a;鸿蒙5.0零基础入门到项目实战 Electron适配开源鸿蒙专栏#xff1a;Electron for Open…个人首页 VON鸿蒙系列专栏 鸿蒙开发小型案例总结综合案例 鸿蒙综合案例开发鸿蒙6.0从0开始的开源鸿蒙6.0.0鸿蒙5.0鸿蒙5.0零基础入门到项目实战Electron适配开源鸿蒙专栏Electron for OpenHarmonyFlutter 适配开源鸿蒙专栏Flutter for OpenHarmony本文所属专栏鸿蒙综合案例开发本文atomgit地址小V健身小V健身助手开发手记三用成就点燃坚持——构建可视化激励系统 成就系统的业务目标 架构设计数据模型与组件拆分️ 视觉呈现从数据到情感1. 顶部进度环 —— AchievementTop2. 成就徽章网格 —— AchievementContent 数据驱动如何计算“连续达成天数” 设计细节与用户体验️ 工程亮点总结✅ 结语代码总结achieveviewmodel用成就点燃坚持——构建可视化激励系统在健康类应用中用户流失率高是一个普遍难题。研究表明持续的行为激励是提升用户长期活跃度的关键。为此我们在「小V健身助手」中引入了「成就系统」通过可视化徽章、进度反馈与目标达成提示将枯燥的运动记录转化为一场充满成就感的游戏化旅程。本篇将详解如何基于 ArkTS 与 HarmonyOS 的声明式 UI 能力构建一个轻量、可扩展且富有情感温度的成就页面并探讨其背后的设计逻辑与工程实践。 成就系统的业务目标我们的成就模块并非简单堆砌图标而是围绕三个核心目标设计正向反馈让用户清晰看到“我做到了什么”行为引导通过阶梯式目标如连续3天、7天、30天鼓励长期坚持情感连接用温暖的视觉语言传递“你很棒”的肯定。为此我们将成就分为两类短期成就如“今日完成3项任务”长期成就如“连续7天达成目标”。当前版本先聚焦连续达成天数这一最直观的长期指标。 架构设计数据模型与组件拆分整个成就页面由两个核心组件构成组件职责AchievementTop展示当日卡路里消耗进度与目标差距AchievementContent渲染成就徽章列表同时引入两个 ViewModel 类实现数据与视图解耦// AchievementInfo.tsexportdefaultclassAchievementInfo{days:number;// 达成所需天数icOn:ResourceStr;// 已解锁图标icOff:ResourceStr;// 未解锁图标}// AchievementMapInfo.tsexportdefaultclassAchievementMapInfo{off_3$r(app.media.ic_achieve1_off);on_3$r(app.media.ic_achieve1_on);// 后续可扩展off_7, on_7, off_30, on_30...}设计哲学图标资源通过映射类集中管理便于未来动态加载或 A/B 测试。️ 视觉呈现从数据到情感1. 顶部进度环 ——AchievementTopProgress({value:this.value,// 当前消耗如1500千卡total:this.task,// 目标值如3000千卡type:ProgressType.Ring}).color(#ff2727).backgroundColor(#362423).width(50%).height(95%).style({strokeWidth:25})使用环形进度条直观展示完成比例颜色对比强烈红 vs 深棕突出“未完成”的紧迫感文字辅助说明“距离目标还差1500千卡”强化目标意识。✅交互细节日期区域可点击调出DateDialog切换查看历史成就——与首页保持一致体验。2. 成就徽章网格 ——AchievementContentFlex({direction:FlexDirection.Row,wrap:FlexWrap.Wrap}){ForEach(this.success,(item:AchievementInfo){Column(){Image(this.successDaysitem.days?item.icOn:item.icOff).width(100%).height(88).objectFit(ImageFit.Contain)Text(已经${item.days}天达成目标).fontSize(12).fontColor(Color.White)}.width(33%)})}采用Flex wrap实现自适应网格布局3列图标根据successDays当前连续达成天数动态切换亮/灰状态文案统一为“已经X天达成目标”降低认知负担。⚠️注意当前代码中所有AchievementInfo均使用相同的days3和图标仅为演示。实际应配置不同天数3/7/15/30…。 数据驱动如何计算“连续达成天数”目前successDays是硬编码的State successDays: number 9但在真实场景中它应由以下逻辑生成// 伪代码计算连续达成天数functioncalculateStreak(tasks:Task[]):number{letstreak0;consttodaynewDate();for(leti0;i30;i){// 最多回溯30天constdatenewDate(today);date.setDate(today.getDate()-i);if(isDayCompleted(date,tasks)){streak;}else{break;// 中断即终止}}returnstreak;}该函数需结合本地存储的每日任务完成记录进行判断。未来我们将在data_preferences或关系型数据库中持久化每日完成状态在每日首次打开 App 时触发calculateStreak将结果写入AppStorage供成就页实时读取。 设计细节与用户体验元素设计考量深色背景营造“荣誉殿堂”氛围突出徽章白色文字高对比度确保可读性图标尺寸统一避免视觉混乱强调平等价值文案简洁不解释规则只陈述事实降低认知负荷此外我们预留了扩展空间AchievementMapInfo可轻松添加新成就图标AchievementInfo支持任意天数配置未来可加入“点亮动画”、“成就通知”等增强反馈。️ 工程亮点总结声明式 UI 状态驱动所有视觉变化均由State和条件渲染自动更新无需手动操作 DOM。资源引用标准化通过$r(app.media.xxx)统一管理媒体资源支持多分辨率适配。组件复用与职责分离AchievementTop可独立用于其他页面如个人中心AchievementContent专注成就展示。可测试性AchievementInfo与AchievementMapInfo为纯数据类便于单元测试。✅ 结语成就系统不是锦上添花的装饰而是用户坚持下去的“精神燃料”。在「小V健身助手」中我们试图用一行行 ArkTS 代码传递一句无声的鼓励“你今天的努力值得被记住。”而这正是技术与人文交汇之处。代码已通过 HarmonyOS SDK API Version 10 验证适用于 Stage 模型项目。代码总结本次主要集中在成就页面的编写achieveAchievementContentimportAchievementInfofrom../../viewmodel/AchievementInfoimportAchievementMapInfofrom../../viewmodel/AchievementMapInfoimportAchievementTopfrom./AchievementTop;Componentexportdefaultstruct AchievementContent{achievementMapInfo:AchievementMapInfonewAchievementMapInfo()State successDays:number9State success:ArrayAchievementInfo[newAchievementInfo(3,this.achievementMapInfo.on_3,this.achievementMapInfo.off_3),newAchievementInfo(3,this.achievementMapInfo.on_3,this.achievementMapInfo.off_3),newAchievementInfo(3,this.achievementMapInfo.on_3,this.achievementMapInfo.off_3),newAchievementInfo(3,this.achievementMapInfo.on_3,this.achievementMapInfo.off_3),newAchievementInfo(3,this.achievementMapInfo.on_3,this.achievementMapInfo.off_3),newAchievementInfo(3,this.achievementMapInfo.on_3,this.achievementMapInfo.off_3),newAchievementInfo(3,this.achievementMapInfo.on_3,this.achievementMapInfo.off_3),newAchievementInfo(3,this.achievementMapInfo.on_3,this.achievementMapInfo.off_3),newAchievementInfo(3,this.achievementMapInfo.on_3,this.achievementMapInfo.off_3),newAchievementInfo(3,this.achievementMapInfo.on_3,this.achievementMapInfo.off_3),newAchievementInfo(3,this.achievementMapInfo.on_3,this.achievementMapInfo.off_3),newAchievementInfo(3,this.achievementMapInfo.on_3,this.achievementMapInfo.off_3),newAchievementInfo(3,this.achievementMapInfo.on_3,this.achievementMapInfo.off_3),];build(){Column(){Row(){AchievementTop()}.height(40%)Column(){Row(){Text(成就).fontSize(20).fontWeight(500).fontColor(Color.White)}.width(95%).margin({top:25})Column({space:10}){Flex({direction:FlexDirection.Row,wrap:FlexWrap.Wrap}){ForEach(this.success,(item:AchievementInfo){Column(){Image(this.successDaysitem.days?item.icOn:item.icOff).width(100%).height(88).objectFit(ImageFit.Contain)Text(已经${item.days}天达成目标).lineHeight(16).fontSize(12).fontColor(Color.White)}.width(33%).padding({top:38,bottom:10})})}}}.width(100%).height(100%)}.width(100%).height(100%)}}AchievementTopimportDateDialogfrom../../dialog/DateDialogimportDateUtilfrom../../util/DateUtilExtend(Text)functiontextStyle(color:ResourceStr,fw:number|FontWeight){.fontSize(20).fontWeight(fw).fontColor(color)}Componentexportdefaultstruct AchievementTop{StorageProp(date)date:numberDateUtil.beginTimeOfDay(newDate())controller:CustomDialogControllernewCustomDialogController({builder:DateDialog({date:newDate(this.date)})})State value:number1500State task:number3000build(){Column(){// 前两行Column({space:5}){// 头部日期部分Text(DateUtil.formatDate(this.date)).fontSize(25).fontColor(#b50f0f0f).onClick((){this.controller.open()})Text(健身记录).textStyle(#fff,800)}.width(95%).margin({top:30,bottom:10}).alignItems(HorizontalAlign.Start)Row(){// 左侧文本Column({space:5}){Text(运动消耗).textStyle(#c2c2bf,500)Text(this.value/this.task千卡).textStyle(#85ccb7,800).margin({bottom:20,right:10})Text(距离目标).textStyle(#ccc,500)Text(this.task-this.value千卡).textStyle(#a03336,800).margin({right:10})}.alignItems(HorizontalAlign.Start).margin({left:5})// 右侧进度展示Progress({value:this.value,total:this.task,type:ProgressType.Ring}).color(#ff2727).backgroundColor(#362423).width(50%).height(95%).style({strokeWidth:25})}.backgroundColor(#2c2c2a).width(95%).height(190).borderRadius(15)}.width(100%).height(100%)}}viewmodelAchievementInfoexportdefaultclassAchievementInfo{days:number;icOn:ResourceStr;icOff:ResourceStr;constructor(days:number,icOn:ResourceStr,icOff:ResourceStr){this.daysdays;this.icOnicOn;this.icOfficOff;}}AchievementMapInfoexportdefaultclassAchievementMapInfo{off_3:ResourceStr$r(app.media.ic_achieve1_on);on_3:ResourceStr$r(app.media.ic_achieve1_on);}