一、引言
BMI（Body Mass Index，身体质量指数）是世界卫生组织推荐的衡量人体胖瘦程度的通用标准。它通过身高和体重两个简单指标计算得出，广泛应用于健康评估领域。
BMI 计算器是一个极简的应用------只需要两个输入和一个公式。但其所代表的"输入-计算-判定"三段式逻辑，是数据驱动型应用的经典模式。
二、BMI 的计算与解读
2.1 计算公式
BMI = 体重(kg) / 身高(m)²
2.2 判定标准
BMI 范围 等级 颜色标识
< 18.5 偏瘦 蓝色 #3498DB
18.5 - 24.9 正常 绿色 #2ECC71
25 - 29.9 超重 橙色 #F39C12
≥ 30 肥胖 红色 #E74C3C
2.3 代码实现
calcBMI() {
let h = parseFloat(this.heightStr) / 100; // cm → m
let w = parseFloat(this.weight);
if (h > 0 && w > 0) {
let bmiVal = w / (h * h);
this.bmi = bmiVal.toFixed(1);
if (bmiVal < 18.5) {
this.category = '偏瘦';
this.categoryColor = '#3498DB';
} else if (bmiVal < 25) {
this.category = '正常范围';
this.categoryColor = '#2ECC71';
} else if (bmiVal < 30) {
this.category = '超重';
this.categoryColor = '#F39C12';
} else {
this.category = '肥胖';
this.categoryColor = '#E74C3C';
}
}
}
注意 heightStr 的命名：在 ArkTS 中，height 是 CustomComponent 基类已有的属性，不能用作 @State 变量名。这是我们开发中遇到的一个典型命名冲突案例，解决方案是为变量名增加 Str 后缀以区分。
三、区间指示器
使用 @Builder 构建每个区间的指示条：
@Builder barItem(label: string, range: string, color: string, active: boolean) {
Row({ space: 8 }) {
Text(label)
.fontColor(active ? color : '#999')
.fontWeight(active ? FontWeight.Bold : FontWeight.Regular)
Text(range)
.fontColor(active ? color : '#CCC')
Blank()
if (active) {
Text('✓').fontColor(color)
}
}
}
当前所属区间的条目会使用对应的颜色加粗显示，并打上 ✓ 标记。
四、UI 设计分析
4.1 环形结果展示
BMI 结果的展示区域使用圆形设计：
Column() {
Text(this.bmi).fontSize(64).fontColor(this.categoryColor)
Text(this.category).fontSize(18).fontColor(this.categoryColor)
}
.width(200).height(200)
.borderRadius(100) // 圆形
.backgroundColor(Color.White)
.shadow({ radius: 8, color: '#20000000', offsetY: 4 })
200×200 的圆形容器配合阴影，形成视觉上的焦点区域。BMI 数值和等级颜色的实时变化，让用户一目了然地了解自己的健康状态。
4.2 颜色即反馈
健康等级的颜色编码是 BMI 计算器设计中最关键的用户体验要素：
颜色 色值 情感暗示
蓝色 #3498DB 冷静、偏瘦需要关注
绿色 #2ECC71 健康、安全、正常
橙色 #F39C12 警示、需要注意
红色 #E74C3C 危险、需要行动
这种"颜色即反馈"的设计模式，让用户无需阅读文字就能理解结果的含义，极大地提高了信息传达的效率。
五、常见问题
5.1 单位混淆
BMI 公式要求身高以"米"为单位，但用户习惯输入"厘米"。因此输入框中标注了"cm"，代码中需要转换：
let h = parseFloat(this.heightStr) / 100;
5.2 输入验证
if (h > 0 && w > 0) {
// 计算 BMI
}
防止除零错误和负数输入。
六、总结
BMI 计算器虽然简单，但它展示了数据驱动应用的标准模式：将用户输入通过公式转化为结果，再将结果与预设阈值比较得到分类判定。这种"数据 → 计算 → 判定"的模式在指数计算、评分系统、风险评估等应用中广泛使用。