鸿蒙 ArkTS 实战：Pet Boarding Booking 从宠物寄养预约到生活服务工具完整解析
鸿蒙 ArkTS 实战：Pet Boarding Booking 从宠物寄养预约到生活服务工具完整解析
前言
Pet Boarding Booking 是一个基于鸿蒙 ArkTS 与 ArkUI 声明式 UI 实现的生活服务类单页应用，核心场景是宠物寄养天数与喂养要求。
它把 维护寄养天数、宠物档案、入住接回日期、喂养要求和费用结算 这类高频生活服务需求，拆成状态字段、数组列表、预约选择、工单进度、费用计算和即时反馈。
本文基于项目真实的Index.ets结构展开，分析它如何使用@State管理页面数据，如何使用ForEach、Grid、Row、Column、Stack、Flex、Toggle、Button等组件构建移动端服务工具界面，以及如何让用户在洗衣、保洁、理发、维修、搬运、跑腿和寄养场景里快速确认服务状态。
图示说明：配图用于表达鸿蒙应用中状态、组件、条件渲染和事件反馈之间的关系，帮助理解本文的代码拆解。
阅读时可以结合 HarmonyOS 应用开发文档、ArkTS 语言基础、ArkUI 声明式开发范式、组件参考 等资料，快速定位 ArkTS、ArkUI 和组件开发相关知识。
生活服务工具的核心不是堆叠复杂流程，而是让预约、进度、费用和提醒都能在一屏里被用户看懂。
一、项目定位与服务场景
1.1 业务定位
宠物寄养预约 聚焦的场景是：维护寄养天数、宠物档案、入住接回日期、喂养要求和费用结算。
这类工具适合社区服务、上门服务、维修工单、同城跑腿、搬家协助和宠物寄养等轻量业务。
用户打开页面时，需要立刻看到当前服务状态，并能用最少步骤完成一次选择、确认或记录。
1.2 技术定位
项目采用鸿蒙 ArkTS 单页写法，页面内直接声明状态、数组和交互逻辑。
这种实现方式适合服务预约原型、教学案例和轻量业务工具。
1.3 使用闭环
页面的使用闭环可以概括为四步。
- 查看当前服务对象、阶段或费用。
- 选择服务项目、师傅、课程、设备或阶段。
- 点击按钮触发预约、提醒、完成或费用变化。
- 在当前页面看到状态、数量或费用更新。
二、工程结构与入口页面
2.1 页面文件
项目核心逻辑集中在Index.ets。
entry/ src/ main/ ets/ pages/ Index.ets这个入口页面同时承担状态声明、事件处理和 UI 渲染。
2.2 组件声明
@Entry@Componentstruct Index{build(){// 声明式页面结构}}这是鸿蒙 ArkUI 页面开发中非常基础的结构。
2.3 单页边界
当前版本没有引入复杂后端，也没有把流程拆成多个页面。
它先把单个服务场景做成清晰可用的一屏工具，再为后续扩展留下空间。
三、状态模型拆解
3.1 状态字段总览
| 状态字段 | 初始值 | 页面职责 |
|---|---|---|
days | 3 | 寄养天数 |
needs | 早晚喂食、禁忌食物、睡前散步 | 喂养要求 |
这些字段共同构成了 宠物寄养预约 的最小服务模型。
3.2 状态语义
days通常代表页面主状态，needs则承载列表、结果、开关或当前反馈。
字段命名贴近服务场景，是这类小工具可维护性的关键。
3.3 核心源码片段
@Statedays:number=3;privateneeds:string[]=['早晚各喂一次','不吃牛肉零食','睡前散步 15 分钟'];这段代码展示了项目最核心的数据结构。
这一批项目更强调数组渲染、服务选择、阶段切换、费用估算和按钮反馈。
四、交互逻辑分析
4.1 交互点总览
| 交互点 | 源码行为 | 服务价值 |
|---|---|---|
+1 晚 | days 自增 | 让预约、工单或服务状态即时可见 |
ForEach needs | 渲染喂养要求 | 让预约、工单或服务状态即时可见 |
费用结算 | 根据 days 乘以单价计算 | 让预约、工单或服务状态即时可见 |
每个交互点都对应一个真实生活服务动作。
4.2 列表选择
很多项目使用ForEach渲染数组。
ForEach(this.items,(item:string,index:number)=>{Row(){Text(item)}.onClick(()=>{this.selected=index;})})列表项点击能让用户在多个服务对象之间快速切换。
4.3 条件展示
页面会根据状态显示不同内容。
Text(this.done?'已完成':'进行中')条件展示能让用户快速理解当前工单状态。
五、布局结构分析
5.1 页面布局概览
顶部展示宠物档案和寄养天数，左侧展示寄养日期并调整天数，右侧展示喂养要求和费用结算。
布局会优先展示核心服务状态，然后再提供操作入口。
5.2 关键 UI 代码
Text('费用结算：'+String(this.days*88)).fontSize(24).fontWeight(FontWeight.Bold).fontColor('#D97706')这段代码体现了项目最有代表性的视觉结构。
5.3 Grid、Flex 与 Row 的组合
Grid适合多卡片概览，Flex适合换行标签，Row适合左右分栏或同一行指标。
Grid(){GridItem(){Text('服务一')}GridItem(){Text('服务二')}}生活服务页面常用这种组合展示师傅、课程、阶段、设备和状态。
六、视觉层级设计
6.1 背景与强调色
当前页面背景色是#FFFFFF，强调色是#D97706。
强调色用于突出服务进度、预约状态、费用、师傅选择或完成按钮。
6.2 信息分区
| 区域 | 视觉方式 | 作用 |
|---|---|---|
| 顶部看板 | 大字号或高对比背景 | 快速识别主状态 |
| 列表区 | ForEach 渲染 | 展示服务项目和流程 |
| 操作区 | Button、Toggle、Grid | 完成预约和确认 |
| 反馈区 | Text 文案 | 说明当前状态 |
6.3 费用信息突出
服务类页面通常需要让费用足够醒目。
Text('费用 '+String(this.fee)).fontSize(34).fontWeight(FontWeight.Bold)费用和阶段状态应该比说明文字更容易扫到。
七、数组渲染与状态选择
7.1 ForEach 的价值
数组渲染让服务对象可以稳定扩展。
privateitems:string[]=['项目一','项目二','项目三'];后续新增服务阶段、清单项、师傅、设备、课程或喂养要求时，只需要扩展数组。
7.2 当前索引
@Stateselected:number=0;索引用来表示当前选中项。
它适合订单阶段、服务项目、理发师、维修阶段和设备类型。
7.3 条件样式
.backgroundColor(index===this.selected?'#0B7285':'#FFFFFF')条件样式能让当前选中项一眼可见。
八、按钮、开关和服务确认
8.1 Button
按钮适合明确动作。
- 状态提醒。
- 确认预约。
- 发送提醒。
- 预约清洗。
- 完成确认。
- 追加费用。
- 报名一位。
按钮文案要短，动作要明确。
8.2 Toggle
Toggle适合表达二元状态。
Toggle({type:ToggleType.Checkbox,isOn:this.enabled}).onChange((on:boolean)=>this.enabled=on)用车需求、预约提醒和服务开关都适合它。
8.3 费用计算
服务类页面经常需要根据数量和选项计算费用。
consttotal=120+this.boxes*8+(this.van?80:0);费用计算要足够直观，避免用户不理解价格变化。
九、组件能力映射
9.1 常用组件表
| 组件 | 项目用途 | 特点 |
|---|---|---|
Text | 展示标题、费用、状态 | 轻量直接 |
Button | 触发服务动作 | 行为明确 |
Toggle | 切换提醒或选项 | 状态直观 |
Grid | 展示卡片和阶段 | 适合概览 |
ForEach | 渲染列表和流程 | 扩展方便 |
Stack | 叠加看板和预览 | 视觉集中 |
9.2 Stack 的使用
Stack(){Rect().width('100%').height(220)Text('服务看板')}Stack适合服务封面、课程签到数、维修摘要和设备展示。
9.3 Flex 的使用
Flex({wrap:FlexWrap.Wrap}){ForEach(this.devices,(name:string)=>{Text(name)})}Flex适合家电清洗这类可换行标签列表。
十、可扩展数据模型
10.1 服务记录对象
interfaceServiceRecord{id:string;title:string;status:string;amount:number;updatedAt:number;}这个对象可以承载一次服务动作。
10.2 历史列表
@Staterecords:ServiceRecord[]=[];从单条状态扩展为数组后，页面就能支持历史预约和工单记录。
10.3 追加记录
this.records=[...this.records,{id:Date.now().toString(),title:this.days,status:String(this.needs),amount:0,updatedAt:Date.now()}];不可变追加方式有利于 UI 刷新。
十一、本地存储与提醒能力
11.1 为什么需要保存
生活服务工具常常涉及预约时间、订单阶段、服务人员、费用和联系方式。
洗衣、保洁、理发、维修、清洗、搬运、跑腿、开锁、团课和寄养记录都应该长期保存。
11.2 保存结构
interfaceSavedServiceState{current:ServiceRecord;history:ServiceRecord[];version:number;}version可以支持后续字段升级。
11.3 同步配置示例
{"module":"life-service","reminder":true,"retry":3}对服务工具来说，预约提醒和状态同步都很关键。
十二、调试与验证
12.1 验证状态变化
Button('Debug').onClick(()=>{console.info('current: '+this.days);})先确认状态变化，再检查页面展示。
12.2 验证边界条件
| 场景 | 风险 | 处理方式 |
|---|---|---|
| 索引选择 | 越界 | 数组长度变化时重置索引 |
| 余位递减 | 低于 0 | 使用条件判断 |
| 阶段推进 | 超过终点 | 判断最大阶段 |
| 费用计算 | 不透明 | 把公式拆成可读字段 |
12.3 验证小屏布局
小屏设备上要重点观察列表项、按钮和卡片是否拥挤。
长文本字段适合放入滚动区域或分栏区域，避免遮挡操作按钮。
十三、工程化拆分
13.1 抽离服务卡片
@BuilderfunctionServiceCard(label:string,value:string,color:string){Column({space:6}){Text(label).fontSize(14).fontColor('#6B7280')Text(value).fontSize(18).fontWeight(FontWeight.Bold)}.padding(16).backgroundColor(color).borderRadius(8)}服务卡片可以复用到阶段、费用、预约时间、师傅和课程展示。
13.2 抽离列表项
@BuilderfunctionServiceRow(title:string,subtitle:string,active:boolean){Row(){Text(active?'✓':'•')Column(){Text(title)Text(subtitle)}}}列表项抽离后，多个服务页面可以共享一致交互。
13.3 抽离主题
constTheme={pageBg:'#FFFFFF',accent:'#D97706',radius:8,padding:20};主题配置能让多个服务页面保持统一。
十四、业务扩展方向
14.1 预约中心
保洁、理发、家电清洗、社区团课和宠物寄养可以组成预约中心。
14.2 工单中心
洗衣收送、手机维修、跑腿订单和开锁记录可以组成工单中心。
14.3 费用中心
搬家费用、跑腿费用、开锁费用和寄养费用可以组成费用中心。
interfaceServiceModule{name:string;enabled:boolean;orderCount:number;}十五、技术亮点
15.1 场景具体
宠物寄养预约 的字段和组件都围绕 宠物寄养天数与喂养要求 展开。
读者能从源码直接看到真实服务流程。
15.2 状态反馈及时
点击、切换、选择或确认都会修改一个可见状态。
这让移动端服务工具更可信。
15.3 扩展自然
当前项目可以继续扩展历史记录、本地持久化、提醒通知、费用明细和服务评价。
对生活服务工具来说，先让预约状态可见、工单流程可控、费用计算可读，再扩展复杂系统，是更稳的工程路线。
十六、总结
Pet Boarding Booking 展示了鸿蒙 ArkTS 在 宠物寄养天数与喂养要求 场景中的单页工具实现方式。
它用@State保存服务状态，用ForEach渲染列表，用Button、Toggle或条件展示承载交互，再通过卡片、文本和费用数字反馈结果。
从技术角度看，它覆盖了状态管理、数组渲染、条件渲染、按钮事件、开关控件、费用计算和移动端布局。
从产品角度看，宠物寄养预约 把 维护寄养天数、宠物档案、入住接回日期、喂养要求和费用结算 变成了一个可以直接使用的轻量生活服务工具。
相关链接：
- HarmonyOS 应用开发指南
- ArkTS 快速入门
- ArkUI 声明式开发