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

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代码。

classRouteUtil{staticvoidpush(BuildContextcontext,Widgetpage){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，分别接收笔记标题和笔记正文内容，方便获取、清空、赋值。

finalTextEditingController_titleCtrl=TextEditingController();finalTextEditingController_contentCtrl=TextEditingController();@overridevoiddispose(){_titleCtrl.dispose();_contentCtrl.dispose();super.dispose();}

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

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

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

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

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

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

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

staticFuture<void>saveNoteList(List<NoteModel>list)async{List<String>jsonList=list.map((e)=>jsonEncode(e.toJson())).toList();await_prefs!.setStringList("note_list",jsonList);}staticList<NoteModel>getNoteList(){List<String>?jsonList=_prefs!.getStringList("note_list");if(jsonList==null)return[];returnjsonList.map((e)=>NoteModel.fromJson(jsonDecode(e))).toList();}

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

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

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

voidsaveNote()async{Stringtitle=_titleCtrl.text.trim();Stringcontent=_contentCtrl.text.trim();if(title.isEmpty)return;Stringid=DateTime.now().millisecond.toString();Stringtime=DateFormat("yyyy-MM-dd").format(DateTime.now());NoteModelnote=NoteModel(id:id,title:title,content:content,time:time,tag:"个人笔记",);List<NoteModel>list=StorageUtil.getNoteList();list.insert(0,note);awaitStorageUtil.saveNoteList(list);Navigator.pop(context);}

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

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

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

voidloadNoteData(){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我们将开发：

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