Flutter 框架跨平台鸿蒙开发 - 知识卡片整理

Utopia^

401人浏览 · 2026-04-09 22:03:00

Utopia^ · 2026-04-09 22:03:00 发布

知识卡片整理应用

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

一、项目概述

运行效果图

1.1 应用简介

知识卡片整理是一款专注于碎片化知识管理的效率工具应用。在信息爆炸的时代，我们每天接触大量碎片化信息，但往往难以有效整理和记忆。知识卡片整理应用将碎片化知识转化为结构化的知识卡片，通过一键摘录、标签分类、间隔复习等功能，帮助用户构建完整的知识体系。

应用借鉴了卡片笔记法、间隔重复记忆等科学方法，让知识管理变得简单高效。每张卡片都是一个独立的知识单元，可以灵活组合、检索和复习。

1.2 核心理念

知识在于积累，积累在于方法。知识卡片整理的设计理念基于以下原则:

设计原则	理论基础	应用体现
原子化知识	卡片笔记法	每张卡片承载单一知识点
关联构建	知识图谱理论	通过标签和链接建立关联
间隔复习	艾宾浩斯遗忘曲线	智能安排复习时间
渐进积累	复杂系统理论	从碎片到体系的渐进构建

1.3 核心功能

1.4 卡片类型分类

应用支持多种卡片类型:

类型	图标	颜色	描述	典型场景
概念卡片	💡	#FFD700	定义和解释概念	专业术语、理论概念
知识点	📚	#4CAF50	具体知识点记录	学习笔记、技术要点
引用卡片	📖	#2196F3	书籍文章摘录	读书笔记、金句收藏
问答卡片	❓	#9C27B0	问题和答案形式	考试复习、面试准备
代码卡片	💻	#00BCD4	代码片段记录	编程技巧、算法实现
清单卡片	✅	#FF9800	步骤和流程清单	操作步骤、工作流程
思维导图	🧠	#E91E63	思维和想法记录	创意灵感、头脑风暴
资源卡片	🔗	#607D8B	资源链接收藏	网址收藏、工具推荐

1.5 复习状态系统

状态	图标	颜色	描述	下次复习时间
新卡片	🆕	#2196F3	尚未开始学习	立即
学习中	📖	#FF9800	正在初步学习	1天后
熟悉	✨	#4CAF50	基本掌握	3天后
熟练	⭐	#9C27B0	记忆牢固	7天后
精通	🏆	#FFD700	完全掌握	30天后

1.6 技术栈

技术领域	技术选型	版本要求
开发框架	Flutter	>= 3.0.0
编程语言	Dart	>= 2.17.0
设计规范	Material Design 3	-
动画控制	AnimationController	-
状态管理	setState	-
目标平台	鸿蒙OS / Web	API 21+

1.7 项目结构

lib/
└── main_knowledge_cards.dart
    ├── KnowledgeCardsApp       # 应用入口
    ├── CardType                # 卡片类型枚举
    ├── ReviewStatus            # 复习状态枚举
    ├── KnowledgeCard           # 知识卡片模型
    ├── ReviewRecord            # 复习记录模型
    ├── KnowledgeCardsPage      # 主页面(底部导航)
    ├── _buildCardsView         # 卡片列表视图
    ├── _buildReviewView        # 复习视图
    ├── _buildTagsView          # 标签管理视图
    └── _buildStatsView         # 统计视图

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 卡片创建流程

2.4 间隔复习流程

三、核心模块设计

3.1 数据模型设计

3.1.1 卡片类型枚举 (CardType)

enum CardType {
  concept('概念卡片', '💡', Color(0xFFFFD700), '定义和解释概念'),
  knowledge('知识点', '📚', Color(0xFF4CAF50), '具体知识点记录'),
  quote('引用卡片', '📖', Color(0xFF2196F3), '书籍文章摘录'),
  qa('问答卡片', '❓', Color(0xFF9C27B0), '问题和答案形式'),
  code('代码卡片', '💻', Color(0xFF00BCD4), '代码片段记录'),
  checklist('清单卡片', '✅', Color(0xFFFF9800), '步骤和流程清单'),
  mindmap('思维导图', '🧠', Color(0xFFE91E63), '思维和想法记录'),
  resource('资源卡片', '🔗', Color(0xFF607D8B), '资源链接收藏');

  final String label;
  final String icon;
  final Color color;
  final String description;
}

3.1.2 复习状态枚举 (ReviewStatus)

enum ReviewStatus {
  newCard('新卡片', '🆕', Color(0xFF2196F3), 0),
  learning('学习中', '📖', Color(0xFFFF9800), 1),
  familiar('熟悉', '✨', Color(0xFF4CAF50), 3),
  proficient('熟练', '⭐', Color(0xFF9C27B0), 7),
  mastered('精通', '🏆', Color(0xFFFFD700), 30);

  final String label;
  final String icon;
  final Color color;
  final int intervalDays;
}

3.1.3 知识卡片模型 (KnowledgeCard)

