鸿蒙flutter第三方库适配 - 读书笔记

见山是山-见水是水2026-04-14 1:10

读书笔记应用

欢迎加入开源鸿蒙跨平台社区：

https://openharmonycrossplatform.csdn.net

适配的第三方库地址：

一、项目概述

运行效果图



1.1 应用简介

读书笔记是一款专为阅读爱好者设计的应用，支持记录读书笔记、书籍管理、阅读进度跟踪，以及笔记导出分享。应用以温暖的棕色为主色调，营造书香气息。涵盖书架管理、笔记记录、阅读统计、设置中心四大模块。用户可以轻松管理个人书单、记录阅读感悟、追踪阅读进度，让阅读更有价值。

1.2 核心功能

功能模块 功能描述 实现方式
书籍管理 添加、编辑、删除书籍 sqflite存储
阅读进度 记录和追踪阅读进度 进度计算
笔记记录 摘抄、感想、总结、疑问 分类笔记
笔记分享 导出分享读书笔记 share_plus
书籍封面 添加书籍封面图片 image_picker
阅读提醒 定时提醒阅读 flutter_local_notifications
书籍搜索 搜索书架中的书籍 全文检索
阅读统计 统计阅读数据 数据聚合

1.3 书籍状态定义

序号 状态名称 Emoji 颜色 描述
1 在读 📖 绿色 正在阅读的书籍
2 已读 ✅ 蓝色 已读完的书籍
3 想读 📚 橙色 想要阅读的书籍
4 弃读 ❌ 灰色 放弃阅读的书籍

1.4 笔记类型定义

序号 类型名称 Emoji 颜色 描述
1 摘抄 📝 紫色 精彩语句摘抄
2 感想 💭 青色 阅读感想体会
3 总结 📋 橙红 章节内容总结
4 疑问 ❓ 灰蓝 阅读中的疑问

1.5 技术栈

技术领域 技术选型 版本要求
开发框架 Flutter >= 3.0.0
编程语言 Dart >= 2.17.0
设计规范 Material Design 3 -
数据库 sqflite >= 2.3.0
数据分享 share_plus >= 7.0.0
图片选择 image_picker >= 1.0.0
本地通知 flutter_local_notifications >= 16.0.0
数据存储 shared_preferences >= 2.0.0
目标平台 鸿蒙OS / Web / Android API 21+

1.6 项目结构

复制代码 
lib/
└── main_reading_notes.dart
    ├── ReadingNotesApp                # 应用入口
    ├── BookStatus                     # 书籍状态枚举
    ├── NoteType                       # 笔记类型枚举
    ├── Book                           # 书籍模型
    ├── Note                           # 笔记模型
    ├── DatabaseHelper                 # 数据库帮助类
    ├── HomePage                       # 主页面（底部导航）
    ├── _buildLibraryPage              # 书架页面
    ├── _buildNotesPage                # 笔记页面
    ├── _buildStatisticsPage           # 统计页面
    ├── _buildSettingsPage             # 设置页面
    ├── _AddBookForm                   # 添加书籍表单
    ├── _BookDetailSheet               # 书籍详情
    └── BookSearchDelegate             # 搜索代理

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

HomePage
书架管理
笔记记录
阅读统计
设置中心
书籍列表
阅读进度
书籍详情
笔记列表
添加笔记
分享笔记
阅读总览
状态分布
笔记统计
数据库管理器

DatabaseHelper
书籍管理

BookManager
笔记管理

NoteManager
SQLite数据库
Book模型
Note模型

2.2 类图设计

has
has
belongs to
manages
manages
ReadingNotesApp
+Widget build()
<<enumeration>>
BookStatus
+String label
+String emoji
+Color color
+reading()
+completed()
+wishlist()
+abandoned()
<<enumeration>>
NoteType
+String label
+String emoji
+Color color
+quote()
+thought()
+summary()
+question()
Book
+String id
+String title
+String author
+String cover
+int totalPages
+int currentPage
+BookStatus status
+DateTime addedDate
+DateTime startDate
+DateTime finishDate
+double rating
+double progress
+toMap()
+fromMap()
Note
+String id
+String bookId
+String bookTitle
+NoteType type
+String content
+int pageNumber
+String chapter
+DateTime createdAt
+toMap()
+fromMap()
DatabaseHelper
-Database _database
+get database
+insertBook()
+getBooks()
+updateBook()
+deleteBook()
+insertNote()
+getNotes()
+deleteNote()

2.3 页面导航流程

添加书籍
点击书籍
搜索
更新进度
添加笔记
删除书籍
笔记
统计
设置
应用启动
书架页面
用户操作
添加书籍表单
书籍详情
搜索页面
填写信息
保存书籍
详情操作
更新页码
添加笔记表单
确认删除
底部导航
笔记页面
统计页面
设置页面

