当前位置：首页 > news >正文

Flutter-OH 鸿蒙工具类应用实战 Day2：Note 记事本数据持久化与本地存储实现

news 2026/5/7 1:28:21

欢迎加入开源鸿蒙跨平台社区： 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 Future<void> saveNotes(List<String> notes) async { final prefs = await SharedPreferences.getInstance(); await prefs.setStringList(_key, notes); } // 读取笔记列表 static Future<List<String>> 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 State<HomePage> createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { List<String> _notes = []; @override void initState() { super.initState(); _loadNotes(); } Future<void> _loadNotes() async { final notes = await NoteStorage.loadNotes(); setState(() => _notes = notes); } Future<void> _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), ), ); } }