class KnowledgeCard {
  final String id;
  final String title;
  final String content;
  final CardType type;
  ReviewStatus status;
  List<String> tags;
  final DateTime createdAt;
  DateTime lastReviewAt;
  DateTime nextReviewAt;
  int reviewCount;
  double difficulty;
  List<String> links;

  KnowledgeCard({
    required this.id,
    required this.title,
    required this.content,
    required this.type,
    this.status = ReviewStatus.newCard,
    List<String>? tags,
    DateTime? createdAt,
    DateTime? lastReviewAt,
    DateTime? nextReviewAt,
    this.reviewCount = 0,
    this.difficulty = 0.5,
    List<String>? links,
  });

  void updateReview(int quality) {
    reviewCount++;
    lastReviewAt = DateTime.now();
    
    if (quality < 2) {
      status = ReviewStatus.learning;
    } else if (quality < 4) {
      status = ReviewStatus.values[min(status.index + 1, 4)];
    }
    
    nextReviewAt = DateTime.now().add(Duration(days: status.intervalDays));
  }
}

3.1.4 复习记录模型 (ReviewRecord)

class ReviewRecord {
  final String id;
  final String cardId;
  final DateTime reviewTime;
  final int quality;
  final int durationSeconds;
  final String? notes;

  ReviewRecord({
    required this.id,
    required this.cardId,
    required this.reviewTime,
    required this.quality,
    this.durationSeconds = 0,
    this.notes,
  });
}

3.2 间隔重复算法

3.2.1 SM-2算法简化版

下次复习间隔计算:

$I_{n+1} = \begin{cases} 1 & \text{if } q < 3 \\ I_n \times EF & \text{if } q \geq 3 \end{cases}$

其中:

$I_n$ = 第n次复习后的间隔天数
$q$ = 回忆质量评分(0-5)
$E F$ = 难度因子

难度因子更新:

$\times (0.08 + (5 - q) \times 0.02))$

3.2.2 复习队列优先级

$w_1 \cdot \frac{1}{D + 1} + w_2 \cdot \frac{1}{R + 1} + w_3 \cdot (1 - S)$

其中:

$D$ = 延迟天数
$R$ = 复习次数
$S$ = 掌握程度
$w_i$ = 权重系数

3.3 标签系统设计

3.3.1 标签分类

标签类型	图标	示例
学科标签	📖	数学、物理、编程
主题标签	🏷️	算法、设计模式、架构
状态标签	📌	重要、待办、已掌握
来源标签	📚	书籍、课程、文章
自定义标签	⭐	用户自定义

3.3.2 标签关联

class TagRelation {
  final String tag;
  final int cardCount;
  final List<String> relatedTags;
  final DateTime lastUsed;
}

四、界面设计

4.1 主页面布局

4.2 卡片列表视图

核心组件:

组件	功能	交互
搜索栏	搜索卡片标题和内容	输入关键词搜索
筛选器	按类型、标签、状态筛选	点击选择筛选条件
卡片列表	显示卡片缩略信息	点击查看详情
快速操作	创建、复习、导出	点击执行操作
批量选择	多选卡片进行操作	长按进入选择模式

4.3 卡片详情页

┌─────────────────────────────────────┐
│  ← 卡片详情              ✏️ 🗑️     │
├─────────────────────────────────────┤
│  💡 概念卡片                        │
│  ─────────────────────────────────  │
│                                     │
│  标题: 什么是闭包                   │
│                                     │
│  内容:                              │
│  闭包是指有权访问另一个函数作用域    │
│  中变量的函数。创建闭包的常见方式    │
│  是在一个函数内部创建另一个函数...   │
│                                     │
│  ─────────────────────────────────  │
│  📌 标签: JavaScript, 函数, 概念    │
│                                     │
│  📊 学习状态                        │
│  ─────────────────────────────────  │
│  状态: ✨ 熟悉                      │
│  复习次数: 5次                      │
│  上次复习: 2天前                    │
│  下次复习: 1天后                    │
│                                     │
│  🔗 关联卡片                        │
│  ─────────────────────────────────  │
│  • 作用域链                         │
│  • 高阶函数                         │
│                                     │
│  [开始复习]  [编辑卡片]             │
└─────────────────────────────────────┘

4.4 复习界面

复习流程展示:

┌─────────────────────────────────────┐
│  复习中心                    5/20   │
├─────────────────────────────────────┤
│                                     │
│  💡 概念卡片                        │
│  ─────────────────────────────────  │
│                                     │
│  问题:                              │
│  什么是闭包？请简述闭包的特点。      │
│                                     │
│  ─────────────────────────────────  │
│                                     │
│  [点击显示答案]                     │
│                                     │
│  ─────────────────────────────────  │
│  评分:                              │
│  😢忘记  😓困难  😐一般  😊简单    │
│                                     │
└─────────────────────────────────────┘

五、复习系统设计

5.1 记忆曲线可视化

class MemoryCurvePainter extends CustomPainter {
  final List<double> retentionRates;
  final List<DateTime> reviewTimes;
  
