1. 应用概述

心率监测（HeartRate）是一款基于HarmonyOS ArkTS框架开发的健康数据记录工具，其核心功能是帮助用户记录心率数值、追踪心率变化趋势、评估心率健康状态。这款应用将传统的心率监测方式数字化，提供直观的数值输入、大字号实时显示和历史记录列表功能，为用户的心血管健康管理提供数据支持。

在技术实现层面，心率监测应用充分展示了HarmonyOS声明式UI开发范式的核心能力。通过@State装饰器实现响应式状态管理，TextInput组件实现心率数值输入，大字号Text组件实现实时数据显示，List组件实现历史记录列表渲染，状态判断算法实现心率分类评估，以及清晰的卡片式UI设计，构成了一个功能聚焦的心血管健康助手应用。应用的代码结构简洁清晰，使用HarmonyOS原生API完成所有功能实现，没有引入任何复杂的第三方依赖。

本技术博客将从应用架构设计、核心代码实现、心率评估算法、数据模型设计、状态管理机制、大字号显示设计以及健康类应用设计要点等多个维度，对这款心率监测应用进行全面的技术剖析。通过本文的深入讲解，读者不仅能够理解如何实现一个功能完善的心率监测应用，更能够掌握HarmonyOS ArkTS开发中的核心知识点，特别是TextInput输入处理、List列表渲染、状态判断逻辑、健康数据评估以及健康类应用的设计要点等关键技术点。

2. 技术架构分析

2.1 整体架构设计

心率监测应用采用了单页面架构（Single Page Application），整个应用仅包含一个主页面，通过组件化设计将UI展示与业务逻辑进行有效分离。从代码组织角度来看，应用主要分为以下几个核心部分：页面入口组件（HeartRate）、通用标题栏组件（CommonTitleBar）、当前心率展示区、数值输入区、添加按钮区以及历史记录列表区。

在ArkUI框架中，每一个页面都是一个独立的@Component装饰器组件。HeartRate组件作为整个应用的根组件，负责管理所有的状态变量和业务逻辑，包括当前心率输入值、心率状态评估结果、心率记录列表等。UI渲染通过build()方法中的声明式代码完成，所有UI更新都由状态变量变化自动触发。

┌─────────────────────────────────────────────────────────┐
│                     HeartRate页面                       │
│  ┌─────────────────────────────────────────────────┐    │
│  │              CommonTitleBar组件                  │    │
│  │              (导航栏+标题显示)                    │    │
│  └─────────────────────────────────────────────────┘    │
│  ┌─────────────────────────────────────────────────┐    │
│  │              当前心率展示区                      │    │
│  │              (数值+单位+状态)                    │    │
│  └─────────────────────────────────────────────────┘    │
│  ┌─────────────────────────────────────────────────┐    │
│  │              数值输入区                          │    │
│  │              (心率输入框)                        │    │
│  └─────────────────────────────────────────────────┘    │
│  ┌─────────────────────────────────────────────────┐    │
│  │              添加按钮区                          │    │
│  │              (添加记录按钮)                       │    │
│  └─────────────────────────────────────────────────┘    │
│  ┌─────────────────────────────────────────────────┐    │
│  │              历史记录列表区                      │    │
│  │              (日期+数值+状态)                    │    │
│  └─────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────┘

2.2 模块依赖关系

从依赖关系的角度分析，心率监测应用主要依赖以下几个核心模块：

首先是CommonTitleBar组件，该组件提供了统一的页面标题栏和返回按钮功能。作为项目中的通用组件，CommonTitleBar被多个页面复用，确保了应用内导航体验的一致性。

TextInput组件是ArkUI框架提供的文本输入控件，用于接收用户的心率数值输入。应用使用一个TextInput输入心率数值。

Text组件是ArkUI框架提供的文本展示控件，用于大字号显示当前心率数值和状态标签。

List组件是ArkUI框架提供的列表渲染控件，用于展示历史心率记录列表。通过ForEach循环渲染每个记录项。

Button组件是ArkUI框架提供的按钮控件，用于触发添加记录操作。

2.3 数据模型设计

心率监测应用的数据模型包含以下核心状态变量：

@State app_records: Record<string, string>[] = [];  // 心率记录列表
@State app_currentRate: string = '';                 // 当前心率输入值
@State app_status: string = '正常';                  // 心率状态

状态变量	类型	初始值	说明
app_records	Record[]	[]	心率记录数组，每条记录包含日期、心率值、状态
app_currentRate	string	‘’	用户输入的心率数值
app_status	string	‘正常’	根据心率数值评估的状态（正常/偏快/偏慢）

