开源鸿蒙跨平台Flutter开发:单词记忆应用
摘要: 开源鸿蒙跨平台社区推出了一款基于艾宾浩斯遗忘曲线的单词记忆应用。该应用提供单词卡片、拼写测试、选择题等多种学习模式,支持单词分类管理和学习进度统计。核心功能包括智能复习计划、难度分级和可视化学习数据,采用Flutter框架开发,兼容鸿蒙OS和Web平台。应用界面以绿色为主色调,包含学习、复习、单词库和统计四大模块,帮助用户科学高效地记忆单词。技术栈包含Flutter 3.0+和Dart 2
欢迎加入开源鸿蒙跨平台社区:
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图




1.1 应用简介
单词记忆是一款高效学习工具应用,基于艾宾浩斯遗忘曲线理论,帮助用户科学记忆单词。支持单词库管理、智能复习计划、学习进度统计等功能,让用户轻松掌握海量词汇。应用内置多种学习模式,包括单词卡片、拼写测试、选择题等,满足不同学习需求。
应用以清新的绿色为主色调,象征知识的成长与希望。涵盖单词学习、复习计划、单词库、学习统计四大模块。用户可以添加单词、制定复习计划、跟踪学习进度,实现高效记忆。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 单词学习 | 单词卡片学习模式 | 滑动卡片 |
| 复习计划 | 艾宾浩斯遗忘曲线 | 时间算法 |
| 单词测试 | 多种测试模式 | 题目生成 |
| 单词库 | 单词分类管理 | 列表展示 |
| 学习统计 | 学习进度可视化 | 图表展示 |
| 收藏夹 | 重点单词收藏 | 标记功能 |
1.3 艾宾浩斯遗忘曲线复习间隔
| 序号 | 复习次数 | 间隔时间 | 记忆保持率 |
|---|---|---|---|
| 1 | 第1次 | 1天后 | 80% |
| 2 | 第2次 | 2天后 | 85% |
| 3 | 第3次 | 4天后 | 90% |
| 4 | 第4次 | 7天后 | 93% |
| 5 | 第5次 | 15天后 | 95% |
| 6 | 第6次 | 30天后 | 97% |
1.4 学习模式定义
| 序号 | 模式名称 | Emoji | 描述 |
|---|---|---|---|
| 1 | 单词卡片 | 📝 | 滑动卡片学习单词 |
| 2 | 拼写测试 | ✍️ | 根据释义拼写单词 |
| 3 | 选择题 | 📊 | 选择正确释义 |
| 4 | 听写模式 | 🎧 | 听音拼写单词 |
| 5 | 混合模式 | 🎯 | 随机切换学习模式 |
1.5 单词难度等级
| 序号 | 难度等级 | Emoji | 描述 |
|---|---|---|---|
| 1 | 初级 | 🟢 | 基础词汇 |
| 2 | 中级 | 🟡 | 进阶词汇 |
| 3 | 高级 | 🔴 | 高级词汇 |
| 4 | 专业 | 🟣 | 专业领域词汇 |
1.6 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState | - |
| 数据存储 | 内存存储 | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.7 项目结构
lib/
└── main_word_memory.dart
├── WordMemoryApp # 应用入口
├── LearningMode # 学习模式枚举
├── DifficultyLevel # 难度等级枚举
├── Word # 单词模型
├── LearningRecord # 学习记录模型
├── ReviewPlan # 复习计划模型
├── WordMemoryHomePage # 主页面(底部导航)
├── _buildLearnPage # 学习页面
├── _buildReviewPage # 复习页面
├── _buildLibraryPage # 单词库页面
├── _buildStatsPage # 统计页面
├── WordCard # 单词卡片组件
├── ProgressBar # 进度条组件
└── StatsChart # 统计图表组件
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 艾宾浩斯复习流程
三、核心模块设计
3.1 数据模型设计
3.1.1 学习模式枚举 (LearningMode)
enum LearningMode {
flashCard(label: '单词卡片', emoji: '📝'),
spelling(label: '拼写测试', emoji: '✍️'),
multipleChoice(label: '选择题', emoji: '📊'),
dictation(label: '听写模式', emoji: '🎧'),
mixed(label: '混合模式', emoji: '🎯');
final String label;
final String emoji;
}
3.1.2 难度等级枚举 (DifficultyLevel)
enum DifficultyLevel {
beginner(label: '初级', emoji: '🟢', value: 1),
intermediate(label: '中级', emoji: '🟡', value: 2),
advanced(label: '高级', emoji: '🔴', value: 3),
professional(label: '专业', emoji: '🟣', value: 4);
final String label;
final String emoji;
final int value;
}
3.1.3 单词模型 (Word)
class Word {
final String id; // 单词ID
final String word; // 单词
final String phonetic; // 音标
final String meaning; // 释义
final String example; // 例句
final DifficultyLevel difficulty; // 难度等级
final List<String> tags; // 标签
final bool isFavorite; // 是否收藏
final DateTime createdAt; // 创建时间
}
3.1.4 学习记录模型 (LearningRecord)
class LearningRecord {
final String id; // 记录ID
final String wordId; // 单词ID
final DateTime learnedAt; // 学习时间
final int reviewCount; // 复习次数
final int correctCount; // 正确次数
final int wrongCount; // 错误次数
final double mastery; // 掌握程度
}
3.1.5 复习计划模型 (ReviewPlan)
class ReviewPlan {
final String id; // 计划ID
final String wordId; // 单词ID
final DateTime nextReview; // 下次复习时间
final int reviewStage; // 复习阶段
final bool isCompleted; // 是否完成
}
3.1.6 学习进度分布
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 学习页结构
3.2.3 复习页结构
3.2.4 单词库页结构
3.3 艾宾浩斯遗忘曲线算法
3.4 学习进度计算逻辑
四、UI设计规范
4.1 配色方案
应用以清新的绿色为主色调,象征知识的成长与希望:
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #4CAF50 (Green) | 导航、主题元素 |
| 辅助色 | #66BB6A | 学习页面 |
| 第三色 | #81C784 | 复习页面 |
| 强调色 | #A5D6A7 | 单词库页面 |
| 背景色 | #FAFAFA | 页面背景 |
| 卡片背景 | #FFFFFF | 单词卡片 |
4.2 难度等级颜色
| 难度 | 色值 | 视觉效果 |
|---|---|---|
| 初级 | #4CAF50 | 清新绿色 |
| 中级 | #FFC107 | 明亮黄色 |
| 高级 | #F44336 | 鲜艳红色 |
| 专业 | #9C27B0 | 深邃紫色 |
4.3 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 24px | Bold | 主色 |
| 单词 | 28px | Bold | #000000 |
| 音标 | 16px | Regular | #666666 |
| 释义 | 18px | Regular | #333333 |
| 例句 | 14px | Italic | #666666 |
4.4 组件规范
4.4.1 单词卡片
┌─────────────────────────────────────┐
│ ┌─────────────────────────────┐ │
│ │ │ │
│ │ abandon │ │
│ │ /əˈbændən/ │ │
│ │ │ │
│ │ v. 放弃,抛弃 │ │
│ │ │ │
│ │ He abandoned his plan. │ │
│ │ 他放弃了他的计划。 │ │
│ │ │ │
│ │ 🟢 初级 │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
4.4.2 学习模式选择
┌─────────────────────────────────────┐
│ 选择学习模式 │
│ │
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ 📝 │ │ ✍️ │ │ 📊 │ │
│ │卡片 │ │拼写 │ │选择 │ │
│ └──────┘ └──────┘ └──────┘ │
│ ┌──────┐ ┌──────┐ │
│ │ 🎧 │ │ 🎯 │ │
│ │听写 │ │混合 │ │
│ └──────┘ └──────┘ │
└─────────────────────────────────────┘
4.4.3 进度显示
┌─────────────────────────────────────┐
│ 今日学习进度 │
│ │
│ 已学习: 30/50 │
│ ────────────────●─────────── 60% │
│ │
│ 正确率: 85% │
│ ──────────────────────●───── 85% │
└─────────────────────────────────────┘
4.4.4 复习计划列表
┌─────────────────────────────────────┐
│ 复习计划 │
│ │
│ 📅 今天 (10个单词) │
│ ┌─────────────────────────────┐ │
│ │ abandon 🟢 ✅ 已复习 │ │
│ │ benefit 🟡 ⏳ 待复习 │ │
│ │ challenge 🔴 ⏳ 待复习 │ │
│ └─────────────────────────────┘ │
│ │
│ 📅 明天 (15个单词) │
│ ┌─────────────────────────────┐ │
│ │ develop 🟢 ⏳ 待复习 │ │
│ │ establish 🟡 ⏳ 待复习 │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
4.4.5 统计图表
┌─────────────────────────────────────┐
│ 学习统计 │
│ │
│ 本周学习 │
│ Mon ████████░░ 80% │
│ Tue ██████████ 100% │
│ Wed ███████░░░ 70% │
│ Thu █████████░ 90% │
│ Fri ██████░░░░ 60% │
│ Sat ████████░░ 80% │
│ Sun █████████░ 90% │
│ │
│ 总计: 500词 | 已掌握: 350词 │
└─────────────────────────────────────┘
五、核心功能实现
5.1 艾宾浩斯复习计划生成
class ReviewPlanner {
static List<int> reviewIntervals = [1, 2, 4, 7, 15, 30];
static DateTime calculateNextReview(int currentStage) {
if (currentStage >= reviewIntervals.length) {
return DateTime.now().add(Duration(days: 30));
}
return DateTime.now().add(Duration(days: reviewIntervals[currentStage]));
}
static ReviewPlan createReviewPlan(String wordId) {
return ReviewPlan(
id: 'plan_${DateTime.now().millisecondsSinceEpoch}',
wordId: wordId,
nextReview: calculateNextReview(0),
reviewStage: 0,
isCompleted: false,
);
}
static void updateReviewPlan(ReviewPlan plan, bool isCorrect) {
if (isCorrect) {
plan.reviewStage++;
plan.nextReview = calculateNextReview(plan.reviewStage);
} else {
plan.reviewStage = 0;
plan.nextReview = calculateNextReview(0);
}
}
}
5.2 单词卡片学习实现
class WordCard extends StatefulWidget {
final Word word;
final Function(bool) onResult;
_WordCardState createState() => _WordCardState();
}
class _WordCardState extends State<WordCard> {
bool _showMeaning = false;
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
_showMeaning = !_showMeaning;
});
},
child: Card(
elevation: 4.0,
child: Padding(
padding: EdgeInsets.all(24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
widget.word.word,
style: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 8.0),
Text(
widget.word.phonetic,
style: TextStyle(fontSize: 16.0, color: Colors.grey),
),
if (_showMeaning) ...[
SizedBox(height: 24.0),
Text(
widget.word.meaning,
style: TextStyle(fontSize: 20.0),
),
SizedBox(height: 16.0),
Text(
widget.word.example,
style: TextStyle(fontSize: 14.0, fontStyle: FontStyle.italic),
),
],
],
),
),
),
);
}
}
5.3 拼写测试实现
class SpellingTest extends StatefulWidget {
final Word word;
final Function(bool) onResult;
_SpellingTestState createState() => _SpellingTestState();
}
class _SpellingTestState extends State<SpellingTest> {
final _controller = TextEditingController();
bool _isCorrect = false;
bool _hasChecked = false;
void _checkAnswer() {
setState(() {
_isCorrect = _controller.text.toLowerCase() == widget.word.word.toLowerCase();
_hasChecked = true;
});
widget.onResult(_isCorrect);
}
Widget build(BuildContext context) {
return Column(
children: [
Text(
widget.word.meaning,
style: TextStyle(fontSize: 20.0),
),
SizedBox(height: 24.0),
TextField(
controller: _controller,
decoration: InputDecoration(
labelText: '请拼写单词',
border: OutlineInputBorder(),
),
),
SizedBox(height: 16.0),
ElevatedButton(
onPressed: _checkAnswer,
child: Text('检查答案'),
),
if (_hasChecked) ...[
SizedBox(height: 16.0),
Text(
_isCorrect ? '✅ 正确!' : '❌ 错误!正确答案: ${widget.word.word}',
style: TextStyle(
fontSize: 18.0,
color: _isCorrect ? Colors.green : Colors.red,
),
),
],
],
);
}
}
5.4 选择题实现
class MultipleChoice extends StatefulWidget {
final Word word;
final List<Word> allWords;
final Function(bool) onResult;
_MultipleChoiceState createState() => _MultipleChoiceState();
}
class _MultipleChoiceState extends State<MultipleChoice> {
late List<String> _options;
String? _selectedOption;
bool _hasAnswered = false;
void initState() {
super.initState();
_generateOptions();
}
void _generateOptions() {
final random = Random();
_options = [widget.word.meaning];
while (_options.length < 4) {
final randomWord = widget.allWords[random.nextInt(widget.allWords.length)];
if (!_options.contains(randomWord.meaning)) {
_options.add(randomWord.meaning);
}
}
_options.shuffle();
}
void _selectOption(String option) {
setState(() {
_selectedOption = option;
_hasAnswered = true;
});
widget.onResult(option == widget.word.meaning);
}
Widget build(BuildContext context) {
return Column(
children: [
Text(
widget.word.word,
style: TextStyle(fontSize: 28.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 24.0),
...(_options.map((option) => Padding(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: ListTile(
title: Text(option),
tileColor: _hasAnswered && option == widget.word.meaning
? Colors.green.withValues(alpha: 0.3)
: _hasAnswered && option == _selectedOption
? Colors.red.withValues(alpha: 0.3)
: null,
onTap: _hasAnswered ? null : () => _selectOption(option),
),
))),
],
);
}
}
5.5 学习进度统计实现
class LearningStats {
static Map<String, int> calculateStats(List<LearningRecord> records) {
final totalWords = records.length;
final masteredWords = records.where((r) => r.mastery >= 0.9).length;
final learningWords = records.where((r) => r.mastery >= 0.5 && r.mastery < 0.9).length;
final newWords = records.where((r) => r.mastery < 0.5).length;
final totalReviews = records.fold<int>(0, (sum, r) => sum + r.reviewCount);
final totalCorrect = records.fold<int>(0, (sum, r) => sum + r.correctCount);
final accuracy = totalReviews > 0 ? (totalCorrect / totalReviews * 100).toStringAsFixed(1) : '0.0';
return {
'totalWords': totalWords,
'masteredWords': masteredWords,
'learningWords': learningWords,
'newWords': newWords,
'totalReviews': totalReviews,
'accuracy': double.parse(accuracy),
};
}
static List<double> calculateWeeklyProgress(List<LearningRecord> records) {
final now = DateTime.now();
final weeklyData = List<double>.filled(7, 0);
for (int i = 0; i < 7; i++) {
final day = now.subtract(Duration(days: 6 - i));
final dayRecords = records.where((r) =>
r.learnedAt.year == day.year &&
r.learnedAt.month == day.month &&
r.learnedAt.day == day.day
);
weeklyData[i] = dayRecords.length.toDouble();
}
return weeklyData;
}
}
六、交互设计
6.1 学习流程
6.2 复习流程
6.3 单词库管理流程
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 发音功能
发音功能:
- 单词发音播放
- 音标显示
- 发音速度调节
- 英式/美式发音
7.2.2 AI智能推荐
AI功能:
- 智能单词推荐
- 学习路径规划
- 薄弱环节分析
- 个性化学习计划
7.2.3 社交分享
分享功能:
- 学习成果分享
- 排行榜功能
- 学习打卡
- 好友PK
八、注意事项
8.1 开发注意事项
-
数据持久化:学习记录需持久化存储
-
复习提醒:需实现定时提醒功能
-
性能优化:大量单词时需优化加载性能
-
状态管理:学习进度需实时更新
-
用户体验:学习过程需流畅自然
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 复习计划不准 | 时间计算错误 | 检查日期逻辑 |
| 单词重复 | 数据未去重 | 添加唯一约束 |
| 进度不更新 | 状态未刷新 | 调用setState |
| 学习记录丢失 | 未持久化 | 实现数据存储 |
| 卡片卡顿 | 渲染过慢 | 优化UI性能 |
8.3 使用技巧
📚 单词记忆技巧 📚
学习模式选择
- 单词卡片:适合初次学习,快速浏览
- 拼写测试:适合强化记忆,加深印象
- 选择题:适合复习巩固,检验效果
- 听写模式:适合提高听力,综合训练
复习策略建议
- 每日坚持复习,不要中断
- 错误单词重点标记,加强复习
- 利用碎片时间,随时学习
- 定期回顾已掌握单词
记忆技巧提示
- 结合例句理解单词用法
- 联想记忆,建立词汇网络
- 分类记忆,提高效率
- 多感官学习,加深记忆
九、运行说明
9.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 鸿蒙OS | API 21+ |
| Web浏览器 | Chrome 90+ |
9.2 运行命令
# 查看可用设备
flutter devices
# 运行到Web服务器
flutter run -d web-server -t lib/main_word_memory.dart --web-port 8140
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_word_memory.dart
# 代码分析
flutter analyze lib/main_word_memory.dart
十、总结
单词记忆应用是一款基于艾宾浩斯遗忘曲线理论的高效学习工具,通过单词学习、复习计划、单词库、学习统计四大模块,帮助用户科学记忆单词。应用支持5种学习模式、4种难度等级,让用户根据自身需求选择最适合的学习方式。
核心功能涵盖单词卡片学习、艾宾浩斯复习计划、学习进度统计、单词库管理四大模块。学习模式包括单词卡片、拼写测试、选择题、听写模式、混合模式;复习计划基于艾宾浩斯遗忘曲线,科学安排复习时间;学习进度统计提供详细的学习数据分析;单词库管理支持分类、搜索、收藏等功能。
应用采用 Material Design 3 设计规范,以清新的绿色为主色调,象征知识的成长与希望。通过本应用,希望能够帮助用户高效记忆单词,轻松掌握海量词汇,实现语言学习的突破。
单词记忆——科学记忆,高效学习
更多推荐



所有评论(0)