鸿蒙 ArkTS 实战App Usage Stats 从系统能力到状态管理完整解析前言App Usage Stats 是一个面向应用使用统计的鸿蒙 ArkTS 单页工具。项目通过记录列表、统计卡片、权限开关和状态切换把系统能力相关场景整理成可操作的移动端页面。它服务于 统计社交、学习等应用使用时长记录目标限制和周报状态。对自律用户、家长、效率管理用户来说重点是让权限、数量、备注和当前状态在一个页面里清楚呈现。业务痛点应用使用时长如果只有单日数字缺少分类目标和周报很难形成可执行调整。图示说明本文围绕 App Usage Stats 的模型、统计、权限提示和列表状态切换展开。一、业务定位与产品目标1.1 使用场景把分类、分钟数、目标备注和活跃状态集中展示便于复盘使用习惯。 当前实现是一个前端工作台雏形后续可以继续接入真实系统能力。1.2 页面能力概览当前页面包含四个关键区域顶部标题确认工具场景。统计卡片展示Minutes和Active。功能标签提示能力边界。表单和列表完成新增、展示和状态切换。页面区域实现元素业务作用标题区Text标识应用使用统计统计区totalAmount / selectedCount统计使用分钟和活跃状态标签区四个 Text 标签提示系统能力列表区ForEach展示记录并切换状态二、工程结构与入口文件2.1 目录结构项目采用标准 Stage 工程主页面位于entry/src/main/ets/pages/Index.ets。这种结构方便从页面直接理解交互逻辑。entry/ src/ main/ ets/ entryability/ EntryAbility.ets pages/ Index.ets module.json52.2 入口配置理解系统能力类工具后续往往会接入权限、后台服务或设备 API但页面加载仍然从 Ability 入口开始。{module:{name:entry,type:entry,abilities:[{name:EntryAbility,srcEntry:./ets/entryability/EntryAbility.ets,exported:true}]},topic:应用使用统计}三、数据模型记录条目的最小闭环3.1 字段设计CapabilityItem使用title、amount、note、active四个字段描述一条记录。它们分别对应对象、数量、备注和状态。interfaceCapabilityItem{title:string;amount:number;note:string;active:boolean;}Stateitems:CapabilityItem[][{title:Social apps,amount:86,note:Goal 60 min,active:false},{title:Study apps,amount:120,note:Weekly report ready,active:false}];3.2 默认数据分析默认数据体现了项目的业务方向也方便首次运行时验证统计区和列表区。默认标题数量备注ActiveSocial apps86Goal 60 minfalseStudy apps120Weekly report readyfalse这些默认数据覆盖使用时长、分类统计、目标限制和周报生成不是空泛占位。四、状态管理输入与权限提示4.1 页面状态字段页面使用State管理输入框、权限开关和状态文案。permissionOn是权限提示开关不直接操作系统权限但承担用户提示职责。StatetitleText:string;StateamountText:string;StatenoteText:string;StatepermissionOn:booleantrue;Statestatus:stringSystem demo ready;4.2 输入隔离输入框内容先保存在临时状态中点击新增并通过校验后才进入正式列表。关键点系统能力类页面需要把权限提示、操作记录和状态反馈摆在用户能看到的位置。五、统计逻辑总量与活跃数5.1 总量统计totalAmount()遍历 items把 amount 相加为Minutes。5.2 活跃统计selectedCount()统计 active 为 true 的记录并展示为活跃数与总数的比例。privatetotalAmount():number{lettotal0;this.items.forEach((item:CapabilityItem){totalitem.amount;});returntotal;}privateselectedCount():number{letcount0;this.items.forEach((item:CapabilityItem){if(item.active){count;}});returncount;}函数统计来源页面位置业务意义totalAmountamountMinutes掌握使用分钟规模selectedCountactiveActive掌握当前活跃记录toggleActiveindex列表勾选切换单条状态六、新增记录流程6.1 校验规则新增时会检查标题和数量。标题为空或数量非法时状态文案提示用户修正输入。6.2 顶部插入新记录插入到数组最前面因此最新任务总能优先显示。privateaddItem():void{constamountNumber(this.amountText);if(this.titleText.trim().length0||!Number.isFinite(amount)){this.statusEnter title and valid number;return;}this.items[{title:this.titleText,amount:Math.round(amount),note:this.noteText.length0?this.noteText:No note yet,active:false},...this.items];this.titleText;this.amountText;this.noteText;this.statusRecord added;}七、状态切换与刷新机制7.1 切换逻辑勾选列表项时会反转 active 字段并通过数组展开生成新引用保证 UI 刷新。privatetoggleActive(index:number):void{this.items[index].active!this.items[index].active;this.items[...this.items];}7.2 视觉反馈active 为 true 的记录使用浅绿色背景未激活记录保持白色。状态背景色用户感知未激活#FFFFFF仍需处理或观察已激活#DCFCE7当前重点或已启用输入异常状态文案需要修正输入八、统计卡片与能力标签8.1 顶部统计卡片顶部双卡片分别展示业务总量和活跃状态蓝色强调数量绿色强调状态。Row({space:10}){Column({space:4}){Text(Minutes).fontSize(13).fontColor(#475569)Text(String(this.totalAmount())).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#1D4ED8)}.layoutWeight(1).padding(14).backgroundColor(#DBEAFE).borderRadius(8)Column({space:4}){Text(Active).fontSize(13).fontColor(#475569)Text(this.selectedCount()/this.items.length).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#047857)}.layoutWeight(1).padding(14).backgroundColor(#D1FAE5).borderRadius(8)}8.2 功能标签解读四个标签分别是Usage time、Category stats、Goal limit、Weekly report。使用时长确认能力入口。分类统计表达核心操作。目标限制补充过程状态。周报生成保留后续处理依据。九、表单与列表渲染9.1 表单区域表单由标题、数量和备注三个输入框组成配合按钮完成记录创建。Column({space:10}){TextInput({placeholder:Title,text:this.titleText}).onChange((value:string)this.titleTextvalue)TextInput({placeholder:Number,text:this.amountText}).type(InputType.Number).onChange((value:string)this.amountTextvalue)TextInput({placeholder:Note,text:this.noteText}).onChange((value:string)this.noteTextvalue)Button(Add record).height(42).width(100%).onClick(()this.addItem())}9.2 列表区域列表用ForEach渲染每行包括 checkbox、标题、备注和数量。ForEach(this.items,(item:CapabilityItem,index:number){Row(){Toggle({type:ToggleType.Checkbox,isOn:item.active}).onChange(()this.toggleActive(index))Column({space:6}){Text(item.title).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#111827)Text(item.note).fontSize(14).fontColor(#475569)}.layoutWeight(1).margin({left:8})Text(String(item.amount)).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#1D4ED8)}.padding(14).backgroundColor(item.active?#DCFCE7:#FFFFFF).borderRadius(8).width(100%)})十、业务流程复盘10.1 标准路径App Usage Stats 的一次完整使用可以拆成四步录入应用分类。填写使用分钟。备注目标或周报。切换关注状态。10.2 异常路径当标题为空或数量非法时新增动作会被拦截避免无效记录进入正式列表。constamountNumber(this.amountText);constinvalidthis.titleText.trim().length0||!Number.isFinite(amount);if(invalid){this.statusEnter title and valid number;}十一、扩展设计11.1 持久化模型正式应用可以增加 id、更新时间和权限状态方便同步、搜索和审计。interfacePersistedCapabilityItem{id:string;title:string;amount:number;note:string;active:boolean;updatedAt:number;}11.2 系统能力扩展后续可以接入应用使用权限、分类规则、目标提醒和周报导出。扩展顺序建议为增加本地持久化保证记录不丢失。接入真实系统能力或权限 API。增加历史搜索、导出和异常处理。十二、调试与验证12.1 核心验证点验证时重点检查新增、统计、状态切换、背景变化和错误提示。12.2 运行检查可以在 DevEco Studio 中运行预览或真机按输入、切换、复盘路径逐项验证。# 常规验证动作# 1. 输入标题、数量和备注# 2. 点击 Add record# 3. 检查新记录是否位于顶部# 4. 勾选记录并观察 Active 统计验证项预期结果业务意义有效新增列表顶部出现新记录快速沉淀现场信息空标题显示错误状态避免无效记录勾选状态统计和背景同步变化明确当前状态空备注写入 No note yet保持列表可读十三、可复用的系统能力模式13.1 通用公式这类应用可以抽象为一个通用公式能力对象、数量口径、上下文备注、活跃状态。能力对象 数量口径 上下文备注 活跃状态 可复用的系统能力工作台13.2 复用边界复用时要同步调整默认数据、统计口径、功能标签和业务说明不能只替换标题。总结App Usage Stats 用简洁的 ArkTS 单页结构实现了应用使用统计的记录、统计、权限提示和活跃状态切换。它为后续接入真实系统能力提供了清晰页面基础。对 自律用户、家长、效率管理用户 来说这种工具能降低状态确认和信息复盘成本。补齐系统 API、持久化和异常处理后可以继续演进为更完整的实用工具。如果这篇文章对你有帮助可以点赞、收藏并关注后续会继续拆解更多鸿蒙 ArkTS 实战项目。相关资源HarmonyOS 应用开发ArkTS 语言基础ArkUI 声明式开发DevEco StudioStage 模型应用结构Ability Kit
鸿蒙 ArkTS 实战App Usage Stats 从系统能力到状态管理完整解析前言App Usage Stats 是一个面向应用使用统计的鸿蒙 ArkTS 单页工具。项目通过记录列表、统计卡片、权限开关和状态切换把系统能力相关场景整理成可操作的移动端页面。它服务于 统计社交、学习等应用使用时长记录目标限制和周报状态。对自律用户、家长、效率管理用户来说重点是让权限、数量、备注和当前状态在一个页面里清楚呈现。业务痛点应用使用时长如果只有单日数字缺少分类目标和周报很难形成可执行调整。图示说明本文围绕 App Usage Stats 的模型、统计、权限提示和列表状态切换展开。一、业务定位与产品目标1.1 使用场景把分类、分钟数、目标备注和活跃状态集中展示便于复盘使用习惯。 当前实现是一个前端工作台雏形后续可以继续接入真实系统能力。1.2 页面能力概览当前页面包含四个关键区域顶部标题确认工具场景。统计卡片展示Minutes和Active。功能标签提示能力边界。表单和列表完成新增、展示和状态切换。页面区域实现元素业务作用标题区Text标识应用使用统计统计区totalAmount / selectedCount统计使用分钟和活跃状态标签区四个 Text 标签提示系统能力列表区ForEach展示记录并切换状态二、工程结构与入口文件2.1 目录结构项目采用标准 Stage 工程主页面位于entry/src/main/ets/pages/Index.ets。这种结构方便从页面直接理解交互逻辑。entry/ src/ main/ ets/ entryability/ EntryAbility.ets pages/ Index.ets module.json52.2 入口配置理解系统能力类工具后续往往会接入权限、后台服务或设备 API但页面加载仍然从 Ability 入口开始。{module:{name:entry,type:entry,abilities:[{name:EntryAbility,srcEntry:./ets/entryability/EntryAbility.ets,exported:true}]},topic:应用使用统计}三、数据模型记录条目的最小闭环3.1 字段设计CapabilityItem使用title、amount、note、active四个字段描述一条记录。它们分别对应对象、数量、备注和状态。interfaceCapabilityItem{title:string;amount:number;note:string;active:boolean;}Stateitems:CapabilityItem[][{title:Social apps,amount:86,note:Goal 60 min,active:false},{title:Study apps,amount:120,note:Weekly report ready,active:false}];3.2 默认数据分析默认数据体现了项目的业务方向也方便首次运行时验证统计区和列表区。默认标题数量备注ActiveSocial apps86Goal 60 minfalseStudy apps120Weekly report readyfalse这些默认数据覆盖使用时长、分类统计、目标限制和周报生成不是空泛占位。四、状态管理输入与权限提示4.1 页面状态字段页面使用State管理输入框、权限开关和状态文案。permissionOn是权限提示开关不直接操作系统权限但承担用户提示职责。StatetitleText:string;StateamountText:string;StatenoteText:string;StatepermissionOn:booleantrue;Statestatus:stringSystem demo ready;4.2 输入隔离输入框内容先保存在临时状态中点击新增并通过校验后才进入正式列表。关键点系统能力类页面需要把权限提示、操作记录和状态反馈摆在用户能看到的位置。五、统计逻辑总量与活跃数5.1 总量统计totalAmount()遍历 items把 amount 相加为Minutes。5.2 活跃统计selectedCount()统计 active 为 true 的记录并展示为活跃数与总数的比例。privatetotalAmount():number{lettotal0;this.items.forEach((item:CapabilityItem){totalitem.amount;});returntotal;}privateselectedCount():number{letcount0;this.items.forEach((item:CapabilityItem){if(item.active){count;}});returncount;}函数统计来源页面位置业务意义totalAmountamountMinutes掌握使用分钟规模selectedCountactiveActive掌握当前活跃记录toggleActiveindex列表勾选切换单条状态六、新增记录流程6.1 校验规则新增时会检查标题和数量。标题为空或数量非法时状态文案提示用户修正输入。6.2 顶部插入新记录插入到数组最前面因此最新任务总能优先显示。privateaddItem():void{constamountNumber(this.amountText);if(this.titleText.trim().length0||!Number.isFinite(amount)){this.statusEnter title and valid number;return;}this.items[{title:this.titleText,amount:Math.round(amount),note:this.noteText.length0?this.noteText:No note yet,active:false},...this.items];this.titleText;this.amountText;this.noteText;this.statusRecord added;}七、状态切换与刷新机制7.1 切换逻辑勾选列表项时会反转 active 字段并通过数组展开生成新引用保证 UI 刷新。privatetoggleActive(index:number):void{this.items[index].active!this.items[index].active;this.items[...this.items];}7.2 视觉反馈active 为 true 的记录使用浅绿色背景未激活记录保持白色。状态背景色用户感知未激活#FFFFFF仍需处理或观察已激活#DCFCE7当前重点或已启用输入异常状态文案需要修正输入八、统计卡片与能力标签8.1 顶部统计卡片顶部双卡片分别展示业务总量和活跃状态蓝色强调数量绿色强调状态。Row({space:10}){Column({space:4}){Text(Minutes).fontSize(13).fontColor(#475569)Text(String(this.totalAmount())).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#1D4ED8)}.layoutWeight(1).padding(14).backgroundColor(#DBEAFE).borderRadius(8)Column({space:4}){Text(Active).fontSize(13).fontColor(#475569)Text(this.selectedCount()/this.items.length).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#047857)}.layoutWeight(1).padding(14).backgroundColor(#D1FAE5).borderRadius(8)}8.2 功能标签解读四个标签分别是Usage time、Category stats、Goal limit、Weekly report。使用时长确认能力入口。分类统计表达核心操作。目标限制补充过程状态。周报生成保留后续处理依据。九、表单与列表渲染9.1 表单区域表单由标题、数量和备注三个输入框组成配合按钮完成记录创建。Column({space:10}){TextInput({placeholder:Title,text:this.titleText}).onChange((value:string)this.titleTextvalue)TextInput({placeholder:Number,text:this.amountText}).type(InputType.Number).onChange((value:string)this.amountTextvalue)TextInput({placeholder:Note,text:this.noteText}).onChange((value:string)this.noteTextvalue)Button(Add record).height(42).width(100%).onClick(()this.addItem())}9.2 列表区域列表用ForEach渲染每行包括 checkbox、标题、备注和数量。ForEach(this.items,(item:CapabilityItem,index:number){Row(){Toggle({type:ToggleType.Checkbox,isOn:item.active}).onChange(()this.toggleActive(index))Column({space:6}){Text(item.title).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#111827)Text(item.note).fontSize(14).fontColor(#475569)}.layoutWeight(1).margin({left:8})Text(String(item.amount)).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#1D4ED8)}.padding(14).backgroundColor(item.active?#DCFCE7:#FFFFFF).borderRadius(8).width(100%)})十、业务流程复盘10.1 标准路径App Usage Stats 的一次完整使用可以拆成四步录入应用分类。填写使用分钟。备注目标或周报。切换关注状态。10.2 异常路径当标题为空或数量非法时新增动作会被拦截避免无效记录进入正式列表。constamountNumber(this.amountText);constinvalidthis.titleText.trim().length0||!Number.isFinite(amount);if(invalid){this.statusEnter title and valid number;}十一、扩展设计11.1 持久化模型正式应用可以增加 id、更新时间和权限状态方便同步、搜索和审计。interfacePersistedCapabilityItem{id:string;title:string;amount:number;note:string;active:boolean;updatedAt:number;}11.2 系统能力扩展后续可以接入应用使用权限、分类规则、目标提醒和周报导出。扩展顺序建议为增加本地持久化保证记录不丢失。接入真实系统能力或权限 API。增加历史搜索、导出和异常处理。十二、调试与验证12.1 核心验证点验证时重点检查新增、统计、状态切换、背景变化和错误提示。12.2 运行检查可以在 DevEco Studio 中运行预览或真机按输入、切换、复盘路径逐项验证。# 常规验证动作# 1. 输入标题、数量和备注# 2. 点击 Add record# 3. 检查新记录是否位于顶部# 4. 勾选记录并观察 Active 统计验证项预期结果业务意义有效新增列表顶部出现新记录快速沉淀现场信息空标题显示错误状态避免无效记录勾选状态统计和背景同步变化明确当前状态空备注写入 No note yet保持列表可读十三、可复用的系统能力模式13.1 通用公式这类应用可以抽象为一个通用公式能力对象、数量口径、上下文备注、活跃状态。能力对象 数量口径 上下文备注 活跃状态 可复用的系统能力工作台13.2 复用边界复用时要同步调整默认数据、统计口径、功能标签和业务说明不能只替换标题。总结App Usage Stats 用简洁的 ArkTS 单页结构实现了应用使用统计的记录、统计、权限提示和活跃状态切换。它为后续接入真实系统能力提供了清晰页面基础。对 自律用户、家长、效率管理用户 来说这种工具能降低状态确认和信息复盘成本。补齐系统 API、持久化和异常处理后可以继续演进为更完整的实用工具。如果这篇文章对你有帮助可以点赞、收藏并关注后续会继续拆解更多鸿蒙 ArkTS 实战项目。相关资源HarmonyOS 应用开发ArkTS 语言基础ArkUI 声明式开发DevEco StudioStage 模型应用结构Ability Kit