记录项的数据结构：

interface HeartRateRecord {
  date: string;      // 记录日期
  rate: string;     // 心率数值（bpm）
  status: string;    // 心率状态评估结果
}

心率状态的取值范围：

状态	心率条件	医学含义
正常	60-100 bpm	心率在健康范围内
偏快	> 100 bpm	心动过速
偏慢	< 60 bpm	心动过缓

3. 核心代码详解

3.1 状态管理机制

心率监测应用的状态管理遵循ArkTS框架的核心设计理念，使用@State装饰器声明响应式状态变量。

@State app_records: Record<string, string>[] = [];
@State app_currentRate: string = '';
@State app_status: string = '正常';

ArkTS作为静态类型语言，要求所有变量必须显式声明类型。这里的类型声明（Record[]、string）都是不可或缺的。

状态变量的职责划分：

app_records：存储心率记录列表，是应用的核心数据。用户添加的每条记录都会push到这个数组中，List组件会自动渲染这个数组的所有元素。

app_currentRate：存储用户输入的心率数值。这是一个临时状态，每次输入变化时都会更新，同时触发状态重新评估。

app_status：存储根据心率数值评估的状态。当app_currentRate变化时，app_updateStatus()方法会被调用，更新这个状态值。

3.2 当前心率展示区设计

心率监测应用的核心是当前心率的大字号展示：

Column({ space: 8 }) {
  Text(this.app_currentRate || '--')
    .fontSize(72)
    .fontWeight(FontWeight.Bold)
    .fontColor($r('app.color.app_color_primary'))

  Text('次/分钟')
    .fontSize(18)
    .fontColor($r('app.color.app_color_text_secondary'))

  Text(this.app_status)
    .fontSize(16)
    .fontColor($r('app.color.app_color_success'))
}
.width('100%')
.padding(32)
.backgroundColor($r('app.color.app_color_white'))
.borderRadius(16)

当前心率展示区的设计要点：

大字号显示：心率数值使用72vp的超大字号，配合Bold粗体，是整个页面最突出的元素

默认值处理：使用|| '--'表达式，当app_currentRate为空时显示"–"

单位标注：使用较小字号（18vp）标注"次/分钟"单位

状态标签：在数值下方显示当前心率状态（正常/偏快/偏慢）

卡片样式：白色背景、16vp圆角、32vp内边距

3.3 数值输入处理

心率监测使用TextInput组件接收用户输入：

TextInput({ placeholder: '输入心率值' })
  .width('100%')
  .onChange((app_value: string) => {
    this.app_currentRate = app_value;
    this.app_updateStatus();
  })

TextInput组件的关键配置：

placeholder属性：设置输入框的占位提示文字"输入心率值"

onChange事件：每次输入变化时触发回调，更新心率值并重新评估状态

width(‘100%’)：输入框宽度占满容器

3.4 记录添加逻辑实现

心率记录的添加逻辑是应用的核心业务功能：

Button('添加记录')
  .width('100%')
  .onClick(() => {
    let app_record: Record<string, string> = {
      'date': new Date().toLocaleDateString(),
      'rate': this.app_currentRate,
      'status': this.app_status
    };
    this.app_records.push(app_record);
  })

添加记录的业务流程：

1. 创建记录对象：构建一个包含日期、数值和状态的记录对象

2. 获取当前日期：使用new Date().toLocaleDateString()获取当前日期的本地化字符串表示

3. 使用当前状态：直接使用app_status作为记录的状态

4. 添加到列表：使用数组的push方法将记录添加到列表末尾

3.5 心率状态评估算法

心率状态评估是应用的核心算法，根据医学标准进行判断：

private app_updateStatus(): void {
  let app_rate: number = parseInt(this.app_currentRate || '0');
  if (app_rate >= 60 && app_rate <= 100) {
    this.app_status = '正常';
  } else if (app_rate > 100) {
    this.app_status = '偏快';
  } else {
    this.app_status = '偏慢';
  }
}

心率评估算法解析：

参数获取：从状态变量中获取心率数值，使用parseInt转换为数字类型

空值处理：使用|| '0'处理空字符串情况，确保parseInt不会返回NaN

判断逻辑：按照临床医学标准进行三级分类

心率分级标准（依据临床医学指南）：

状态	心率条件	医学含义
正常	60-100 bpm	窦性心律，心率在健康范围内
偏快（心动过速）	> 100 bpm	可能由运动、情绪、疾病等引起
偏慢（心动过缓）	< 60 bpm	可能是运动员心脏或病理性改变

