一、应用概述

情绪追踪（Mood Tracker） 是一款日记式的情绪记录应用。用户每天可以从五种情绪（开心、不错、一般、低落、难过）中选择一种，并添加文字备注，然后保存到历史记录中。应用支持当天情绪覆盖更新，并以列表形式展示历史情绪记录。

在快节奏的现代生活中，情绪记录帮助人们觉察自己的情绪变化趋势，是心理健康自我管理的有力工具。从技术角度来看，本应用是 ForEach 列表渲染、interface 接口定义、条件渲染和不可变数据更新的综合实战案例，展示了如何在 ArkTS 中构建一个中等复杂度的数据管理系统。

二、技术架构与组件树

2.1 整体架构

@Entry @Component struct index35
├── Column (根容器)
│   ├── Row (顶部导航栏)
│   └── Column (主内容区, 居中)
│       ├── Text ("今天 M/d")
│       ├── if (todayEntry) → 今日情绪展示卡片
│       │   ├── Text (emoji, 64px)
│       │   ├── Text (情绪名)
│       │   └── Text (备注文字, 条件)
│       ├── if (!todayEntry) → 提示文字
│       ├── Row (emoji 选择器, ForEach)
│       │   └── ForEach → Column × 5
│       │       ├── Text (emoji)
│       │       └── Text (情绪名)
│       ├── TextInput (备注输入)
│       ├── Button ("💾 保存")
│       └── if (historyEntries.length > 0)
│           ├── Text ("历史记录")
│           └── List (历史列表)
│               └── ForEach → ListItem → Row
│                   ├── Text (日期)
│                   ├── Text (emoji)
│                   ├── Text (情绪名)
│                   └── Text (备注, 条件)

2.2 数据接口定义

interface MoodItem {
  emoji: string;
  name: string;
  color: string;
}

interface MoodEntry {
  date: string;
  emoji: string;
  name: string;
  note: string;
}

const MOODS: MoodItem[] = [
  { emoji: '😄', name: '开心', color: '#4CAF50' },
  { emoji: '🙂', name: '不错', color: '#8BC34A' },
  { emoji: '😐', name: '一般', color: '#FF9800' },
  { emoji: '😔', name: '低落', color: '#FF6B6B' },
  { emoji: '😢', name: '难过', color: '#F44336' },
];

interface 是 ArkTS 定义数据结构的核心方式。MoodItem 定义了情绪选项的结构（emoji、名称、颜色），MoodEntry 定义了每日情绪记录的结构（日期、emoji、名称、备注）。使用接口类型可以确保数据的结构一致性，并在编译时捕获类型错误。

MOODS 是一个 const 数组常量，定义了五种预设情绪。五种情绪按积极→中性→消极排列，颜色从绿色渐变到红色，语义明确。

三、核心代码深度解析

3.1 今日情绪检测

get today(): string {
  const now = new Date();
  return (now.getMonth() + 1) + '/' + now.getDate();
}

get todayEntry(): MoodEntry | undefined {
  for (let i = 0; i < this.entries.length; i++) {
    if (this.entries[i].date === this.today) {
      return this.entries[i];
    }
  }
  return undefined;
}

today 计算属性返回格式化的今日日期（如 7/24）。注意：JavaScript 的 getMonth() 返回 0-11 的月份值，需要 +1 转为 1-12。

todayEntry 遍历所有记录，查找日期等于今日的条目。如果找到则返回该条目，否则返回 undefined。这里使用 MoodEntry | undefined 联合类型——这是 ArkTS 中处理"可能不存在"的标准方式。

3.2 历史记录过滤

get historyEntries(): MoodEntry[] {
  const result: MoodEntry[] = [];
  for (let i = 0; i < this.entries.length; i++) {
    if (this.entries[i].date !== this.today) {
      result.push(this.entries[i]);
    }
  }
  return result;
}

