鸿蒙 ArkTS 实战：Taxi Fare Estimator 从打车费用估算到出行费用应用完整解析

前言

打车费用估算 是一个典型的鸿蒙 ArkTS 轻量工具页面。它围绕“根据车型、里程和等待时间估算打车费用，支持快车、专车和豪华三种计价模型。”这个明确需求，把参数输入、公式计算、状态反馈和结果展示集中在同一屏。

本文基于 Taxi Fare Estimator 的真实源码展开，重点分析 @State 状态建模、Slider 数值输入、Toggle 开关状态、ForEach 列表渲染、方法封装公式 和 条件样式反馈。

工具型应用的关键不是页面复杂，而是输入变化后结果足够清楚、足够及时。

图示说明：页面由标题摘要、参数控制、结果展示和业务说明组成，适合学习 ArkTS 单页工具的状态流。

一、项目场景

1.1 业务目标

根据车型、里程和等待时间估算打车费用，支持快车、专车和豪华三种计价模型。

1.2 用户路径

1. 查看默认参数和初始结果。
2. 通过滑杆、按钮、开关或列表调整输入。
3. 页面立即重新计算并展示结果。
4. 用户根据结果完成估算、计划或记录。

1.3 技术目标

目标	页面体现	ArkTS 实现
参数输入	数字、开关、选项	Slider / Toggle / ForEach
状态保存	当前数值和选择	@State
公式计算	税额、重量、费用、平均值	方法封装
结果反馈	大数字和状态文案	Text / Stack / 条件样式

二、页面入口

2.1 组件骨架

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('打车费用估算')
    }
  }
}

2.2 单页结构价值

打车费用估算 的主要状态是 km、waitMin、model。这些字段都直接影响界面输出，集中在一个组件中更利于理解数据流。

2.3 页面分区

区域	作用	常见组件
顶部	标题和核心结果	Row、Text
中部	图形结果或列表	Stack、Circle、ForEach
底部	参数和说明	Slider、Button、Toggle

三、状态建模

3.1 State 字段

字段	类型	说明
km	number	里程，默认 12km
waitMin	number	等待时间，默认 5 分钟
model	number	车型索引，默认专车

3.2 状态声明

@Entry
@Component
struct Index {
  @State km: number = 12; // 里程，默认 12km
  @State waitMin: number = 5; // 等待时间，默认 5 分钟
  @State model: number = 1; // 车型索引，默认专车
}

3.3 状态边界

这些字段都贴近业务语言。数值字段用于计算，布尔字段用于开关，索引字段用于选择，数组字段用于可变列表。

状态字段越接近用户看到的业务概念，后续调试就越轻松。

四、业务数据

4.1 静态配置

车型选项：快车、专车、豪华

4.2 列表渲染

ForEach(this.items, (item: string, index: number) => {
  Text(item)
    .fontSize(16)
    .fontWeight(FontWeight.Bold)
    .onClick(() => {
      this.selected = index
    })
})

4.3 选中态表达

.backgroundColor(this.selected === index ? '#0F172A' : '#FFFFFF')
.fontColor(this.selected === index ? '#FFFFFF' : '#0F172A')

这种写法可以让当前选择、详情内容和视觉高亮保持同步。

五、输入控件

5.1 Slider 数值输入

Slider 适合调节金额、天数、宽度、体重、分钟、比例、株距和成绩等范围参数。

Slider({ value: this.value, min: 0, max: 100, step: 1 })
  .onChange((value: number) => {
    this.value = Math.round(value)
  })

5.2 Toggle 开关

Toggle 用于含税、提醒、专注模式等二值状态。

Toggle({ type: ToggleType.Switch, isOn: this.enabled })
  .onChange((on: boolean) => {
    this.enabled = on
  })

5.3 Button 操作

Button 用于新增、确认、重置或推进离散动作。

Button('执行')
  .backgroundColor('#0F172A')
  .onClick(() => {
    this.count += 1
  })

六、交互行为

6.1 动作列表

1. 点击车型标签切换 model
2. Slider 调整 km
3. Slider 调整 waitMin
4. fare 方法按车型计算基础价、里程价和等待费

6.2 关键源码

fare(): number {
  let base: number = this.model === 0 ? 10 : this.model === 1 ? 14 : 20
  let perKm: number = this.model === 0 ? 2.2 : this.model === 1 ? 2.8 : 4.2
  let wait: number = this.waitMin > 0 ? Math.ceil(this.waitMin / 5) * 1.5 : 0
  return Math.round(base + this.km * perKm + wait)
}

6.3 反馈闭环

• 点击车型标签切换 model
• Slider 调整 km
• Slider 调整 waitMin
• fare 方法按车型计算基础价、里程价和等待费

交互闭环很简单：用户改变输入，状态字段更新，公式重新计算，Text 和颜色同步刷新。

七、公式解析

7.1 核心公式

fare = base + km * perKm + ceil(waitMin / 5) * 1.5

7.2 方法封装

当公式包含判断、循环或取整时，用方法封装更清楚。

