一、引言
小费计算器（Tip Calculator）是一个典型的"工具类"应用。在欧美国家，小费是餐饮服务中约定俗成的习惯，通常为消费金额的 10% 到 20%。多人聚餐时还需要将总金额（消费 + 小费）分摊到每个人头上。

从技术角度看，小费计算器涉及以下核心知识点：滑动条的使用、实时数值计算、动态按钮列表。

二、功能需求
功能 说明
消费金额输入 输入本次消费的总金额
小费比例选择 通过滑块或预设按钮选择小费比例
人数设置 增加/减少分摊人数
实时计算结果 显示小费金额、总金额、人均金额
三、Slider 组件详解
3.1 基本用法
Slider({
value: this.tipPercent, // 当前值
min: 0, // 最小值
max: 50, // 最大值
step: 1 // 步长
})
.width(‘90%’)
.blockColor(‘#2ECC71’) // 滑块颜色
.trackColor(‘#BDC3C7’) // 轨道颜色
.selectedColor(‘#2ECC71’) // 已选区域颜色
.onChange((v: number) => {
this.tipPercent = Math.round(v);
this.calculate();
})
3.2 预设按钮
为了方便快速选择常见的小费比例，我们提供了三个预设按钮：

Row({ space: 8 }) {
ForEach([10, 15, 20], (pct: number) => {
Button(pct + ‘%’)
.backgroundColor(this.tipPercent === pct ? ‘#2ECC71’ : ‘#BDC3C7’)
.onClick(() => {
this.tipPercent = pct;
this.calculate();
})
})
}
选中状态使用高亮颜色（#2ECC71），未选中状态使用灰色（#BDC3C7），提供了清晰的视觉反馈。

3.3 Slider 与按钮的同步
当用户通过滑块选择比例时，onChange 更新 tipPercent；当用户点击预设按钮时，也更新 tipPercent。两种交互方式的最终效果是一致的——都调用 calculate() 重新计算。

四、人数增减按钮
Row({ space: 12 }) {
Button(‘−’)
.onClick(() => {
if (this.people > 1) this.people–;
this.calculate();
})

Text(String(this.people))
.fontSize(28)

Button(‘+’)
.onClick(() => {
if (this.people < 20) this.people++;
this.calculate();
})
}
人数限制在 1 到 20 之间，防止用户设置不合理的人数。

五、计算逻辑
calculate() {
let bill = parseFloat(this.billAmount) || 0;
let tip = bill * this.tipPercent / 100;
let total = bill + tip;
let perPerson = total / this.people;
this.resultTip = tip.toFixed(2);
this.resultTotal = total.toFixed(2);
this.resultPerPerson = perPerson.toFixed(2);
}
使用 toFixed(2) 将数值保留两位小数，符合货币显示的惯例。parseFloat 前的 || 0 是为了防止输入为空时产生 NaN。

六、@Builder 构建可复用 UI 组件
在 TipCalculator 中，我们使用 @Builder 构建了结果行的复用组件：

@Builder resultRow(label: string, value: string) {
Row() {
Text(label).fontSize(15).fontColor(‘#666’)
Blank()
Text(value).fontSize(20).fontWeight(FontWeight.Bold).fontColor(‘#2ECC71’)
}
.width(‘100%’)
}
这种做法的好处：

避免在 build() 方法中重复三段几乎相同的代码
修改样式只需在 resultRow 中改一处
逻辑与 UI 分离，代码可读性更好
七、总结
小费计算器虽然只是一个微型工具，但它完整展示了 ArkTS 中 Slider 组件与数值输入、按钮交互的协同模式。这种"输入 → 计算 → 输出"的三段式数据处理流程，是绝大多数工具类应用的通用架构。

同时，它还展示了 @Builder 在构建可复用 UI 组件时的强大能力——在多人分摊、预设比例等场景中，合理的抽象可以显著减少代码量，提高可维护性。