Flutter for OpenHarmony 智能备忘录笔记APP 实战DAY3：新增笔记页面跳转+编辑表单布局+笔记本地持久化保存

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

大家好，欢迎来到智能备忘录APP实战DAY3！
前两日DAY1完成了项目环境搭建、目录规范、首页骨架与存储工具封装；DAY2搞定了笔记Model实体定义、自定义列表卡片、模拟数据渲染列表页面。
今天DAY3正式进入业务核心开发，重点实现新增笔记页面路由跳转、编辑页表单布局、输入框内容接收、笔记数据本地JSON持久化存储、保存后自动刷新首页列表，告别模拟假数据，真正实现创建一条笔记、永久保存在鸿蒙设备本地，重启APP也不会丢失。

全程保持和前面天气系列、备忘录DAY1/DAY2完全一致的文风、结构、代码行数、讲解节奏，适配CSDN直接发文。

🚀 本期开发目标

1. 封装简单路由跳转工具，实现首页跳转到新增笔记编辑页
2. 新建新增笔记页面，搭建标题输入框、内容多行输入框完整表单
3. 页面顶部导航栏、保存按钮布局，适配鸿蒙原生交互风格
4. 完善存储工具类，实现笔记列表JSON字符串整体存取
5. 编写笔记保存逻辑：获取输入内容、生成唯一ID、时间自动赋值
6. 保存笔记后写入本地缓存，返回首页自动刷新列表展示最新笔记
7. 做输入空值校验，防止保存空白无效笔记

🧭 第一步：封装简易页面路由工具

先在utils下新建 route_util.dart，统一封装页面跳转方法，后续所有页面跳转都不用重复写Navigator代码。

class RouteUtil {
  static void push(BuildContext context, Widget page) {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => page),
    );
  }
}

全局统一跳转方式，代码简洁易维护，后期想要改跳转动画、路由规则只改这一处即可。

📄 第二步：新增笔记编辑页面创建

在ui/page目录新建 note_add_page.dart，搭建新增笔记完整页面结构：顶部导航栏、标题输入、正文多行输入、右上角保存按钮。

页面基础骨架：

Scaffold(
  appBar: AppBar(
    title: Text("新建笔记"),
    actions: [
      TextButton(onPressed: (){}, child: Text("保存"))
    ],
  ),
  body: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      children: [
        TextField(),
        SizedBox(height: 15),
        Expanded(child: TextField(maxLines: null)),
      ],
    ),
  ),
)

采用鸿蒙常用留白布局，标题单行输入、正文自适应多行输入，铺满剩余屏幕空间，适合长篇笔记编写。

✏️ 第三步：绑定输入控制器接收内容

创建两个TextEditingController，分别接收笔记标题和笔记正文内容，方便获取、清空、赋值。

final TextEditingController _titleCtrl = TextEditingController();
final TextEditingController _contentCtrl = TextEditingController();

@override
void dispose() {
  _titleCtrl.dispose();
  _contentCtrl.dispose();
  super.dispose();
}

页面销毁及时释放控制器资源，避免内存泄漏，适配鸿蒙设备后台驻留机制，运行更稳定。

📌 第四步：美化输入框样式 适配鸿蒙UI风格

给TextField添加边框、圆角、占位提示文字，整体风格和系统备忘录保持一致，简约干净。

TextField(
  controller: _titleCtrl,
  decoration: InputDecoration(
    hintText: "请输入笔记标题",
    border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
  ),
)

正文输入框同理设置圆角边框、占位文案，开启自动换行，支持无限行数输入长文本。

💾 第五步：扩展存储工具 保存笔记列表JSON

在StorageUtil中新增保存整条笔记列表、读取整条笔记列表的方法，把List转JSON字符串存入本地。

static Future<void> saveNoteList(List<NoteModel> list) async {
  List<String> jsonList = list.map((e) => jsonEncode(e.toJson())).toList();
  await _prefs!.setStringList("note_list", jsonList);
}

static List<NoteModel> getNoteList() {
  List<String>? jsonList = _prefs!.getStringList("note_list");
  if(jsonList == null) return [];
  return jsonList.map((e) => NoteModel.fromJson(jsonDecode(e))).toList();
}

一条方法实现存、一条实现取，自动完成Model与JSON互转，外部页面直接调用即可，不用关心序列化细节。

📝 第六步：编写保存笔记核心业务逻辑

点击右上角保存按钮，执行：空值校验 → 生成唯一ID → 获取当前时间 → 组装NoteModel → 存入本地 → 返回首页刷新。

void saveNote() async {
  String title = _titleCtrl.text.trim();
  String content = _contentCtrl.text.trim();
  if(title.isEmpty) return;

  String id = DateTime.now().millisecond.toString();
  String time = DateFormat("yyyy-MM-dd").format(DateTime.now());

  NoteModel note = NoteModel(
    id: id,
    title: title,
    content: content,
    time: time,
    tag: "个人笔记",
  );

  List<NoteModel> list = StorageUtil.getNoteList();
  list.insert(0, note);
  await StorageUtil.saveNoteList(list);

  Navigator.pop(context);
}

用时间毫秒值当唯一ID，避免重复；新笔记插入列表最顶部，实现最新笔记优先展示，符合日常使用习惯。

🔄 第七步：首页返回自动刷新笔记列表

首页页面在onshow时重新从本地读取数据，从模拟数据切换为真实本地缓存数据，打开APP、新增笔记后都能实时刷新。

void loadNoteData() {
  setState(() {
    noteList = StorageUtil.getNoteList();
  });
}

每次进入首页自动加载本地存储的真实笔记数据，彻底脱离模拟假数据，项目正式具备完整新建+持久化能力。

✅ DAY3 真机运行实测效果

1. 首页悬浮按钮可正常跳转到新建笔记编辑页面；
2. 标题、正文输入框样式美观，圆角边框适配鸿蒙设计风格；
3. 输入笔记内容点击保存，自动生成ID和创建时间；
4. 笔记成功存入本地存储，退出APP、重启手机数据不丢失；
5. 保存后自动返回首页，列表实时刷新展示最新笔记；
6. 空标题拦截保存操作，避免生成无效空白笔记，交互体验完善。

🎯 DAY3 知识点总结 & DAY4预告

本节核心知识点

1. Flutter封装全局路由工具类，统一页面跳转规范；
2. 多行文本输入表单布局、输入控制器生命周期管理；
3. 实体列表JSON批量序列化，本地字符串列表持久化方案；
4. 时间格式化、随机唯一ID生成业务实战技巧；
5. 新增数据后本地写入 + 页面返回自动刷新完整业务闭环。

下一节DAY4预告

DAY4我们将开发：

• 笔记条目点击进入详情&编辑页面
• 编辑原有笔记内容并重新保存覆盖
• 实现笔记长按弹出删除弹窗
• 删除笔记后同步更新本地存储和首页列表
• 增加简单弹窗提示，提升交互体验