3.6 历史记录列表设计

历史记录列表使用List组件渲染：

List() {
  ForEach(this.app_records, (app_record: Record<string, string>) => {
    ListItem() {
      Row() {
        Text(app_record['date'])
          .fontSize(14)
          .fontColor($r('app.color.app_color_text_secondary'))

        Blank()

        Column({ space: 4 }) {
          Text(`${app_record['rate']} bpm`)
            .fontSize(16)
            .fontWeight(FontWeight.Medium)
            .fontColor($r('app.color.app_color_text_primary'))
          Text(app_record['status'])
            .fontSize(12)
            .fontColor($r('app.color.app_color_success'))
        }
      }
      .width('100%')
      .padding(12)
      .backgroundColor($r('app.color.app_color_white'))
      .borderRadius(8)
    }
  })
}
.width('100%')
.layoutWeight(1)

List组件的关键点：

ForEach循环：遍历app_records数组，为每个元素渲染一个ListItem

记录卡片样式：白色背景、8vp圆角、12vp内边距

日期显示：左侧显示记录日期（灰色中号字）

数值和状态：右侧上下排列显示心率值和状态

layoutWeight(1)：使List组件占据剩余空间，实现自适应高度

4. UI布局设计

4.1 整体布局结构

心率监测的UI布局采用垂直堆叠的Column容器组织各个功能区块：

build() {
  Column() {
    CommonTitleBar({
      app_title: '心率监测',
      app_showBack: true
    })

    Column({ space: 24 }) {
      // 当前心率展示区
      Column({ space: 8 }) {...}

      // 输入框
      TextInput({ placeholder: '输入心率值' })
        .width('100%')
        .onChange(...)

      // 添加按钮
      Button('添加记录')
        .width('100%')
        .onClick(...)

      // 历史记录列表
      List() {...}
        .width('100%')
        .layoutWeight(1)
    }
    .width('100%')
    .padding(16)
  }
  .width('100%')
  .height('100%')
  .backgroundColor($r('app.color.app_color_background'))
}

布局设计采用"展示 -> 输入 -> 添加 -> 列表"的信息流顺序，符合用户的操作习惯。

4.2 当前心率展示区设计

当前心率展示区是整个页面的视觉焦点：

Column({ space: 8 }) {
  Text(this.app_currentRate || '--')
    .fontSize(72)
    .fontWeight(FontWeight.Bold)
    .fontColor($r('app.color.app_color_primary'))

  Text('次/分钟')
    .fontSize(18)
    .fontColor($r('app.color.app_color_text_secondary'))

  Text(this.app_status)
    .fontSize(16)
    .fontColor($r('app.color.app_color_success'))
}
.width('100%')
.padding(32)
.backgroundColor($r('app.color.app_color_white'))
.borderRadius(16)

设计要点：

视觉焦点：心率数值使用72vp超大字号和Bold粗体，配合主题色，是整个页面最突出的元素

明确标签：单位标注"次/分钟"消除了心率含义的歧义

状态指示：状态文字使用绿色（success），传递正向健康信息

卡片样式：白色背景和圆角边框与页面背景形成对比，界定功能区域

内边距：32vp的较大内边距使内容区域更舒展

4.3 历史记录卡片设计

历史记录卡片采用左右分栏布局：

Row() {
  // 左侧：日期
  Text(app_record['date'])
    .fontSize(14)
    .fontColor($r('app.color.app_color_text_secondary'))

  // 中间：空白填充
  Blank()

  // 右侧：数值和状态
  Column({ space: 4 }) {
    Text(`${app_record['rate']} bpm`)
      .fontSize(16)
      .fontWeight(FontWeight.Medium)
      .fontColor($r('app.color.app_color_text_primary'))
    Text(app_record['status'])
      .fontSize(12)
      .fontColor($r('app.color.app_color_success'))
  }
}

设计要点：

Row布局：日期在左，数值和状态在右

Blank组件：占据中间空间，将右侧内容推到最右边

Column布局：数值和状态上下排列，使用space: 4控制间距

字体层级：日期14vp、状态12vp、数值16vp，形成清晰的层次对比

5. 心率健康知识

5.1 心率基本概念

心率是指心脏每分钟跳动的次数（bpm = beats per minute），是评估心血管健康的重要指标。

正常心率范围：

人群	正常范围	说明
成年人（静息）	60-100 bpm	大多数健康成人的静息心率
运动员	40-60 bpm	运动员因心脏效率高，心率偏慢
儿童	70-120 bpm	儿童心率较快，随年龄增长逐渐下降
婴儿	100-160 bpm	婴儿心率最快

