一、前言
记事本（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 条件渲染轻松实现，状态管理也遵循"状态驱动视图"的核心理念。
"记事本 + 待办清单"的组合几乎可以覆盖信息管理类应用的全部基础需求。掌握了这两个应用，你就已经可以上手开发很多实用的工具应用了。