HarmonyOS ArkTS 实战：实现一个BMI计算与健康管理应用

引言

随着健康意识的增强，个人健康管理对日常生活至关重要。BMI（身体质量指数）是衡量体重是否健康的重要指标。本文详细介绍如何使用HarmonyOS ArkTS框架，从零开发一个功能完备的BMI计算与健康管理应用。通过本项目，你将掌握HarmonyOS应用开发的核心技能，包括声明式UI、状态管理、自定义组件、数据持久化等。

项目效果

本文使用 HarmonyOS 和 ArkTS 实现一个BMI计算与健康管理应用。功能完整，UI精美，青绿健康主题，交互流畅。

项目使用 DevEco Studio 开发，适配 API 24 及以上版本。

运行效果

功能介绍

• ✅ BMI计算
• ✅ 体脂率计算
• ✅ 基础代谢计算
• ✅ 体重记录
• ✅ 体重趋势图
• ✅ 健康范围指示
• ✅ 减肥/增肌建议
• ✅ 每日热量需求
• ✅ 健康报告
• ✅ 目标体重设置
• ✅ 围度记录
• ✅ 健康评分
• ✅ 数据导出
• ✅ 健康知识
• ✅ 目标进度

定义数据结构

合理的数据结构是应用开发的基础。下面定义了体重记录的核心数据模型，包含必要字段并确保类型安全。

interface WeightRecord {
  id: number;
  weight: number;
  height: number;
  date: string;
  bmi: number;
}

初始化页面状态

使用ArkTS状态管理装饰器@State和@StorageLink来管理页面级别的响应式数据，确保UI与数据实时同步。示例包含身高、体重、BMI数值及历史记录列表。

@State private height: number = 175;
@State private weight: number = 70;
@State private bmi: number = 22.86;
@State private records: WeightRecord[] = [
  { id: 1, weight: 72, height: 175, date: '2026-07-01', bmi: 23.51 },
  { id: 2, weight: 71, height: 175, date: '2026-07-10', bmi: 23.18 },
  { id: 3, weight: 70, height: 175, date: '2026-07-24', bmi: 22.86 },
];

核心功能方法

实现了添加记录、切换完成状态和删除记录等核心功能方法。所有操作均触发状态刷新，界面会立即响应数据变化。

// 核心方法示例
private addItem(): void {
  const newId = this.records.length > 0 ? Math.max(...this.records.map(r => r.id)) + 1 : 1;
  const newBmi = this.weight / ((this.height / 100) ** 2);
  this.records = [...this.records, {
    id: newId,
    weight: this.weight,
    height: this.height,
    date: new Date().toISOString().split('T')[0],
    bmi: Number(newBmi.toFixed(2))
  }];
  this.bmi = Number(newBmi.toFixed(2));
}

private toggleComplete(id: number): void {
  // 切换完成状态
  console.log('toggleComplete', id);
}

private deleteItem(id: number): void {
  this.records = this.records.filter(item => item.id !== id);
}

@Builder 可复用组件

使用@Builder装饰器创建可复用的卡片组件，提升代码复用性和可维护性。该组件接收数据项并渲染统一风格的记录卡片。

@Builder
ItemCard(item: any) {
  Row() {
    Column({ space: 4 }) {
      Text(`体重: ${item.weight} kg`)
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .fontColor('#1F2937')
      Text(item.date)
        .fontSize(12)
        .fontColor('#9CA3AF')
    }
    Blank()
    Text(`BMI: ${item.bmi}`)
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
      .fontColor('#0F766E')
  }
  .width('100%')
  .padding(14)
  .backgroundColor(Color.White)
  .borderRadius(12)
  .margin({ top: 8 })
  .onClick(() => {
    console.log('click item', item.id);
  })
}

完整build()页面布局

以下展示完整的build()页面布局代码，包含BMI圆盘显示区域、身高体重输入、计算按钮及动态健康建议等模块。所有元素均采用声明式UI构建，布局层次清晰。

