欢迎加入开源鸿蒙跨平台社区 https://openharmonycrossplatform.csdn.net一、本篇核心任务引入shared_preferences第三方库实现笔记数据本地持久化实现笔记的新增、存储与读取功能优化首页 UI展示已保存的笔记列表完成新增笔记页面的跳转与数据回传验证应用重启后数据不丢失确保持久化功能稳定二、开发步骤步骤 1添加依赖在项目根目录的pubspec.yaml中添加shared_preferences依赖dependencies: flutter: sdk: flutter shared_preferences: ^2.2.2保存后执行flutter pub get安装依赖打开 CMD进入你的项目根目录E:\note_app输入命令flutter pub get执行成功后会提示类似Process finished with exit code 0说明依赖安装完成了步骤 2创建笔记数据模型与存储工具新建lib/utils/note_storage.dart封装本地存储逻辑在当前的lib文件夹里新建一个文件夹命名为utils进入utils文件夹新建一个文本文档把名字改成note_storage.dart在note_storage.dart中添加代码import dart:convert; import package:shared_preferences/shared_preferences.dart; class NoteStorage { static const String _key note_list; // 保存笔记列表 static Futurevoid saveNotes(ListString notes) async { final prefs await SharedPreferences.getInstance(); await prefs.setStringList(_key, notes); } // 读取笔记列表 static FutureListString loadNotes() async { final prefs await SharedPreferences.getInstance(); return prefs.getStringList(_key) ?? []; } }步骤 3创建新增笔记页面新建lib/pages/add_note_page.dart在当前的lib文件夹里新建一个文件夹命名为pages进入utils文件夹新建一个文本文档把名字改成add_note_page.dart在add_note_page.dart中添加代码import package:flutter/material.dart; class AddNotePage extends StatelessWidget { AddNotePage({super.key}); final TextEditingController _controller TextEditingController(); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text(新增 Note)), body: Padding( padding: const EdgeInsets.all(16.0), child: Column( children: [ TextField( controller: _controller, decoration: const InputDecoration(hintText: 输入笔记内容...), maxLines: null, ), const SizedBox(height: 20), ElevatedButton( onPressed: () { if (_controller.text.isNotEmpty) { Navigator.pop(context, _controller.text); } }, child: const Text(保存), ), ], ), ), ); } }步骤 4修改main.dart整合存储与页面跳转import package:flutter/material.dart; import utils/note_storage.dart; import pages/add_note_page.dart; void main() { runApp(const NoteApp()); } class NoteApp extends StatelessWidget { const NoteApp({super.key}); override Widget build(BuildContext context) { return MaterialApp( title: Note App, debugShowCheckedModeBanner: false, theme: ThemeData(primarySwatch: Colors.blue), home: const HomePage(), ); } } class HomePage extends StatefulWidget { const HomePage({super.key}); override StateHomePage createState() _HomePageState(); } class _HomePageState extends StateHomePage { ListString _notes []; override void initState() { super.initState(); _loadNotes(); } Futurevoid _loadNotes() async { final notes await NoteStorage.loadNotes(); setState(() _notes notes); } Futurevoid _addNote(String content) async { setState(() _notes.add(content)); await NoteStorage.saveNotes(_notes); } override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text(鸿蒙 Note 记事本)), body: _notes.isEmpty ? const Center(child: Text(暂无笔记请点击新增\n创建你的第一条 Note, textAlign: TextAlign.center, style: TextStyle(color: Colors.grey))) : ListView.builder( itemCount: _notes.length, itemBuilder: (context, index) ListTile(title: Text(_notes[index])), ), floatingActionButton: FloatingActionButton( onPressed: () async { final newNote await Navigator.push( context, MaterialPageRoute(builder: (context) AddNotePage()), ); if (newNote ! null) { _addNote(newNote); } }, child: const Icon(Icons.add), ), ); } }步骤 5运行验证启动模拟器新增笔记后关闭应用再重新打开笔记数据依然存在即功能实现成功。三、Flutter-OH 鸿蒙工具类应用实战 Day2Note 记事本数据持久化与本地存储实现数据持久化是工具类应用的核心能力能够保障用户数据在应用重启、设备重启后不丢失显著提升用户体验。本篇基于 Flutter-OH 框架为记事本应用引入shared_preferences库实现笔记数据的本地持久化存储完成了从数据新增、读取到保存的完整流程。开发过程中首先在项目中引入shared_preferences依赖封装了笔记数据的存储与读取工具类实现了笔记列表的序列化与持久化。随后新增了笔记编辑页面通过页面跳转与数据回传实现了笔记内容的新增功能。首页 UI 也同步优化支持展示已保存的笔记列表替代了初始的空状态提示。最终通过模拟器验证新增的笔记数据在应用重启后依然能够正常读取持久化功能稳定可靠。本篇为记事本应用补充了核心数据能力为后续的笔记编辑、删除与搜索功能开发奠定了数据层基础也进一步加深了对 Flutter 跨平台开发中数据持久化方案的理解。