2.4 数据流程

数据库 详情页 书架 用户 数据库 详情页 书架 用户 点击添加书籍 打开添加表单 填写书籍信息 保存书籍 保存成功 返回书架 加载书籍列表 返回书籍数据 显示更新后的列表 点击书籍 打开详情页 添加笔记 保存笔记 保存成功 显示笔记列表

三、核心模块设计

3.1 数据模型设计

3.1.1 书籍状态枚举 (BookStatus)
dart 复制代码 
enum BookStatus {
  reading(label: '在读', emoji: '📖', color: Color(0xFF4CAF50)),
  completed(label: '已读', emoji: '✅', color: Color(0xFF2196F3)),
  wishlist(label: '想读', emoji: '📚', color: Color(0xFFFF9800)),
  abandoned(label: '弃读', emoji: '❌', color: Color(0xFF9E9E9E));

  final String label;
  final String emoji;
  final Color color;
}
3.1.2 笔记类型枚举 (NoteType)
dart 复制代码 
enum NoteType {
  quote(label: '摘抄', emoji: '📝', color: Color(0xFF9C27B0)),
  thought(label: '感想', emoji: '💭', color: Color(0xFF00BCD4)),
  summary(label: '总结', emoji: '📋', color: Color(0xFFFF5722)),
  question(label: '疑问', emoji: '❓', color: Color(0xFF607D8B));

  final String label;
  final String emoji;
  final Color color;
}
3.1.3 书籍模型 (Book)
dart 复制代码 
class Book {
  final String id;
  final String title;
  final String author;
  final String? cover;
  final int totalPages;
  final int currentPage;
  final BookStatus status;
  final DateTime addedDate;
  final DateTime? startDate;
  final DateTime? finishDate;
  final double rating;

  double get progress => totalPages > 0 ? currentPage / totalPages : 0;

  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'title': title,
      'author': author,
      'totalPages': totalPages,
      'currentPage': currentPage,
      'status': status.index,
      // ...
    };
  }
}
3.1.4 阅读状态分布示例

56% 30% 11% 4% 书架状态分布示例 在读 已读 想读 弃读

3.2 数据库设计

3.2.1 数据库表结构

books 表（书籍信息）

字段名 类型 说明
id TEXT 主键，时间戳
title TEXT 书名
author TEXT 作者
cover TEXT 封面图片路径
totalPages INTEGER 总页数
currentPage INTEGER 当前页码
status INTEGER 状态索引
addedDate TEXT 添加日期
startDate TEXT 开始阅读日期
finishDate TEXT 完成阅读日期
rating REAL 评分
description TEXT 简介

notes 表（笔记信息）

字段名 类型 说明
id TEXT 主键
bookId TEXT 关联书籍ID
bookTitle TEXT 书名（冗余）
type INTEGER 笔记类型索引
content TEXT 笔记内容
pageNumber INTEGER 页码
chapter TEXT 章节
createdAt TEXT 创建时间
updatedAt TEXT 更新时间

3.3 页面结构设计

3.3.1 主页面布局

HomePage
IndexedStack
书架页面
笔记页面
统计页面
设置页面
NavigationBar
书架 Tab
笔记 Tab
统计 Tab
设置 Tab

3.3.2 书架页面结构

书架页面
AppBar
阅读进度卡片
书籍网格
添加书籍按钮
正在阅读数量
进度条显示
书籍卡片
封面区域
书籍信息
阅读进度

3.3.3 书籍详情结构

书籍详情
顶部信息区
进度更新区
添加笔记区
笔记列表区
书名作者
阅读状态
进度条
笔记类型选择
内容输入
页码章节

3.4 笔记分享逻辑

微信
QQ
复制
其他
点击分享笔记
获取笔记内容
格式化分享文本
调用Share.share
选择分享方式
分享到微信
分享到QQ
复制到剪贴板
其他应用

四、UI设计规范

4.1 配色方案

应用以温暖的棕色为主色调，营造书香气息：

颜色类型 色值 用途
主色 #795548 (Brown) 导航、主题元素
辅助色 #A1887F 次要按钮
在读状态 #4CAF50 正在阅读
已读状态 #2196F3 已完成阅读
想读状态 #FF9800 想要阅读
弃读状态 #9E9E9E 放弃阅读
背景色 #FAFAFA 页面背景
卡片背景 #FFFFFF 信息卡片

4.2 状态配色

状态 色值 视觉效果
在读 #4CAF50 绿色
已读 #2196F3 蓝色
想读 #FF9800 橙色
弃读 #9E9E9E 灰色

4.3 笔记类型配色

类型 色值 视觉效果
摘抄 #9C27B0 紫色
感想 #00BCD4 青色
总结 #FF5722 橙红
疑问 #607D8B 灰蓝