5.2 影响心率的因素

心率受多种因素影响：

运动：运动时心率加快，以满足肌肉的氧气需求

情绪：紧张、焦虑、兴奋等情绪变化会导致心率波动

咖啡因：咖啡、茶、能量饮料中的咖啡因会暂时提升心率

药物：某些药物（如甲状腺药物、减充血剂）会影响心率

疾病：发烧、贫血、甲状腺功能亢进等疾病会导致心率异常

5.3 心率测量注意事项

正确的心率测量对于获得准确数据至关重要：

测量时间：建议在安静状态下测量，如早晨起床后、休息5分钟后

测量位置：可以通过颈动脉、桡动脉或手腕检测脉搏

测量时长：建议计数30秒或60秒的脉搏数，乘以2或直接使用

避免干扰：测量前避免摄入咖啡因、避免剧烈运动

6. 数据持久化

6.1 AppStorage存储机制

心率监测应用应该使用AppStorage实现数据的持久化存储：

// 保存心率记录
app_saveRecords(): void {
  app_setString('hr_records', JSON.stringify(this.app_records));
}

// 加载心率记录
app_loadRecords(): void {
  const app_recordsStr: string = app_getString('hr_records', '[]');
  try {
    this.app_records = JSON.parse(app_recordsStr);
  } catch (error) {
    this.app_records = [];
  }
}

数据持久化的执行时机：

生命周期	执行操作
aboutToAppear	app_loadRecords()
aboutToDisappear	app_saveRecords()
添加记录后	app_saveRecords()

6.2 JSON序列化存储

心率记录数组可以直接序列化为JSON字符串进行存储：

// 保存
const app_jsonStr: string = JSON.stringify(this.app_records);
app_setString('hr_records', app_jsonStr);

// 加载
const app_jsonStr: string = app_getString('hr_records', '[]');
this.app_records = JSON.parse(app_jsonStr);

7. 扩展与展望

7.1 当前功能总结

心率监测应用实现了以下核心功能：

功能模块	实现描述
心率显示	大字号展示当前输入的心率值
状态评估	根据医学标准判断心率状态（正常/偏快/偏慢）
记录添加	将心率数据和状态添加到记录列表
记录展示	用List组件展示历史心率记录
实时更新	输入变化时自动更新显示和状态

7.2 功能扩展方向

基于当前的心率监测应用架构，可以进行以下功能扩展：

心率传感器集成：利用HarmonyOS的心率传感器API，自动采集用户真实心率数据。

// 使用心率传感器
import sensor from '@ohos.sensor';

sensor.on(sensor.SensorType.HEART_RATE, (data) => {
  this.app_currentRate = data.heartRate.toString();
  this.app_updateStatus();
});

趋势图表：添加心率趋势图表，直观展示心率变化趋势。

Chart()
  .type(ChartType.Line)
  .dataSet(this.app_weeklyHeartRates)

平均值计算：计算一段时间内的平均心率值。

private app_getAverageRate(): number {
  if (this.app_records.length === 0) {
    return 0;
  }
  let app_total: number = 0;
  for (let i = 0; i < this.app_records.length; i++) {
    app_total += parseInt(this.app_records[i]['rate'] || '0');
  }
  return Math.round(app_total / this.app_records.length);
}

静息心率跟踪：专门记录静息心率，用于评估心血管健康改善情况。

运动心率区间：添加运动心率区间计算，指导科学锻炼。

// 最大心率 = 220 - 年龄
// 目标心率区间 = 最大心率 * 运动强度百分比
private app_getTargetZone(app_age: number, app_intensity: number): { min: number; max: number } {
  let app_maxHR: number = 220 - app_age;
  return {
    min: Math.round(app_maxHR * app_intensity * 0.6),
    max: Math.round(app_maxHR * app_intensity * 0.8)
  };
}

异常提醒：当心率持续异常时，提示用户就医检查。

if (this.app_status === '偏快' && this.app_records.length >= 3) {
  // 检查最近3条记录是否都偏快
  let app_recentFast: boolean = true;
  for (let i = 0; i < 3; i++) {
    if (this.app_records[this.app_records.length - 1 - i]['status'] !== '偏快') {
      app_recentFast = false;
      break;
    }
  }
  if (app_recentFast) {
    prompt.showToast({
      message: '心率持续偏快，建议咨询医生'
    });
  }
}

8. HarmonyOS传感器开发

8.1 心率传感器概述

HarmonyOS提供了心率传感器API，可以获取用户当前的心率数值。

心率传感器数据：