  @override
  void paint(Canvas canvas, Size size) {
    _drawAxis(canvas, size);
    _drawCurve(canvas, size);
    _drawReviewPoints(canvas, size);
  }
}

5.2 复习提醒机制

提醒类型	触发条件	提醒方式
每日提醒	固定时间	推送通知
到期提醒	卡片到期	应用内提示
目标提醒	未完成目标	激励提示
周期提醒	周期性复习	日历提醒

5.3 学习统计

统计指标:

指标	计算方式	说明
掌握率	已掌握/总数	整体学习进度
复习完成率	已复习/应复习	当日完成情况
记忆保持率	正确回忆/总复习	记忆效果评估
学习时长	累计复习时间	学习投入统计

六、数据可视化

6.1 学习进度图

6.2 知识类型分布

概念卡片    ████████████████░░░░  30%
知识点      ████████████░░░░░░░░  25%
问答卡片    ████████░░░░░░░░░░░░  20%
代码卡片    ██████░░░░░░░░░░░░░░  15%
其他        ████░░░░░░░░░░░░░░░░  10%

6.3 记忆曲线图

保持率
100% ┤
 80% ┤╲
 60% ┤  ╲    ╱╲    ╱╲
 40% ┤    ╲  ╱  ╲  ╱  ╲
 20% ┤      ╲╱    ╲╱    ╲
  0% └─────────────────────► 时间
     1天  3天  7天  15天 30天

七、应用截图示意

7.1 首页

┌─────────────────────────────────────┐
│  🔍 搜索卡片...            ➕ ⚙️    │
├─────────────────────────────────────┤
│  ┌─────────────────────────────┐   │
│  │  📊 今日复习                │   │
│  │  待复习: 12张    已完成: 8张 │   │
│  │  ████████████████░░░░  67%  │   │
│  └─────────────────────────────┘   │
│                                     │
│  快速操作                          │
│  ➕新建  📖复习  📥导入  📤导出    │
│                                     │
│  最近添加                          │
│  ┌─────────────────────────────┐   │
│  │ 💡 什么是闭包               │   │
│  │ JavaScript · 概念 · ✨熟悉  │   │
│  └─────────────────────────────┘   │
│  ┌─────────────────────────────┐   │
│  │ ❓ HTTP和HTTPS的区别        │   │
│  │ 网络 · 问答 · 📖学习中      │   │
│  └─────────────────────────────┘   │
│                                     │
│  热门标签                          │
│  JavaScript  Python  算法  设计模式 │
└─────────────────────────────────────┘
│  📚卡片  📖复习  🏷️标签  📊统计    │
└─────────────────────────────────────┘

7.2 创建卡片页

┌─────────────────────────────────────┐
│  ← 创建卡片                         │
├─────────────────────────────────────┤
│  卡片类型                          │
│  💡概念  📚知识  📖引用  ❓问答     │
│  💻代码  ✅清单  🧠思维  🔗资源     │
│                                     │
│  标题                              │
│  ┌─────────────────────────────┐   │
│  │ 什么是设计模式              │   │
│  └─────────────────────────────┘   │
│                                     │
│  内容                              │
│  ┌─────────────────────────────┐   │
│  │ 设计模式是软件开发中常见    │   │
│  │ 问题的解决方案，是经过验证  │   │
│  │ 的最佳实践...               │   │
│  └─────────────────────────────┘   │
│                                     │
│  标签                              │
│  ┌─────────────────────────────┐   │
│  │ 软件工程  设计模式  概念    │   │
│  └─────────────────────────────┘   │
│                                     │
│  难度: ████████░░░░░░░░ 中等       │
│                                     │
│  ┌─────────────────────────────┐   │
│  │         保 存               │   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘

八、后续规划

8.1 功能迭代

版本	功能	状态
v1.0	基础卡片管理、复习功能	✅ 已完成
v1.1	图片识别、语音输入	🚧 开发中
v1.2	知识图谱、关联推荐	📋 计划中
v1.3	云同步、多设备	📋 计划中
v2.0	AI辅助学习、智能推荐	📋 计划中

8.2 技术优化

接入OCR文字识别
集成语音转文字
优化复习算法
数据云端同步
支持Markdown渲染

让知识有序，让学习高效

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

【开发者故事】基于小艺开放平台构建智能体，奇妙工具箱装上 “AI 大脑“

HarmonyOS开发者社区

『速通攻略』通过DevEco Studio插件快速集成鸿蒙生态伙伴SDK

是鸿蒙生态伙伴SDK资源核心阵地，整合产业链资源，赋能鸿蒙应用开发者，帮助开发者快速获取能力，简化选型流程，降低接入成本，提速应用开发。DevEco Studio左侧导航栏“More tool windows”—“鸿蒙生态伙伴SDK市场”或“Partner SDK”。支持一键添加SDK至工程，快速集成。DevEco Studio上方导航栏“工具”—“鸿蒙生态伙伴SDK市场”或“Partner SD