4.4 字体规范

元素 字号 字重 颜色
页面标题 24px Bold 主色
书名 16px Bold #000000
作者 12px Regular #666666
进度文字 12px Regular #888888
笔记内容 14px Regular #000000

4.5 组件规范

4.5.1 书籍卡片
复制代码 
┌─────────────────────────┐
│  ┌─────────────────┐    │
│  │                 │ 📖 │
│  │     书籍封面     │    │
│  │                 │    │
│  └─────────────────┘    │
│  书名                   │
│  作者                   │
│  ══════════════════    │
│  50/200页              │
└─────────────────────────┘
4.5.2 笔记卡片
复制代码 
┌─────────────────────────────────────┐
│  📝 摘抄                    书名    │
│                                     │
│  这是一段精彩的摘抄内容，展示了作者  │
│  深刻的思考和优美的文字...          │
│                                     │
│  第50页 · 第三章              4月12日│
└─────────────────────────────────────┘
4.5.3 阅读进度卡片
复制代码 
┌─────────────────────────────────────┐
│  正在阅读                           │
│  3 本书                             │
│                                     │
│  Flutter开发指南        35%        │
│  ═══════════════●══════════        │
│                                     │
│  鸿蒙OS应用开发         72%        │
│  ══════════════════════●═══        │
└─────────────────────────────────────┘

五、核心功能实现

5.1 书籍管理实现

dart 复制代码 
class DatabaseHelper {
  static Future<void> insertBook(Book book) async {
    final db = await database;
    await db.insert('books', book.toMap(),
        conflictAlgorithm: ConflictAlgorithm.replace);
  }

  static Future<List<Book>> getBooks() async {
    final db = await database;
    final maps = await db.query('books', orderBy: 'addedDate DESC');
    return maps.map((m) => Book.fromMap(m)).toList();
  }

  static Future<void> updateBook(Book book) async {
    final db = await database;
    await db.update('books', book.toMap(),
        where: 'id = ?', whereArgs: [book.id]);
  }

  static Future<void> deleteBook(String id) async {
    final db = await database;
    await db.delete('books', where: 'id = ?', whereArgs: [id]);
    await db.delete('notes', where: 'bookId = ?', whereArgs: [id]);
  }
}

5.2 笔记管理实现

dart 复制代码 
static Future<void> insertNote(Note note) async {
  final db = await database;
  await db.insert('notes', note.toMap(),
      conflictAlgorithm: ConflictAlgorithm.replace);
}

static Future<List<Note>> getNotes({String? bookId}) async {
  final db = await database;
  List<Map<String, dynamic>> maps;
  if (bookId != null) {
    maps = await db.query('notes',
        where: 'bookId = ?', whereArgs: [bookId], orderBy: 'createdAt DESC');
  } else {
    maps = await db.query('notes', orderBy: 'createdAt DESC');
  }
  return maps.map((m) => Note.fromMap(m)).toList();
}

5.3 进度更新实现

dart 复制代码 
void _updateProgress() {
  final page = int.tryParse(_pageController.text);
  if (page == null || page < 0 || page > _book.totalPages) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('请输入有效页码')),
    );
    return;
  }

  BookStatus newStatus = _book.status;
  if (page >= _book.totalPages) {
    newStatus = BookStatus.completed;
  }

  setState(() {
    _book = _book.copyWith(
      currentPage: page,
      status: newStatus,
      finishDate: newStatus == BookStatus.completed ? DateTime.now() : null,
    );
  });
  widget.onUpdate(_book);
}

5.4 笔记分享实现

dart 复制代码 
void _shareNote(Note note) {
  Share.share('${note.bookTitle}\n\n${note.content}');
}

六、交互设计

6.1 添加书籍流程

数据库 表单 书架 用户 数据库 表单 书架 用户 点击添加书籍 打开添加表单 显示表单界面 输入书名 输入作者 输入页数 选择状态 点击保存 验证输入 保存书籍 保存成功 关闭表单 显示更新后的书架

6.2 添加笔记流程

分享
删除
打开书籍详情
选择笔记类型
输入笔记内容
可选: 输入页码
可选: 输入章节
点击添加
保存笔记
显示笔记列表
点击笔记
查看详情
用户操作
分享笔记
删除笔记

6.3 阅读进度更新流程

添加书籍
开始阅读
完成阅读
放弃阅读
放弃阅读
重新阅读
重新想读
想读
在读
已读
弃读

七、扩展功能规划

7.1 后续版本规划

2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 2024-02-25 2024-03-03 2024-03-10 基础UI框架 书籍管理 笔记记录 进度追踪 笔记分享 阅读提醒 书籍封面 数据备份 云端同步 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 读书笔记开发计划

7.2 功能扩展建议

