一、前言记事本Notepad是智能手机上使用频率最高的工具类应用之一。它虽然功能简单——记录、编辑、保存文本——但其背后涉及的视图模式和编辑模式之间的切换、文本内容的增删改、状态一致性维护等技术点是构建更复杂应用的重要基础。二、应用需求2.1 功能需求功能 说明笔记列表 以列表形式展示所有笔记标题/摘要添加笔记 通过输入框创建新笔记编辑笔记 点击编辑按钮进入编辑模式删除笔记 一键删除笔记保存笔记 将编辑内容保存到列表中2.2 模式设计本应用采用双模式设计Dual Mode Design┌──────────┐ 点击编辑 ┌──────────┐│ 浏览模式 │ ────────────────→ │ 编辑模式 ││ (列表视图) │ ←──────────────── │ (编辑视图) │└──────────┘ 保存/取消 └──────────┘这种双模式设计在移动应用中非常常见如联系人编辑、设置项修改等。三、核心状态设计3.1 状态变量State notes: string[] [‘初始笔记’]; // 笔记数组State currentNote: string ‘’; // 当前编辑中的文本State isEditing: boolean false; // 是否处于编辑状态State editIndex: number -1; // 正在编辑的笔记索引(-1新建)3.2 模式条件渲染在 build() 方法中通过 if (this.isEditing) 条件在两种模式间切换build() {Column() {// 标题栏if (this.isEditing) {// 编辑模式TextArea 保存/取消按钮} else {// 浏览模式笔记列表 添加按钮}}}这是 ArkTS 中条件渲染的标准写法。当 isEditing 为 true 时显示编辑界面为 false 时显示列表界面。四、文本输入组件详解4.1 TextInput vs TextArea组件 行数 适用场景TextInput 单行 短文本输入TextArea 多行 笔记/长文本在记事本应用中我们使用 TextArea 来提供足够的书写空间TextArea({placeholder: ‘输入笔记内容…’,text: this.currentNote}).height(150).backgroundColor(Color.White).borderRadius(8).onChange((v: string) {this.currentNote v;})4.2 输入防抖对于 onChange 回调如果存在后端存储或搜索等操作建议添加防抖Debounce处理。但在当前应用中我们将文本直接保存在 State 变量中无需防抖。五、编辑模式切换逻辑5.1 进入编辑Button(‘✏️’).onClick(() {this.currentNote note; // 加载笔记内容到编辑器this.editIndex idx; // 记录索引位置this.isEditing true; // 切换到编辑模式})三步操作加载内容 → 记录位置 → 切换模式。5.2 保存编辑Button(‘ 保存’).onClick(() {let txt this.currentNote.trim();if (txt) {if (this.editIndex 0) {this.notes[this.editIndex] txt; // 更新已有笔记} else {this.notes.push(txt); // 添加新笔记}}// 重置编辑状态this.isEditing false;this.currentNote ‘’;this.editIndex -1;})关键判断editIndex 0 表示编辑已有笔记否则为新建笔记。5.3 取消编辑Button(‘取消’).onClick(() {this.isEditing false;this.currentNote ‘’;this.editIndex -1;})取消编辑必须同时清除三个编辑状态变量否则下次进入编辑模式时可能残留上一次的索引或内容。六、条件渲染的性能考量在 ArkTS 中if/else 条件渲染会导致未被选中的分支在渲染树中完全不存在。这对于性能是有益的——因为编辑器只在需要时才创建和渲染。但需要注意每次切换模式都会触发组件的重新创建。如果编辑器组件非常复杂可以考虑使用 Visibility 属性进行显隐控制而非条件渲染。七、总结记事本应用的开发虽然简单但它引入了移动应用开发中一个非常重要的设计模式双模式切换。这种模式在 ArkTS 中可以通过 if/else 条件渲染轻松实现状态管理也遵循状态驱动视图的核心理念。记事本 待办清单的组合几乎可以覆盖信息管理类应用的全部基础需求。掌握了这两个应用你就已经可以上手开发很多实用的工具应用了。
