1. 应用概述

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

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

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

2. 技术架构分析

2.1 整体架构设计

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

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

┌─────────────────────────────────────────────────────────┐
│                    Temperature页面                       │
│  ┌─────────────────────────────────────────────────┐    │
│  │              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_currentTemp: string = '';                 // 当前体温输入值

状态变量	类型	初始值	说明
app_records	Record[]	[]	体温记录数组，每条记录包含日期、体温值、状态
app_currentTemp	string	‘’	用户输入的体温数值

记录项的数据结构：

interface TemperatureRecord {
  date: string;      // 记录日期
  temp: string;      // 体温数值（°C）
  status: string;    // 体温状态评估结果
}

体温状态的取值范围：

状态	体温条件	医学含义
正常	36-37°C	体温在健康范围内
低烧	37-38°C	轻微发热
高烧	> 38°C	高热，需要关注
偏低	< 36°C	体温偏低

3. 核心代码详解

3.1 状态管理机制

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

@State app_records: Record<string, string>[] = [];
@State app_currentTemp: string = '';

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

状态变量的职责划分：

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

app_currentTemp：存储用户输入的体温数值。这是一个临时状态，每次输入变化时都会更新，同时用于计算体温状态。

3.2 当前体温展示区设计

体温记录应用的核心是当前体温的大字号展示：

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

    Text('°C')
      .fontSize(32)
      .fontColor($r('app.color.app_color_text_secondary'))
  }

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

当前体温展示区的设计要点：

Row布局：体温数值和单位°C水平排列，数值在左，单位在右

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

单位标注：温度单位°C使用32vp字号，与数值形成视觉协调

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

状态标签：在数值下方显示当前体温状态（正常/低烧/高烧/偏低）

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

3.3 数值输入处理

体温记录使用TextInput组件接收用户输入：

TextInput({ placeholder: '输入体温值' })
  .width('100%')
  .onChange((app_value: string) => {
    this.app_currentTemp = app_value;
  })

TextInput组件的关键配置：

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

onChange事件：每次输入变化时触发回调，更新体温值

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

3.4 记录添加逻辑实现

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

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

添加记录的业务流程：

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

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

3. 获取体温状态：调用app_getTemperatureStatus()方法根据输入数值计算体温状态

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

3.5 体温状态评估算法

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

private app_getTemperatureStatus(): string {
  let app_temp: number = parseFloat(this.app_currentTemp || '0');
  if (app_temp >= 36 && app_temp <= 37) {
    return '正常';
  } else if (app_temp > 37 && app_temp <= 38) {
    return '低烧';
  } else if (app_temp > 38) {
    return '高烧';
  } else {
    return '偏低';
  }
}

体温评估算法解析：

参数获取：从状态变量中获取体温数值，使用parseFloat转换为浮点数类型（因为体温可能包含小数）

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

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

体温分级标准（依据临床医学指南）：

状态	体温条件	医学含义	建议措施
偏低	< 36°C	体温过低	注意保暖
正常	36-37°C	体温正常	无需处理
低烧	37-38°C	轻微发热	多喝水，观察
高烧	> 38°C	高热	退烧处理，必要时就医

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['temp']}°C`)
            .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 }) {
  Row({ space: 8 }) {
    Text(this.app_currentTemp || '--')
      .fontSize(72)
      .fontWeight(FontWeight.Bold)
      .fontColor($r('app.color.app_color_primary'))

    Text('°C')
      .fontSize(32)
      .fontColor($r('app.color.app_color_text_secondary'))
  }

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

设计要点：

Row布局：体温数值和单位°C水平排列在同一行

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

温度单位：°C符号使用32vp字号，与72vp的数值形成视觉层次

明确标签：状态文字使用绿色（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['temp']}°C`)
      .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 体温基本概念

体温是指人体内部的温度，是评估健康状态的重要指标。人体正常体温范围约为36-37°C，但会受到多种因素的影响而产生波动。

正常体温范围：

测量部位	正常范围	说明
腋下	36-37°C	常用测量方式，数值偏低
口腔	36.3-37.2°C	接近核心体温
耳温	35.8-38°C	快速测量
肛温	36.3-37.7°C	最接近核心体温

5.2 影响体温的因素

体温受多种因素影响：

昼夜变化：清晨体温最低，下午和傍晚体温最高，波动可达0.5-1°C

月经周期：女性在排卵后体温会略微升高

年龄：儿童体温略高于成人，老年人体温偏低

运动：运动后体温会暂时升高

环境：高温环境下体温可能升高

5.3 发烧的分级

发烧是人体对感染的自然反应，根据体温高低分为不同等级：

体温范围	发烧程度	建议处理
37.3-38°C	低热	多喝水，注意休息
38.1-39°C	中等发热	同上，必要时用退烧药
39.1-41°C	高热	退烧药，必要时就医
> 41°C	超高热	紧急就医

5.4 体温测量注意事项

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

测量时间：建议在安静状态下测量，如早晨起床后

测量工具：使用经过校准的体温计

测量姿势：保持测量部位干燥、清洁

测量时长：按照体温计说明书要求的时间测量

6. 数据持久化

6.1 AppStorage存储机制

体温记录应用应该使用AppStorage实现数据的持久化存储：

// 保存体温记录
app_saveRecords(): void {
  app_setString('temp_records', JSON.stringify(this.app_records));
}