7.2.1 高级笔记功能

笔记功能：

  • 笔记标签系统
  • 笔记搜索功能
  • 笔记导出PDF
  • 笔记关联推荐
7.2.2 阅读分析功能

阅读分析：

  • 阅读时长统计
  • 阅读速度分析
  • 阅读习惯洞察
  • 年度阅读报告
7.2.3 社交分享功能

社交功能：

  • 笔记分享到社交平台
  • 书评撰写发布
  • 读书小组讨论
  • 好友阅读动态

八、注意事项

8.1 开发注意事项

  1. 数据库操作：使用异步操作，避免阻塞UI线程

  2. 数据关联：删除书籍时同步删除相关笔记

  3. 进度计算：注意页码边界值处理

  4. 状态转换：正确处理书籍状态转换逻辑

  5. 性能优化：大量书籍时使用分页加载

8.2 常见问题

问题 原因 解决方案
书籍添加失败 书名为空 添加必填验证
进度更新错误 页码超出范围 添加范围检查
笔记保存失败 内容为空 添加内容验证
状态不更新 进度达到100% 自动更新状态
分享失败 权限未申请 检查分享权限

8.3 使用技巧

📚 读书笔记使用技巧 📚

书籍管理技巧

  • 及时更新阅读进度
  • 合理设置阅读状态
  • 定期整理书架
  • 善用搜索功能

笔记记录技巧

  • 分类记录不同类型笔记
  • 标注页码方便查找
  • 写下阅读感想
  • 定期回顾笔记

阅读习惯养成

  • 设置阅读提醒
  • 保持每日阅读
  • 记录阅读心得
  • 分享精彩内容

九、运行说明

9.1 环境要求

环境 版本要求
Flutter SDK >= 3.0.0
Dart SDK >= 2.17.0
鸿蒙OS API 21+
Android API 21+
Web浏览器 Chrome 90+

9.2 依赖配置

在 pubspec.yaml 中添加以下依赖：

yaml 复制代码 
dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.5.3
  share_plus: ^10.1.4
  sqflite: ^2.4.1
  path: ^1.9.0

9.3 运行命令

bash 复制代码 
# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_reading_notes.dart --web-port 8201

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_reading_notes.dart

# 代码分析
flutter analyze lib/main_reading_notes.dart

十、总结

读书笔记应用是一款专为阅读爱好者设计的工具，支持记录读书笔记、书籍管理、阅读进度跟踪，以及笔记导出分享。应用采用 Material Design 3 设计规范，以温暖的棕色为主色调，营造书香气息。

核心功能涵盖书籍管理、阅读进度、笔记记录、笔记分享、书籍封面、阅读提醒、书籍搜索、阅读统计八大模块。用户可以轻松管理个人书单、记录阅读感悟、追踪阅读进度，让阅读更有价值。

应用支持4种书籍状态（在读、已读、想读、弃读）和4种笔记类型（摘抄、感想、总结、疑问），使用SQLite数据库持久化存储，支持笔记分享和阅读提醒。通过本应用，希望能够帮助用户养成良好的阅读习惯，让阅读成为生活的一部分。

读书笔记------让阅读更有价值

相关推荐
Utopia^3 小时前
鸿蒙flutter第三方库适配 - 图片压缩工具
flutter·华为·harmonyos
SoraLuna4 小时前
「鸿蒙智能体实战记录 11」年俗文化展示卡片开发与多段内容结构化呈现实现
华为·harmonyos
Ww.xh4 小时前
OpenHarmony API8升API9：权限与接口变更实战指南
harmonyos
梁山好汉（Ls_man）5 小时前
鸿蒙_自定义组件包含多个引用自定义构建函数@BuilderParam时的用法
华为·harmonyos·鸿蒙·arkui
见山是山-见水是水6 小时前
鸿蒙flutter第三方库适配 - 车辆管理
flutter·华为·harmonyos
Utopia^7 小时前
鸿蒙flutter第三方库适配 - 番茄钟专注
flutter·华为·harmonyos
阿健君8 小时前
Harmony NDK 开发
harmonyos
UnicornDev9 小时前
【HarmonyOS 6】鸿蒙原生应用智能体接入
华为·harmonyos·arkts·鸿蒙·鸿蒙系统
梦想不只是梦与想9 小时前
鸿蒙中 PhotoViewPicker：选择图片或视频
harmonyos·鸿蒙·photoviewpicker
热门推荐
01GitHub 镜像站点022026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元03一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛04基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南05免费！不限量！用opencode接入英伟达（NVIDIA）大模型，轻松打造你的 AI 编程助手06Oh My Codex 快速使用指南07从限购到畅通：GLM-5.1 Coding Plan接入攻略08CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南09LLM Wiki：让大模型替你打理知识库的完整指南10AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析