# 42号应用：心情日记 — 用 ArkTS 构建情感记录器的完整指南

一、应用概述心情日记Mood Diary是一个轻量级的日记记录应用用户可以选择表情符号表达心情、填写标题和内容保存后以列表形式展示。每条日记显示心情图标、标题、日期和内容摘要支持删除操作。应用核心解决的是「快速记录情绪」的需求——打开即写三步完成记录。在 HarmonyOS 生态中这类数据密集型应用是理解状态管理、列表渲染和表单交互的最佳实践案例。心情日记应用通过State装饰器管理动态数据使用ListForEach实现高效列表渲染展示了 ArkUI 在 CRUD创建、读取、更新、删除场景下的完整能力。二、技术架构2.1 应用结构┌─────────────────────────────────────┐ │ 导航栏 写按钮 │ ├─────────────────────────────────────┤ │ ┌──── 表单区条件渲染───────┐ │ │ │ TextInput 标题 │ │ │ │ TextInput 内容 │ │ │ │ 心情选择 │ │ │ │ [ 保存] │ │ │ └─────────────────────────────┘ │ ├─────────────────────────────────────┤ │ ┌──── 列表区 ─────────────────┐ │ │ │ 标题1 2024-01-01 ✕│ │ │ │ 内容摘要... │ │ │ │ 标题2 2024-01-02 ✕│ │ │ │ 内容摘要... │ │ │ └─────────────────────────────┘ │ └─────────────────────────────────────┘2.2 数据模型interface DiaryEntry { date: string; // 日期格式 YYYY-MM-DD title: string; // 日记标题 content: string; // 日记内容 mood: string; // 心情 emoji 字符串 }2.3 状态变量设计变量名类型初始值用途entriesDiaryEntry[][]日记条目数组驱动列表渲染titlestring新建日记的标题输入contentstring新建日记的内容输入selectedMoodnumber2当前选中的心情索引 (0-4)showFormbooleanfalse控制表单显示/隐藏三、核心代码深度解析3.1 心情选择器心情选择是应用的核心交互之一。五个表情 () 对应五种情绪等级用户点击切换选中状态Row({ space: 4 }) { ForEach(this.moods, (m: string, idx: number) { Text(m).fontSize(28).padding(4) .opacity(this.selectedMood idx ? 1 : 0.4) .onClick(() { this.selectedMood idx }) }) }设计亮点使用opacity而非颜色变化来表示选中状态保持视觉干净选中时完全不透明opacity: 1未选中时 0.4对比鲜明通过idxForEach 的第二个参数与selectedMood比较实现单选逻辑五个表情的排列顺序本身就是情绪刻度从非常开心到非常难过3.2 今日日期自动生成get today(): string { const now new Date(); return ${now.getFullYear()}-${(now.getMonth() 1).toString().padStart(2, 0)}-${now.getDate().toString().padStart(2, 0)}; }这是一个getter 属性计算属性特点每次访问都返回当前日期无需手动更新使用padStart(2, 0)确保月份和日期始终两位数如01而非1模板字符串拼接生成标准 ISO 日期格式3.3 保存与删除逻辑保存日记save() { if (this.title.trim() ) return; // 空标题保护 this.entries [ { date: this.today, title: this.title, content: this.content, mood: this.moods[this.selectedMood] }, ...this.entries // 新条目插入数组头部 ]; this.title ; // 清空输入 this.content ; // 清空输入 this.showForm false; // 隐藏表单 }删除日记deleteEntry(idx: number) { this.entries this.entries.filter((_, i) i ! idx); }关键模式不可变数据更新两个方法都遵循不可变immutable更新原则save()创建新数组[...this.entries]而非push修改原数组deleteEntry()使用filter返回新数组而非splice修改原数组为什么这样做因为ArkUI 的 State 通过引用变化检测更新。如果直接修改原数组如push/splice数组引用不变UI 不会重新渲染。创建新数组 → 新引用 → 触发重新渲染。3.4 列表渲染List() { ForEach(this.entries, (entry: DiaryEntry, idx: number) { ListItem() { Column() { Row() { Text(entry.mood).fontSize(22) Text(entry.title).fontSize(16).fontWeight(FontWeight.Medium).padding({ left: 8 }).layoutWeight(1) Text(entry.date).fontSize(12).fontColor(#aaa) Text(✕).fontSize(14).fontColor(#F44336).margin({ left: 4 }) .onClick(() this.deleteEntry(idx)) } if (entry.content) { Text(entry.content).fontSize(14).fontColor(#666).margin({ top: 4 }).lineHeight(20) } }.padding(14).backgroundColor(#fff).borderRadius(10).margin({ bottom: 6 }) } }, (_: DiaryEntry, idx: number) idx.toString()) }渲染优化要点key 生成器ForEach的第三个参数(_: DiaryEntry, idx: number) idx.toString()为每个列表项生成唯一键。这是 HarmonyOS 的 diff 算法类似于 React 的 key 机制需要的帮助框架精确识别哪些项需要新增、删除或重排。条件内容if (entry.content)判断内容是否为空非空才显示避免空行占据多余空间。layoutWeight(1)标题区域使用layoutWeight(1)占据剩余空间实现标题左对齐、日期右对齐的弹性布局。白色卡片风格每个日记条目使用白色背景 圆角 底部 margin形成卡片堆叠效果。四、HarmonyOS 特色功能深度解析4.1 State 装饰器与响应式编程State是 ArkUI 中最重要的装饰器之一它建立了数据与 UI 的绑定关系State entries: DiaryEntry[] [];当entries被重新赋值新数组时ArkUI 框架自动对比新旧状态树的差异找出受影响的组件仅重新渲染差异部分增量更新这种机制称为单向数据流数据变化 → UI 自动更新开发者不需要手动操作 DOM。4.2 List ForEach 虚拟列表List组件在 HarmonyOS 中实现了虚拟列表Virtual List机制只渲染当前可视区域内的ListItem滚动时复用已离开视口的组件实例对于长列表100 条目性能显著优于ColumnForEachForEach的数据源类型要求必须是数组ArrayT建议提供 key 生成器避免使用默认索引4.3 TextInput 输入组件TextInput({ placeholder: 标题, text: this.title }) .height(44).backgroundColor(#fff).borderRadius(8).padding({ left: 12 }) .onChange(v this.title v)TextInput的关键属性双向绑定通过text属性和onChange回调实现样式定制height、borderRadius、padding等均可独立设置占位提示placeholder在无输入时显示灰色提示文字五、UI/UX 设计分析5.1 温暖柔和的视觉基调背景色#FFF8E1浅黄色调传递温暖、舒适的情感与「日记」的私密温馨感匹配卡片风格白色圆角卡片 柔和阴影模拟纸质日记本的质感心情选择器大号 emoji28px易于触控选择5.2 渐进式交互应用采用渐进式揭露设计模式初始状态只显示导航栏和空列表提示用户「写给」点击「写」表单从顶部展开引导用户逐步填写保存后自动关闭表单新条目出现在列表顶部形成「写→看→再写」的流畅循环这种模式避免了初次进入时被大量表单字段吓到降低了记日记的心理门槛。5.3 删除确认的权衡当前实现中删除操作没有二次确认点击 ✕ 立即删除。这是有意的设计决策日记场景下用户通常是有意删除可以快速清理不需要的条目如果误删数据量少时可以手动重新添加对于生产环境建议增加「撤销」机制或弹窗确认。六、最佳实践与优化建议6.1 当前代码中的优秀实践计算属性get today()自动获取当前日期减少重复代码空标题保护if (this.title.trim() ) return;防止保存空日记输入后自动清空保存后复位title和content优化后续输入体验不可变数据模式所有状态更新都创建新数组确保 State 正确响应6.2 可优化方向// 优化建议 1添加数据持久化 import { preferences } from kit.ArkData; // 加载日记 async loadEntries(): Promisevoid { const prefs await preferences.getPreferences(this.context, diaryStore); const json prefs.get(entries, []); this.entries JSON.parse(json); } // 保存日记 async persistEntries(): Promisevoid { const prefs await preferences.getPreferences(this.context, diaryStore); await prefs.put(entries, JSON.stringify(this.entries)); await prefs.flush(); } // 优化建议 2添加搜索过滤 get filteredEntries(): DiaryEntry[] { if (!this.searchText) return this.entries; return this.entries.filter(e e.title.includes(this.searchText) || e.content.includes(this.searchText) ); } // 优化建议 3日期分组展示 // 按月份分组每个分组显示月份标题 groupByMonth(): Recordstring, DiaryEntry[] { const groups: Recordstring, DiaryEntry[] {}; this.entries.forEach(e { const month e.date.substring(0, 7); // YYYY-MM if (!groups[month]) groups[month] []; groups[month].push(e); }); return groups; } // 优化建议 4emoji 心情改为可配置 // 用户可以从更多表情中选择而非固定五个6.3 性能优化ForEach key务必提供稳定的 key 生成器避免使用默认索引索引在删除操作后会变化导致 diff 混乱合理使用 layoutWeight在标题区域使用layoutWeight(1)而非固定宽度自适应不同屏幕尺寸List 性能当条目超过 50 条时考虑分页加载或懒加载七、总结与扩展心情日记应用是理解 ArkUI数据驱动 UI理念的完美入门案例。它涵盖了知识点应用位置重要程度State 状态管理全部数据★★★★★List ForEach日记列表★★★★★条件渲染 if表单显示/隐藏、内容显示★★★★☆TextInput 输入标题/内容输入★★★★☆不可变数据更新save/delete 方法★★★★★计算属性 gettertoday 日期★★★☆☆扩展思路数据持久化使用ohos.data.preferences或关系型数据库ohos.data.relationalStore实现数据持久化云同步接入 HarmonyOS 的云服务能力实现多设备日记同步日记详情页点击列表项进入详情页支持富文本编辑和图片插入情绪分析统计不同心情的出现频率生成周/月情绪趋势图生物认证使用指纹或面容识别保护日记隐私通过ohos.userIAM.userAuth分享功能生成精美卡片通过ohos.share分享到社交平台心情日记虽然是一个简单的应用但它包含了几乎所有数据驱动应用的基础模式——表单输入 → 数据存储 → 列表展示 → 删除操作。掌握了这些模式就掌握了 ArkTS 应用开发的核心方法论。