// 加载体温记录
app_loadRecords(): void {
  const app_recordsStr: string = app_getString('temp_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('temp_records', app_jsonStr);

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

7. 扩展与展望

7.1 当前功能总结

体温记录应用实现了以下核心功能：

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

7.2 功能扩展方向

基于当前的体温记录应用架构，可以进行以下功能扩展：

发烧提醒：当体温超过38.5°C时，发送通知提醒用户。

if (parseFloat(this.app_currentTemp) > 38.5) {
  notification.publish({
    id: 1003,
    content: {
      title: '体温提醒',
      text: '体温偏高，请注意观察并采取降温措施'
    }
  });
}

趋势图表：添加体温趋势图表，直观展示体温变化趋势。

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

平均值计算：计算一段时间内的平均体温值。

private app_getAverageTemp(): 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 += parseFloat(this.app_records[i]['temp'] || '0');
  }
  return Math.round((app_total / this.app_records.length) * 10) / 10;
}

症状记录：允许用户记录伴随症状（头痛、咳嗽等）。

@State app_symptoms: string[] = [];

TextInput({ placeholder: '输入症状' })
  .onChange((app_value: string) => {
    if (app_value.includes(',')) {
      this.app_symptoms = app_value.split(',');
    }
  })

药物记录：记录退烧药等药物服用情况。

interface TemperatureRecord {
  date: string;
  temp: string;
  status: string;
  medication?: string;
}

智能分析：根据连续记录分析体温变化趋势，提供健康建议。

private app_analyzeTrend(): string {
  if (this.app_records.length < 3) {
    return '数据不足';
  }
  let app_recentTemps: number[] = [];
  for (let i = this.app_records.length - 3; i < this.app_records.length; i++) {
    app_recentTemps.push(parseFloat(this.app_records[i]['temp']));
  }
  if (app_recentTemps[2] > app_recentTemps[0] + 1) {
    return '体温上升中';
  } else if (app_recentTemps[2] < app_recentTemps[0] - 1) {
    return '体温下降中';
  }
  return '体温稳定';
}

8. HarmonyOS通知开发

8.1 通知概述

HarmonyOS提供了@kit.NotificationKit用于发送通知。在体温异常时，可以发送提醒通知。

通知的基本结构：

import notification from '@ohos.notificationManager';

notification.publish({
  id: 1003,
  content: {
    title: '体温提醒',
    text: '体温偏高，请注意观察'
  }
});

8.2 权限配置

发送通知需要在module.json5中配置权限：

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

8.3 条件触发提醒

可以根据体温数值触发不同级别的提醒：

private app_checkAndNotify(): void {
  let app_temp: number = parseFloat(this.app_currentTemp || '0');
  
  if (app_temp > 39) {
    notification.publish({
      id: 1003,
      content: {
        title: '高烧警告',
        text: '体温过高，建议立即就医'
      }
    });
  } else if (app_temp > 38) {
    notification.publish({
      id: 1004,
      content: {
        title: '体温提醒',
        text: '体温偏高，请注意观察'
      }
    });
  }
}

9. 健康类应用设计要点

9.1 数据准确性

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

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

private app_validateInput(app_temp: string): boolean {
  let app_tempNum: number = parseFloat(app_temp);
  
  if (isNaN(app_tempNum)) {
    return false;  // 非数字
  }
  if (app_tempNum < 35 || app_tempNum > 42) {
    return false;  // 超出人类体温的合理范围
  }
  return true;
}

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

范围提示：在界面上显示正常范围（36-37°C），帮助用户理解数据含义

9.2 状态反馈设计

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

颜色编码：使用绿色表示正常，黄色表示轻微异常，红色表示严重异常

文字说明：状态标签应该使用通俗易懂的语言

单位标注：温度数值应该明确标注单位（°C）

9.3 发烧提醒设计

对于体温监测应用，发烧提醒是非常重要的功能：

分级提醒：根据体温不同级别发送不同紧急程度的提醒

重复提醒：如果体温持续偏高，可以间隔一定时间重复提醒

就医建议：当体温过高时，明确建议用户就医

10. 技术要点总结

10.1 ArkTS核心特性使用

通过体温记录应用，我们可以总结以下ArkTS核心特性的使用方法：

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

@State app_records: Record<string, string>[] = [];
@State app_currentTemp: string = '';

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

TextInput({ placeholder: '输入体温值' })
  .width('100%')
  .onChange((app_value: string) => {
    this.app_currentTemp = app_value;
  })

大字号Text：用于显示当前体温数值

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

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

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

10.2 状态评估逻辑封装

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

private app_getTemperatureStatus(): string {
  let app_temp: number = parseFloat(this.app_currentTemp || '0');
  if (app_temp >= 36 && app_temp <= 37) {
    return '正常';
  } else if (app_temp > 37 && app_temp <= 38) {
    return '低烧';
  } else if (app_temp > 38) {
    return '高烧';
  } else {
    return '偏低';
  }
}

10.3 空值处理技巧

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

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

// 当app_currentTemp为空时转换为0
let app_temp: number = parseFloat(this.app_currentTemp || '0');

10.4 健康类应用架构建议

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

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

interface TemperatureRecord {
  date: string;
  temp: string;
  status: string;
}

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

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

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

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

发烧提醒：当体温异常时发送通知提醒用户

if (parseFloat(this.app_currentTemp) > 38) {
  notification.publish({
    id: 1003,
    content: {
      title: '体温提醒',
      text: '体温偏高，请注意观察'
    }
  });
}

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