鸿蒙 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 使用闭环

页面的使用闭环可以概括为四步。

1. 查看当前服务对象、阶段或费用。
2. 选择服务项目、师傅、课程、设备或阶段。
3. 点击按钮触发预约、提醒、完成或费用变化。
4. 在当前页面看到状态、数量或费用更新。

二、工程结构与入口页面

2.1 页面文件

项目核心逻辑集中在 Index.ets。

entry/
  src/
    main/
      ets/
        pages/
          Index.ets

这个入口页面同时承担状态声明、事件处理和 UI 渲染。

2.2 组件声明

@Entry
@Component
struct Index {
  build() {
    // 声明式页面结构
  }
}

这是鸿蒙 ArkUI 页面开发中非常基础的结构。

2.3 单页边界

当前版本没有引入复杂后端，也没有把流程拆成多个页面。

它先把单个服务场景做成清晰可用的一屏工具，再为后续扩展留下空间。

三、状态模型拆解

3.1 状态字段总览

状态字段	初始值	页面职责
days	3	寄养天数
needs	早晚喂食、禁忌食物、睡前散步	喂养要求

这些字段共同构成了 宠物寄养预约 的最小服务模型。

3.2 状态语义

days 通常代表页面主状态，needs 则承载列表、结果、开关或当前反馈。

字段命名贴近服务场景，是这类小工具可维护性的关键。

3.3 核心源码片段

@State days: number = 3;
private needs: 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 的价值

数组渲染让服务对象可以稳定扩展。

private items: string[] = ['项目一', '项目二', '项目三'];

后续新增服务阶段、清单项、师傅、设备、课程或喂养要求时，只需要扩展数组。

7.2 当前索引

@State selected: 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 费用计算

服务类页面经常需要根据数量和选项计算费用。

const total = 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 服务记录对象

interface ServiceRecord {
  id: string;
  title: string;
  status: string;
  amount: number;
  updatedAt: number;
}

这个对象可以承载一次服务动作。

10.2 历史列表

@State records: 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 保存结构

interface SavedServiceState {
  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 抽离服务卡片

@Builder
function ServiceCard(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 抽离列表项

@Builder
function ServiceRow(title: string, subtitle: string, active: boolean) {
  Row() {
    Text(active ? '✓' : '•')
    Column() {
      Text(title)
      Text(subtitle)
    }
  }
}

列表项抽离后，多个服务页面可以共享一致交互。

13.3 抽离主题

const Theme = {
  pageBg: '#FFFFFF',
  accent: '#D97706',
  radius: 8,
  padding: 20
};

主题配置能让多个服务页面保持统一。

十四、业务扩展方向

14.1 预约中心

保洁、理发、家电清洗、社区团课和宠物寄养可以组成预约中心。

14.2 工单中心

洗衣收送、手机维修、跑腿订单和开锁记录可以组成工单中心。

14.3 费用中心

搬家费用、跑腿费用、开锁费用和寄养费用可以组成费用中心。

interface ServiceModule {
  name: string;
  enabled: boolean;
  orderCount: number;
}

十五、技术亮点

15.1 场景具体

宠物寄养预约 的字段和组件都围绕 宠物寄养天数与喂养要求 展开。

读者能从源码直接看到真实服务流程。

15.2 状态反馈及时

点击、切换、选择或确认都会修改一个可见状态。

这让移动端服务工具更可信。

15.3 扩展自然

当前项目可以继续扩展历史记录、本地持久化、提醒通知、费用明细和服务评价。

对生活服务工具来说，先让预约状态可见、工单流程可控、费用计算可读，再扩展复杂系统，是更稳的工程路线。

十六、总结

Pet Boarding Booking 展示了鸿蒙 ArkTS 在 宠物寄养天数与喂养要求 场景中的单页工具实现方式。

它用 @State 保存服务状态，用 ForEach 渲染列表，用 Button、Toggle 或条件展示承载交互，再通过卡片、文本和费用数字反馈结果。

从技术角度看，它覆盖了状态管理、数组渲染、条件渲染、按钮事件、开关控件、费用计算和移动端布局。

从产品角度看，宠物寄养预约 把 维护寄养天数、宠物档案、入住接回日期、喂养要求和费用结算 变成了一个可以直接使用的轻量生活服务工具。

---

相关链接：

• HarmonyOS 应用开发指南
• ArkTS 快速入门
• ArkUI 声明式开发