build() {
  Column() {
    Row() {
      Text('健康管理').fontSize(24).fontWeight(FontWeight.Bold).fontColor('#1F2937')
    }.width('100%').padding(20)
    
    Scroll() {
      Column({ space: 20 }) {
        // BMI圆盘
        Stack({ alignContent: Alignment.Center }) {
          Circle().width(220).height(220).fill('#CCFBF1')
          Circle().width(180).height(180).fill('#99F6E4')
          Column({ space: 8 }) {
            Text('BMI').fontSize(14).fontColor('#0F766E')
            Text(this.bmi.toFixed(1)).fontSize(48).fontWeight(FontWeight.Bold).fontColor('#0F766E')
            Text(this.getBmiLevel()).fontSize(14).fontColor('#10B981')
          }
        }.width('100%')
        
        // 输入
        Column({ space: 16 }) {
          Row() {
            Text('身高 (cm)').fontSize(15).fontColor('#374151')
            Blank()
            TextInput({ text: `${this.height}` })
              .type(InputType.Number)
              .width(100)
              .height(40)
              .textAlign(TextAlign.Center)
              .backgroundColor('#F3F4F6')
              .borderRadius(8)
              .onChange((value: string) => {
                this.height = Number(value) || 0;
              })
          }.width('100%')
          
          Row() {
            Text('体重 (kg)').fontSize(15).fontColor('#374151')
            Blank()
            TextInput({ text: `${this.weight}` })
              .type(InputType.Number)
              .width(100)
              .height(40)
              .textAlign(TextAlign.Center)
              .backgroundColor('#F3F4F6')
              .borderRadius(8)
              .onChange((value: string) => {
                this.weight = Number(value) || 0;
              })
          }.width('100%')
        }.width('90%').padding(20).backgroundColor(Color.White).borderRadius(16)
        
        Button('计算BMI')
          .width('90%')
          .height(50)
          .backgroundColor('#0F766E')
          .borderRadius(25)
          .fontColor(Color.White)
          .onClick(() => {
            this.bmi = Number((this.weight / ((this.height / 100) ** 2)).toFixed(2));
            this.addItem();
          })
        
        // 体重记录列表
        Column({ space: 10 }) {
          Text('体重记录').fontSize(16).fontWeight(FontWeight.Medium).fontColor('#1F2937').width('90%')
          ForEach(this.records, (item: WeightRecord) => {
            this.ItemCard(item)
          }, (item: WeightRecord) => item.id.toString())
        }.width('100%')
        
        // 健康建议
        Column({ space: 10 }) {
          Text('健康建议').fontSize(16).fontWeight(FontWeight.Medium).fontColor('#1F2937').width('100%')
          Text(this.getHealthAdvice())
            .fontSize(14)
            .fontColor('#4B5563')
            .lineHeight(22)
        }.width('90%').padding(18).backgroundColor('#F0FDFA').borderRadius(12)
      }.width('100%').padding({ bottom: 40 })
    }.layoutWeight(1).scrollBar(BarState.Off)
  }.width('100%').height('100%').backgroundColor('#F0FDFA')
}

辅助方法实现

补充BMI等级判断和健康建议生成的辅助方法，使应用功能更加完善。

private getBmiLevel(): string {
  if (this.bmi < 18.5) return '偏瘦';
  if (this.bmi < 24) return '正常范围';
  if (this.bmi < 28) return '偏胖';
  return '肥胖';
}

private getHealthAdvice(): string {
  if (this.bmi < 18.5) {
    return '您的体重偏瘦，建议增加营养摄入，适量增重。多吃富含蛋白质的食物，搭配力量训练。';
  } else if (this.bmi < 24) {
    return '您的BMI处于正常范围，请继续保持健康饮食和适量运动。建议每周运动3-5次，每次30分钟以上。';
  } else if (this.bmi < 28) {
    return '您的体重偏胖，建议控制饮食，减少高热量食物摄入，增加有氧运动，每周至少运动5次。';
  } else {
    return '您的BMI属于肥胖范围，建议咨询营养师制定减重计划，配合定期体检监测健康状况。';
  }
}

页面设计说明

主题色采用#0F766E→#2DD4BF渐变色，卡片式设计，圆角阴影，视觉层次清晰，交互流畅。BMI圆盘区采用双层渐变背景，打造清爽的视觉体验。输入区域与卡片均使用白色背景搭配圆角，营造现代感极简风格。

SDK配置

API 24，compatibleSdkVersion: “6.1.1(24)”

运行项目

将代码复制到 entry/src/main/ets/pages/Index.ets 即可运行。

项目总结

本项目实现了BMI计算与健康管理的完整功能。掌握了BMI计算公式、健康指标计算、趋势图表、健康建议等核心知识点。未来可扩展运动记录、饮食记录、睡眠监测、血压血糖记录、健康目标、亲友健康、医生咨询、体检报告解读、用药提醒等更多功能，打造全面的个人健康管理平台。