行业资讯
# 备忘录应用开发实战：HarmonyOS ArkTS 快速记事本应用解析
一、应用概述备忘录应用是移动设备上最经典、最基础的生产力工具之一。本文将以 HarmonyOS 原生开发框架 ArkTS 为基础详细解析一个轻量级备忘录应用Quick Memo的完整开发过程。该应用支持用户快速记录文字内容自动添加时间戳并具备添加与删除备忘录的核心功能。1.1 功能特性快速记录用户可以在输入框中输入任意文本内容点击添加按钮即可生成一条备忘录记录自动时间戳每条备忘录在创建时自动记录当前时间并按照YYYY-MM-DD HH:mm的格式呈现列表展示所有备忘录以列表形式清晰展示最新添加的记录排列在最上方滑动删除支持左滑或点击删除按钮移除指定备忘录数据持久化利用 HarmonyOS 的本地存储能力确保重启应用后数据不丢失1.2 适用场景日常灵感记录待办事项快速录入购物清单管理会议要点摘录1.3 技术亮点本应用虽然功能简洁却完整展现了 ArkTS 声明式 UI 开发的核心理念包括组件状态管理、列表渲染、事件绑定、数据持久化等关键技术点是 ArkTS 入门学习的绝佳案例。二、技术架构2.1 整体架构概览本应用采用 HarmonyOS 推荐的单页面单 Ability架构以Entry装饰的主页面作为唯一入口内部通过Component拆分为多个功能模块。整体架构分为三层┌─────────────────────────────────────┐ │ UI 表示层 │ │ (MainPage / MemoItem / AddMemoBar) │ ├─────────────────────────────────────┤ │ 状态管理层 │ │ (State / Prop / Link 装饰器) │ ├─────────────────────────────────────┤ │ 数据持久层 │ │ (Preferences / AppStorage) │ └─────────────────────────────────────┘2.2 核心数据结构备忘录的数据模型定义如下interface Memo { id: string; // 唯一标识符 content: string; // 备忘录内容 timestamp: number; // 创建时间时间戳 }每个Memo对象通过id字段实现唯一标识确保在删除和更新操作中能精确定位目标记录。timestamp字段存储 Unix 时间戳便于后续按时间排序和格式化显示。2.3 组件树结构Entry MainPage ├── Column (主容器) │ ├── Text (标题栏) │ ├── Row (输入区域) │ │ ├── TextInput (文本输入框) │ │ └── Button (添加按钮) │ └── List (备忘录列表) │ └── ForEach → MemoItem (自定义列表项) │ ├── Text (内容) │ ├── Text (时间戳) │ └── Button (删除)三、核心代码分析3.1 数据模型与状态管理备忘录的数据模型使用interface定义确保类型的强约束性。所有备忘录数据通过State装饰器管理当数据发生变化时框架自动重新渲染 UI。// 备忘录数据模型 interface Memo { id: string; content: string; timestamp: number; } Entry Component struct MemoApp { // 使用 State 管理备忘录列表驱动 UI 更新 State private memoList: Memo[] []; State private inputContent: string ; // 格式化时间戳为可读字符串 private formatTime(timestamp: number): string { const date new Date(timestamp); const year date.getFullYear(); const month String(date.getMonth() 1).padStart(2, 0); const day String(date.getDate()).padStart(2, 0); const hour String(date.getHours()).padStart(2, 0); const minute String(date.getMinutes()).padStart(2, 0); return ${year}-${month}-${day} ${hour}:${minute}; } }State是 ArkTS 中最基础的状态装饰器。当memoList的内容发生变化增删改时所有依赖于该数据的 UI 组件会自动重新渲染。这种声明式编程方式大幅简化了传统的命令式 DOM 操作让开发者可以专注于业务逻辑本身。3.2 添加备忘录功能备忘录的添加操作需要完成三步工作生成唯一 ID、获取当前时间戳、将新记录插入列表头部。// 添加备忘录 addMemo() { if (this.inputContent.trim() ) { // 空内容不添加提升用户体验 return; } // 生成唯一 ID const newMemo: Memo { id: Date.now().toString() Math.random().toString(36).substr(2, 9), content: this.inputContent.trim(), timestamp: Date.now() }; // 插入到列表头部最新在上 this.memoList.unshift(newMemo); // 清空输入框 this.inputContent ; // 持久化存储 this.saveData(); }关键设计考量ID 生成策略使用Date.now()结合随机数确保在多设备、多线程环境下 ID 的唯一性空值校验在添加前校验内容是否为空避免产生无意义的空记录头部插入使用unshift而非push保证最新记录显示在列表最上方自动清空添加成功后立即清空输入框方便用户连续记录3.3 删除备忘录功能删除操作提供两种交互方式点击删除按钮和左滑删除手势。// 删除备忘录 deleteMemo(memoId: string) { // 根据 ID 过滤出要保留的记录 this.memoList this.memoList.filter(item item.id ! memoId); // 同步持久化数据 this.saveData(); } // UI 中的删除按钮 Button(删除) .fontColor(Color.Red) .fontSize(14) .onClick(() { this.deleteMemo(item.id); })使用数组的filter方法删除记录是一种函数式编程的实践它不会修改原数组而是返回一个新数组。ArkTS 的状态管理机制能检测到这种变化并触发 UI 更新。3.4 列表渲染与 ForEach备忘录列表使用ForEach指令进行循环渲染这是 ArkTS 中最常用的列表渲染方式。List({ space: 12 }) { ForEach(this.memoList, (item: Memo, index: number) { ListItem() { // 自定义备忘录卡片 Column() { Text(item.content) .fontSize(16) .fontWeight(FontWeight.Medium) .width(100%) .textAlign(TextAlign.Start) Text(this.formatTime(item.timestamp)) .fontSize(12) .fontColor(Color.Gray) .width(100%) .textAlign(TextAlign.End) .margin({ top: 8 }) // 删除按钮 Button(删除) .fontColor(Color.Red) .fontSize(14) .onClick(() { this.deleteMemo(item.id); }) .alignSelf(ItemAlign.End) .margin({ top: 4 }) } .padding(16) .backgroundColor(Color.White) .borderRadius(12) .shadow({ radius: 4, color: rgba(0, 0, 0, 0.08), offsetX: 0, offsetY: 2 }) .width(100%) } // 添加滑动删除支持 .swipeAction({ end: { builder: () { Button(删除) .width(80) .height(100%) .backgroundColor(Color.Red) .fontColor(Color.White) .onClick(() { this.deleteMemo(item.id); }) } } }) }, (item: Memo) item.id) }ForEach 的 key 生成器第三个参数(item: Memo) item.id是 key 生成器它告诉框架如何唯一标识每个列表项。使用item.id作为 key 可以确保列表在增删操作时能够高效地复用和重排组件避免不必要的全量重建。3.5 数据持久化利用 HarmonyOS 的 Preferences 轻量级键值数据库实现数据持久化import preferences from ohos.data.preferences; // 保存数据到本地 async saveData() { const context getContext(this); const pref await preferences.getPreferences(context, memo_db); // 将对象数组转换为 JSON 字符串存储 await pref.put(memo_list, JSON.stringify(this.memoList)); await pref.flush(); } // 从本地加载数据 async loadData() { const context getContext(this); const pref await preferences.getPreferences(context, memo_db); const jsonStr await pref.get(memo_list, []); this.memoList JSON.parse(jsonStr as string); }持久化流程通过getPreferences获取或创建数据库实例使用put方法存储序列化后的数据调用flush确保数据写入磁盘读取时使用get方法获取 JSON 字符串再反序列化为对象数组四、HarmonyOS关键技术应用4.1 声明式 UI 与状态管理HarmonyOS 的 ArkUI 框架采用了声明式 UI 范式这与传统的命令式 UI 有本质区别。在声明式 UI 中开发者只需描述 UI 的最终状态框架负责处理状态变化后的 UI 更新。特性传统命令式声明式ArkTS编程方式手动操作 DOM描述 UI 状态状态同步手动同步自动追踪代码量较多精简可维护性一般优秀State 装饰器是状态管理的核心其工作原理可概括为开发者用State标记一个变量为响应式数据当该变量的值发生变化时框架自动标记所有依赖它的组件为脏状态框架在下一个渲染周期中重新执行所有脏组件的build方法通过虚拟 DOM 的 diff 算法仅更新实际变化的 UI 部分4.2 List 组件的性能优化List组件是 HarmonyOS 中高效的列表容器它内置了以下优化机制懒加载Lazy Loading只渲染可见区域的列表项不可见区域的内容不会创建对应的组件实例组件复用Component Reuse当用户滚动列表时移出屏幕的组件实例会被回收并复用给新进入屏幕的列表项缓存池Cache Pool在可见区域上下各预缓存一定数量的列表项确保快速滚动时的流畅体验List({ space: 12, scroller: this.scroller }) { // 列表内容 } .layoutWeight(1) .listDirection(Axis.Vertical) .edgeEffect(EdgeEffect.Spring) .scrollBar(BarState.Off)4.3 自定义组件封装将备忘录卡片封装为独立的Component提升了代码的复用性和可维护性Component struct MemoItem { private memo: Memo; private onDelete: () void; build() { Column() { Text(this.memo.content) .fontSize(16) .fontWeight(FontWeight.Medium) Text(this.formatTime(this.memo.timestamp)) .fontSize(12) .fontColor(Color.Gray) .margin({ top: 8 }) Button(删除) .fontColor(Color.Red) .fontSize(14) .onClick(() { this.onDelete(); }) } .padding(16) .backgroundColor(Color.White) .borderRadius(12) } private formatTime(timestamp: number): string { // 时间格式化逻辑 } }自定义组件的优势封装性将 UI 结构和样式封装在组件内部对外只暴露必要的属性和回调复用性同一组件可在不同页面或同一页面的不同位置重复使用可测试性独立组件便于进行单元测试和 UI 测试五、UI设计与交互5.1 视觉设计本应用的视觉设计遵循 Material Design 设计规范同时融入 HarmonyOS 的设计语言特点配色方案主色调系统蓝色#0A59F7背景色浅灰色#F5F5F5卡片背景纯白色#FFFFFF文字色深灰色#333333辅助色灰色#999999用于时间戳警示色红色#FF0000用于删除操作卡片设计每条备忘录以卡片形式呈现圆角 12px带有微弱的阴影效果营造出层次感和立体感。卡片内左上方显示备忘录内容右下方显示创建时间布局清晰直观。5.2 交互反馈添加动画新备忘录添加时列表项以淡入动画呈现删除反馈删除按钮点击后列表项以淡出动画消失滑动删除列表项支持左滑手势露出删除按钮提升操作效率空状态提示当列表为空时显示暂无备忘录的友好提示5.3 自适应布局应用使用 ArkTS 的弹性布局Flex和Column实现自适应在不同屏幕尺寸下均有良好表现。Column() { // 标题区域 Text(备忘录) .fontSize(24) .fontWeight(FontWeight.Bold) .width(100%) .padding(16) // 输入区域 Row() { TextInput({ placeholder: 输入备忘录内容... }) .layoutWeight(1) .height(48) .backgroundColor(Color.White) .borderRadius(8) Button(添加) .width(64) .height(48) .margin({ left: 12 }) .backgroundColor(#0A59F7) .fontColor(Color.White) .borderRadius(8) } .padding({ left: 16, right: 16, bottom: 12 }) // 列表区域 List({ space: 12 }) { // ... } .layoutWeight(1) .padding(16) } .width(100%) .height(100%) .backgroundColor(#F5F5F5)六、性能优化与最佳实践6.1 性能优化策略6.1.1 减少不必要的重新渲染在使用State时需要注意避免触发不必要的 UI 更新// ❌ 不良实践每次添加都触发全列表重绘 this.memoList [...this.memoList, newMemo]; // ✅ 最佳实践使用数组方法并配合 key 生成器 this.memoList.unshift(newMemo); // ForEach 配合唯一 key 可精确定位需要更新的项6.1.2 合理使用计算属性对于需要复杂计算的数据使用Computed或 getter 方法缓存计算结果// 使用 getter 计算统计数据 get totalMemos(): number { return this.memoList.length; } get todayMemos(): number { const today new Date().toDateString(); return this.memoList.filter(item new Date(item.timestamp).toDateString() today ).length; }6.1.3 数据持久化优化避免频繁的磁盘写入操作可以采用防抖Debounce策略private saveTimer: number | null null; debounceSave() { if (this.saveTimer) { clearTimeout(this.saveTimer); } this.saveTimer setTimeout(() { this.saveData(); this.saveTimer null; }, 500); // 500ms 防抖 }6.2 最佳实践总结6.2.1 代码组织规范src/ ├── main/ │ ├── ets/ │ │ ├── pages/ │ │ │ └── Index.ets # 主页面 │ │ ├── components/ │ │ │ ├── MemoItem.ets # 备忘录卡片组件 │ │ │ └── AddMemoBar.ets # 添加栏组件 │ │ ├── model/ │ │ │ └── MemoModel.ets # 数据模型定义 │ │ └── utils/ │ │ └── DateUtil.ets # 工具函数 │ └── resources/ │ └── ...6.2.2 状态提升原则将共享状态提升到共同的父组件中子组件通过Prop或Link接收数据和回调// 父组件管理状态 State memoList: Memo[] []; build() { Column() { AddMemoBar({ onAdd: (content) this.addMemo(content) }) MemoList({ memos: this.memoList, onDelete: (id) this.deleteMemo(id) }) } }6.2.3 错误处理与边界情况// 处理空列表情况 if (this.memoList.length 0) { // 显示空状态 Image($r(app.media.empty_illustration)) .width(200) .height(200) Text(暂无备忘录) .fontColor(Color.Gray) .fontSize(16) } // 处理输入过长的情况 if (this.inputContent.length 500) { showToast(备忘录内容不能超过500字); return; }七、总结与扩展思路7.1 项目总结本文详细解析了基于 HarmonyOS ArkTS 框架开发的备忘录应用。通过本项目的学习开发者可以掌握以下关键技术点ArkTS 声明式 UI 开发理解State、Prop、Link等装饰器的工作原理和使用场景列表渲染与交互掌握ListForEach的高效列表渲染方案数据持久化熟悉 HarmonyOS Preferences 轻量级数据库的使用自定义组件设计学会将 UI 拆分为可复用的自定义组件交互体验优化掌握动画、手势、反馈等交互设计要点7.2 扩展思路本应用作为基础版本可以从以下几个方面进行扩展和增强7.2.1 功能增强分类管理为备忘录添加分类标签支持按分类筛选搜索功能实现关键词搜索快速定位目标记录富文本编辑支持 Markdown 语法或富文本格式图片附件支持为备忘录添加图片或语音附件云同步利用 HarmonyOS 的分布式能力实现多设备数据同步7.2.2 交互升级长按拖拽排序通过拖拽手势改变备忘录顺序暗黑模式适配响应系统暗黑模式提供舒适的夜间使用体验小组件Widget开发 HarmonyOS 卡片小组件在桌面直接查看和添加备忘录语音输入集成语音识别能力支持语音转文字记录7.2.3 技术进阶原子化服务将应用改造为 HarmonyOS 原子化服务免安装即用跨端移植利用 ArkTS 的多平台适配能力将应用移植到平板和折叠屏设备性能监控接入性能监控 SDK持续优化应用性能单元测试为关键业务逻辑编写单元测试确保代码质量7.3 学习建议对于 HarmonyOS 初学者建议按照以下路径学习本应用相关的技术点先理解State状态管理机制这是 ArkTS 开发的核心掌握List组件的使用包括懒加载和组件复用学习ForEach的 key 生成器原理理解自定义组件的生命周期和通信方式最后研究数据持久化和性能优化方案通过本项目的学习开发者可以建立起 ArkTS 应用开发的基本框架思维为进一步开发更复杂的 HarmonyOS 应用打下坚实基础。项目代码已完整开源开发者可以基于本文的代码示例进行二次开发和创新。HarmonyOS 生态正快速发展掌握 ArkTS 开发技能将为开发者打开通往万物互联时代的大门。
郑州网站建设
网页设计
企业官网