private calc(): number {
  return Math.round(1)
}

7.3 结果渲染

Text('结果：' + String(value))
  .fontSize(40)
  .fontWeight(FontWeight.Bold)
  .fontColor('#0F172A')

结果必须配合单位展示，避免用户误解数字含义。

八、视觉设计

8.1 大数字

税额、天数、码数、克数、金额、分钟、毫升、厘米、公里、分数等都适合用大字号强调。

8.2 图形容器

Stack、Circle、Rect 能让结果区域更集中。

Stack() {
  Circle().width(200).height(200).fill('#F8FAFC')
  Text('核心结果')
}

8.3 条件颜色

.fontColor(this.warning ? '#DC2626' : '#0F172A')

8.4 文案提示

Text(this.done ? '已完成' : '待处理')

九、布局策略

9.1 上下结构

上下结构适合先展示标题和结果，再展示参数控制。

9.2 左右结构

左右结构适合左侧大结果、右侧参数列表的工具页面。

9.3 信息层级

层级	内容	目的
一级	核心结果	直接判断
二级	输入参数	明确来源
三级	说明文案	解释规则

十、调试路径

10.1 手动验证

1. 检查默认状态是否与源码一致。
2. 调整每个 Slider 或 Toggle。
3. 确认公式结果即时刷新。
4. 测试最小值、最大值和开关状态。

10.2 日志辅助

Button('调试')
  .onClick(() => {
    console.info('state changed')
  })

10.3 问题定位

问题	原因	处理方式
结果不变	状态未写回	检查 onChange
数字异常	公式边界未处理	增加取整或限制
文案不对	条件分支错误	单独验证布尔值
列表错位	index 映射错误	对齐数组顺序

十一、工程扩展

11.1 历史记录

可以保存每一次估算、换算、计划或统计结果，方便后续对比。

interface HistoryItem {
  title: string
  input: string
  result: string
  createdAt: string
}

11.2 本地缓存

用户经常重复使用同一组参数，适合把最近一次状态缓存起来。

11.3 分享结果

{
  "tool": "打车费用估算",
  "state": "km、waitMin、model",
  "result": "calculated"
}

十二、体验优化

12.1 单位清晰

元、天、码、克、分钟、毫升、厘米、公里、分数等单位必须紧跟结果。

12.2 范围合理

Slider 的 min、max、step 要符合真实使用场景。

12.3 反馈直接

工具页面不应该等提交后再展示结果，输入变化后就应立即刷新。

十三、完整片段

13.1 状态骨架

@Entry
@Component
struct Index {
  @State km: number = 12; // 里程，默认 12km
  @State waitMin: number = 5; // 等待时间，默认 5 分钟
  @State model: number = 1; // 车型索引，默认专车
}

13.2 数据配置

// 车型选项：快车、专车、豪华
private primaryColor: string = '#0F172A'

13.3 交互代码

fare(): number {
  let base: number = this.model === 0 ? 10 : this.model === 1 ? 14 : 20
  let perKm: number = this.model === 0 ? 2.2 : this.model === 1 ? 2.8 : 4.2
  let wait: number = this.waitMin > 0 ? Math.ceil(this.waitMin / 5) * 1.5 : 0
  return Math.round(base + this.km * perKm + wait)
}

13.4 样式代码

Text('核心结果')
  .fontSize(28)
  .fontWeight(FontWeight.Bold)
  .fontColor('#0F172A')

十四、复用价值

14.1 状态复用

• number 用于金额、天数、重量、比例和分数。
• boolean 用于提醒、含税和专注等开关。
• number[] 可用于成绩、清单和多项统计。

14.2 公式复用

打车费用估算 的公式写法可以迁移到更多换算、预算、规划和统计页面。

14.3 组件复用

结果卡片、参数滑杆、选择标签和说明文案都可以抽成通用组件。

十五、发布级拆解

15.1 场景先行

文章开头先说清楚 打车费用估算 解决什么问题，再进入 ArkTS 代码，读者更容易理解公式意义。

15.2 状态为线索

围绕 km、waitMin、model 展开讲解，可以把页面输入、计算和结果串起来。

15.3 公式落地

公式 fare = base + km * perKm + ceil(waitMin / 5) * 1.5 是本项目的核心技术点，应同时解释输入来源、计算过程和输出展示。

十六、总结

Taxi Fare Estimator 用简洁的 ArkTS 页面完成了 出行费用 场景。它围绕 km、waitMin、model 建模，结合 车型选项：快车、专车、豪华 组织输入，并通过 fare = base + km * perKm + ceil(waitMin / 5) * 1.5 把业务规则转换成即时可见的结果。

这类鸿蒙小工具的关键在于：状态清楚、公式透明、反馈及时、边界稳定。理解这个项目后，再开发税额计算、倒计日、尺寸换算、喂食计算、费用估算或成绩统计等页面都会更顺手。

---

相关资源：

• HarmonyOS 开发者官网
• ArkTS 语言指南
• ArkUI 开发框架