historyEntries 过滤出所有非今日的记录。与 todayEntry 互补，两者合起来覆盖了全部记录。这种"今日/历史"的二分法让 UI 可以分别展示今日情绪（大卡片）和历史记录（列表）。

3.3 保存情绪——不可变数据更新

saveMood(): void {
  const mood = MOODS[this.selectedMood];
  const newEntries: MoodEntry[] = this.entries.concat();
  let found = false;
  for (let i = 0; i < newEntries.length; i++) {
    if (newEntries[i].date === this.today) {
      newEntries[i] = { date: this.today, emoji: mood.emoji, 
                        name: mood.name, note: this.note };
      found = true;
      break;
    }
  }
  if (!found) {
    newEntries.unshift({ date: this.today, emoji: mood.emoji, 
                         name: mood.name, note: this.note });
  }
  this.entries = newEntries;
  this.note = '';
}

不可变数据更新是 ArkTS 响应式编程中最重要的概念之一。为什么不能直接修改 this.entries[i]？因为 ArkTS 的 @State 依赖的是引用变化——只有当数组引用发生变化时，框架才会重新渲染列表。

正确流程：

1. this.entries.concat() 创建数组的浅拷贝
2. 在拷贝上修改数据（更新已有条目或 unshift 新条目）
3. 将新数组赋值给 this.entries，触发 UI 更新

更新 vs 新增的逻辑：

• 如果今日已有记录 → 替换为新的情绪和备注
• 如果今日尚无记录 → 使用 unshift 插入到数组最前面（最新的在最上面）

unshift 比 push 更适合这个场景，因为用户最关心最近的情绪记录。

3.4 情绪选择器的交互设计

Row({ space: 8 }) {
  ForEach(MOODS, (mood: MoodItem, idx: number) => {
    Column() {
      Text(mood.emoji).fontSize(36)
      Text(mood.name).fontSize(12).fontColor('#888')
    }
    .padding(10)
    .backgroundColor(this.selectedMood === idx ? '#E8F5E9' : '#fff')
    .borderRadius(12)
    .border({ width: this.selectedMood === idx ? 2 : 0, color: mood.color })
    .onClick(() => { this.selectedMood = idx })
  })
}

ForEach 是 ArkTS 中遍历数组渲染列表的核心 API。语法为：

ForEach(
  arr: any[],
  (item: any, index?: number) => void,  // 内容生成函数
  (item: any) => string                  // 可选：key 生成函数
)

本例中，ForEach 遍历 MOODS 数组，为每种情绪渲染一个 Column 卡片。

选中状态的高亮逻辑：

• 背景色：选中时是浅绿色 #E8F5E9，未选中是白色
• 边框：选中时有 2px 宽的对应情绪颜色边框，未选中无边框

这种高亮 + 色彩编码的组合，让用户一目了然地知道当前选中的情绪。

3.5 历史列表渲染

if (this.historyEntries.length > 0) {
  Text('历史记录').fontSize(14).fontColor('#888').margin({ top: 12 })
  List() {
    ForEach(this.historyEntries, (e: MoodEntry) => {
      ListItem() {
        Row() {
          Text(e.date).fontSize(14).fontColor('#888').width(40)
          Text(e.emoji).fontSize(24)
          Text(e.name).fontSize(14)
          if (e.note.length > 0) {
            Text(e.note).fontSize(13).fontColor('#aaa').padding({ left: 8 })
          }
        }.padding(8).backgroundColor('#fff').borderRadius(8).margin({ bottom: 4 })
      }
    })
  }.width('92%').height(100)
}

List + ListItem 是 HarmonyOS 中构建可滚动列表的推荐方式。相较于在 Scroll 中使用 Column 加 ForEach，List 具有懒加载（只渲染可见项）和回收复用（移出视口的列表项被回收）的优势，在处理大量数据时性能更优。

注意这里设置了 List.height(100)——限制了列表高度为 100px，当历史记录超出时自动启用滚动。

四、HarmonyOS 特性分析

4.1 ForEach 的高阶用法

