鸿蒙 ArkTS 实战：Location Checkin Tool 从系统能力到状态管理完整解析

鸿蒙 ArkTS 实战：Location Checkin Tool 从系统能力到状态管理完整解析

前言

Location Checkin Tool 是一个面向位置打卡工具的鸿蒙 ArkTS 单页工具。项目通过记录列表、统计卡片、权限开关和状态切换，把系统能力相关场景整理成可操作的移动端页面。

它服务于 围绕办公点和客户现场记录地理围栏打卡、异常和统计导出。对外勤人员、团队主管、行政考勤人员来说，重点是让权限、数量、备注和当前状态在一个页面里清楚呈现。

业务痛点：外勤打卡需要位置范围、异常说明和统计结果同时可见，否则考勤复核成本很高。

图示说明：本文围绕 Location Checkin Tool 的模型、统计、权限提示和列表状态切换展开。

一、业务定位与产品目标

1.1 使用场景

把地点、打卡次数、异常备注和活跃状态放在一屏，适合移动端快速核验打卡情况。 当前实现是一个前端工作台雏形，后续可以继续接入真实系统能力。

1.2 页面能力概览

当前页面包含四个关键区域：

1. 顶部标题，确认工具场景。

2. 统计卡片，展示Checkins和Active。

3. 功能标签，提示能力边界。

4. 表单和列表，完成新增、展示和状态切换。

二、工程结构与入口文件

2.1 目录结构

项目采用标准 Stage 工程，主页面位于entry/src/main/ets/pages/Index.ets。这种结构方便从页面直接理解交互逻辑。

entry/ src/ main/ ets/ entryability/ EntryAbility.ets pages/ Index.ets module.json5

2.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:'Office gate',amount:12,note:'Fence normal',active:false},{title:'Client site',amount:3,note:'Exception: outside range',active:false}];

3.2 默认数据分析

默认数据体现了项目的业务方向，也方便首次运行时验证统计区和列表区。

这些默认数据覆盖地理围栏、打卡日志、异常提示和统计导出，不是空泛占位。

四、状态管理：输入与权限提示

4.1 页面状态字段

页面使用@State管理输入框、权限开关和状态文案。permissionOn是权限提示开关，不直接操作系统权限，但承担用户提示职责。

@StatetitleText:string='';@StateamountText:string='';@StatenoteText:string='';@StatepermissionOn:boolean=true;@Statestatus:string='System demo ready';

4.2 输入隔离

输入框内容先保存在临时状态中，点击新增并通过校验后才进入正式列表。

关键点：系统能力类页面需要把权限提示、操作记录和状态反馈摆在用户能看到的位置。

五、统计逻辑：总量与活跃数

5.1 总量统计

totalAmount()遍历 items，把 amount 相加为Checkins。

5.2 活跃统计

selectedCount()统计 active 为 true 的记录，并展示为活跃数与总数的比例。

privatetotalAmount():number{lettotal=0;this.items.forEach((item:CapabilityItem)=>{total+=item.amount;});returntotal;}privateselectedCount():number{letcount=0;this.items.forEach((item:CapabilityItem)=>{if(item.active){count++;}});returncount;}

六、新增记录流程

6.1 校验规则

新增时会检查标题和数量。标题为空或数量非法时，状态文案提示用户修正输入。

6.2 顶部插入

新记录插入到数组最前面，因此最新任务总能优先显示。

privateaddItem():void{constamount=Number(this.amountText);if(this.titleText.trim().length===0||!Number.isFinite(amount)){this.status='Enter title and valid number';return;}this.items=[{title:this.titleText,amount:Math.round(amount),note:this.noteText.length>0?this.noteText:'No note yet',active:false},...this.items];this.titleText='';this.amountText='';this.noteText='';this.status='Record 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 的记录使用浅绿色背景，未激活记录保持白色。

八、统计卡片与能力标签

8.1 顶部统计卡片

顶部双卡片分别展示业务总量和活跃状态，蓝色强调数量，绿色强调状态。

Row({space:10}){Column({space:4}){Text('Checkins').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 功能标签解读

四个标签分别是Geo fence、Checkin log、Exception tip、Stats export。

• 地理围栏：确认能力入口。

• 打卡日志：表达核心操作。

• 异常提示：补充过程状态。

• 统计导出：保留后续处理依据。

九、表单与列表渲染

9.1 表单区域

表单由标题、数量和备注三个输入框组成，配合按钮完成记录创建。

Column({space:10}){TextInput({placeholder:'Title',text:this.titleText}).onChange((value:string)=>this.titleText=value)TextInput({placeholder:'Number',text:this.amountText}).type(InputType.Number).onChange((value:string)=>this.amountText=value)TextInput({placeholder:'Note',text:this.noteText}).onChange((value:string)=>this.noteText=value)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 标准路径

Location Checkin Tool 的一次完整使用可以拆成四步：

1. 录入打卡地点。
2. 填写打卡次数。
3. 备注范围或异常。
4. 切换当前有效状态。

10.2 异常路径

当标题为空或数量非法时，新增动作会被拦截，避免无效记录进入正式列表。

constamount=Number(this.amountText);constinvalid=this.titleText.trim().length===0||!Number.isFinite(amount);if(invalid){this.status='Enter title and valid number';}

十一、扩展设计

11.1 持久化模型

正式应用可以增加 id、更新时间和权限状态，方便同步、搜索和审计。

interfacePersistedCapabilityItem{id:string;title:string;amount:number;note:string;active:boolean;updatedAt:number;}

11.2 系统能力扩展

后续可以接入定位权限、围栏判断、异常申诉和统计报表。

扩展顺序建议为：

1. 增加本地持久化，保证记录不丢失。

2. 接入真实系统能力或权限 API。

3. 增加历史搜索、导出和异常处理。

十二、调试与验证

12.1 核心验证点

验证时重点检查新增、统计、状态切换、背景变化和错误提示。

12.2 运行检查

可以在 DevEco Studio 中运行预览或真机，按输入、切换、复盘路径逐项验证。

# 常规验证动作# 1. 输入标题、数量和备注# 2. 点击 Add record# 3. 检查新记录是否位于顶部# 4. 勾选记录并观察 Active 统计

十三、可复用的系统能力模式

13.1 通用公式

这类应用可以抽象为一个通用公式：能力对象、数量口径、上下文备注、活跃状态。

能力对象 + 数量口径 + 上下文备注 + 活跃状态 = 可复用的系统能力工作台

13.2 复用边界

复用时要同步调整默认数据、统计口径、功能标签和业务说明，不能只替换标题。

总结

Location Checkin Tool 用简洁的 ArkTS 单页结构实现了位置打卡工具的记录、统计、权限提示和活跃状态切换。它为后续接入真实系统能力提供了清晰页面基础。

对 外勤人员、团队主管、行政考勤人员 来说，这种工具能降低状态确认和信息复盘成本。补齐系统 API、持久化和异常处理后，可以继续演进为更完整的实用工具。

如果这篇文章对你有帮助，可以点赞、收藏并关注，后续会继续拆解更多鸿蒙 ArkTS 实战项目。

相关资源：

• HarmonyOS 应用开发
• ArkTS 语言基础
• ArkUI 声明式开发
• DevEco Studio
• Stage 模型应用结构
• Ability Kit