属性	类型	说明
heartRate	number	心率值（bpm）

8.2 传感器使用流程

心率传感器的使用流程：

// 1. 导入传感器模块
import sensor from '@ohos.sensor';

// 2. 订阅传感器数据
sensor.on(sensor.SensorType.HEART_RATE, (data) => {
  // data.heartRate 是当前心率值
  this.app_currentRate = data.heartRate.toString();
  this.app_updateStatus();
});

// 3. 停止订阅（页面销毁时）
sensor.off(sensor.SensorType.HEART_RATE);

8.3 权限配置

使用心率传感器需要在module.json5中配置权限：

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.HEALTH_BODY_HEART_RATE",
        "reason": "$string:health_body_heart_rate_reason",
        "usedScene": {
          "abilities": ["EntryAbility"],
          "when": "always"
        }
      }
    ]
  }
}

9. 健康类应用设计要点

9.1 数据准确性

健康类应用的数据准确性直接影响用户的健康决策：

输入验证：对用户输入的数值进行合理性校验

private app_validateInput(app_rate: string): boolean {
  let app_rateNum: number = parseInt(app_rate);
  
  if (isNaN(app_rateNum)) {
    return false;  // 非数字
  }
  if (app_rateNum < 30 || app_rateNum > 220) {
    return false;  // 超出人类心率的合理范围
  }
  return true;
}

明确数据来源：记录应该基于用户手动输入或校准后的设备读数

范围提示：在界面上显示正常范围（60-100 bpm），帮助用户理解数据含义

9.2 状态反馈设计

健康类应用的状态反馈需要清晰易懂：

颜色编码：使用绿色表示正常，黄色/橙色表示警告，红色表示危险

文字说明：状态标签应该使用通俗易懂的语言（如"正常"而非仅仅显示数值）

单位标注：所有数值都应该有明确的单位标注（bpm）

9.3 隐私保护

心率数据属于敏感个人信息：

本地存储优先：数据存储在设备本地，不上传到服务器

用户控制权：用户可以查看、导出和删除自己的数据

最小化收集：只收集功能必需的数据

10. 技术要点总结

10.1 ArkTS核心特性使用

通过心率监测应用，我们可以总结以下ArkTS核心特性的使用方法：

@State装饰器：用于声明组件级别的响应式状态

@State app_records: Record<string, string>[] = [];
@State app_currentRate: string = '';
@State app_status: string = '正常';

TextInput组件：用于接收用户文本输入

TextInput({ placeholder: '输入心率值' })
  .width('100%')
  .onChange((app_value: string) => {
    this.app_currentRate = app_value;
    this.app_updateStatus();
  })

大字号Text：用于显示当前心率数值

Text(this.app_currentRate || '--')
  .fontSize(72)
  .fontWeight(FontWeight.Bold)

List + ForEach：用于渲染列表数据

List() {
  ForEach(this.app_records, (app_record: Record<string, string>) => {
    ListItem() {...}
  })
}

10.2 状态评估逻辑封装

将状态评估逻辑封装为私有方法，便于维护：

private app_updateStatus(): void {
  let app_rate: number = parseInt(this.app_currentRate || '0');
  if (app_rate >= 60 && app_rate <= 100) {
    this.app_status = '正常';
  } else if (app_rate > 100) {
    this.app_status = '偏快';
  } else {
    this.app_status = '偏慢';
  }
}

10.3 空值处理技巧

使用||运算符提供默认值，避免空值导致的显示问题：

// 当app_currentRate为空时显示"--"
Text(this.app_currentRate || '--')

// 当app_currentRate为空时转换为0
let app_rate: number = parseInt(this.app_currentRate || '0');

10.4 健康类应用架构建议

健康类应用的技术架构建议：

数据模型设计：使用接口定义清晰的数据结构

interface HeartRateRecord {
  date: string;
  rate: string;
  status: string;
}

输入验证：在添加记录前验证输入数据的合理性

private app_validateInput(rate: string): boolean {
  // 验证逻辑
}

持久化存储：使用AppStorage存储历史数据

app_setString('hr_records', JSON.stringify(this.app_records));

实时反馈：输入变化时立即更新状态显示

.onChange((app_value: string) => {
  this.app_currentRate = app_value;
  this.app_updateStatus();
})

希望本文对心率监测应用的技术剖析能够帮助开发者深入理解HarmonyOS ArkTS的开发范式和核心API使用技巧，特别是大字号显示设计、TextInput输入处理、List列表渲染、条件判断逻辑、健康数据评估以及健康类应用的设计要点等关键技术点。