ForEach 的第三个参数是 key 生成函数，用于标识列表项的唯⼀性，帮助框架在列表更新时精准定位变更项。如果未提供，框架使用默认的索引 key。虽然本例没有传第三个参数（性能上无大问题，因为记录通常不多），但在动态增删列表中建议提供 key：

ForEach(this.entries, (entry) => { ... }, 
  (entry) => entry.date + entry.emoji)  // 用日期+emoji 作为唯一 key

4.2 List 组件的懒加载机制

List 组件在 HarmonyOS 中经过底层优化，只渲染当前视口内的 ListItem。对于本例中可能只有几十条记录的场景，性能差异不明显，但对于聊天消息（成千上万条）或无限滚动列表来说，必须使用 List 而非 Column + Scroll。

4.3 条件渲染的链式判断

if (this.todayEntry) {
  // 显示今日情绪卡片
} else {
  // 显示提示文字
}

在 ArkTS 的 build() 中，if/else 条件渲染可以直接嵌入到 UI 树中。这种写法比三元表达式（condition ? A : B）在可读性上更优，尤其当分支包含多个组件时。

五、UI/UX 设计与最佳实践

5.1 Emoji 作为交互元素

本应用使用 emoji 作为情绪选择的核心交互元素，这是情感化设计的典型应用。emoji 的优势：

• 跨越语言障碍：全世界用户都能理解笑脸和哭脸
• 降低认知负担：选择 emoji 比选择文字描述更直观、更快速
• 情感共鸣：emoji 天然具有情感色彩，比抽象图标更温暖

5.2 视觉层级与色彩语义

五种情绪的颜色从绿色到红色的渐变，遵循了通用的色彩语义：

• 绿色系 → 积极情绪
• 黄色/橙色 → 中性情绪
• 红色系 → 消极情绪

用户在潜意识中就能通过颜色判断情绪类别，无需阅读文字。

5.3 避免数据丢失的设计

saveMood() 中有一个关键细节：保存后清空 note（this.note = ''）。这防止了用户在连续记录时，旧备注意外保留到下一次记录中。

5.4 今日/历史分离

将"今日情绪"以大卡片形式突出显示，而"历史记录"以紧凑列表形式呈现，这是一种信息层级分离的设计策略。用户关注的核心是「今天怎么样」，历史记录是辅助参考。

六、可扩展思路

1. 图表趋势分析：使用 @ohos.chart 组件绘制情绪趋势折线图，让用户直观看到情绪变化。
2. 情绪标签：允许用户自定义情绪标签（如「焦虑」「兴奋」），扩展五种固定情绪。
3. 数据持久化：使用 @ohos.data.preferences 或关系型数据库保存情绪记录，避免页面刷新丢失。
4. 导出分享：支持将情绪记录导出为图片或文本，与心理咨询师分享。
5. 推送提醒：每天晚上定时推送通知，提醒用户记录今日情绪。

七、总结

情绪追踪应用以 142 行代码，实现了一个完整的情绪日记系统。它的技术亮点包括：

• interface 类型定义：MoodItem 和 MoodEntry 接口确保数据结构的一致性
• ForEach 列表渲染：遍历情绪选项和历史记录，动态生成 UI
• 不可变数据更新：concat() 创建数组副本后再修改，触发响应式渲染
• List + ForEach 组合：构建可滚动的历史记录列表
• 条件渲染：根据今日是否已记录展示不同 UI
• 计算属性分离逻辑：today、todayEntry、historyEntries 三个 getter 各司其职

这个应用的代码架构——接口定义 + 数组状态 + 不可变更新 + 列表渲染——是 ArkTS 中 CRUD（增删改查）类应用的标准范式，可以复用到日记、笔记、待办事项等各类应用中。

下一期我们将转向阅读领域，探讨一个文化气息浓厚的应用——阅读清单（Reading List），看如何用三态流转管理你的书单。

---

本文是 HarmonyOS 应用开发实战系列第 35 期，更多内容请关注专栏。