开源鸿蒙跨平台Flutter开发：古诗词学习应用

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

一、项目概述

运行效果图

1.1 应用简介

古诗词学习是一款传统文化学习应用，收录了唐诗、宋词、元曲等经典古诗词作品。应用提供原文、注释、赏析、作者介绍等丰富内容，支持分类浏览、搜索查询、收藏管理、学习记录等功能，帮助用户深入了解古诗词文化，传承中华优秀传统文化。

应用以典雅的墨绿色为主色调，象征传统文化的深厚底蕴与文人雅士的气质。涵盖诗词浏览、分类学习、收藏管理、学习记录四大模块。用户可以浏览经典诗词、查看详细注释、学习赏析内容、收藏喜欢的作品，系统地学习古诗词知识。

1.2 核心功能

功能模块	功能描述	实现方式
诗词浏览	展示诗词原文、注释、赏析	卡片展示
分类浏览	按朝代、题材、作者分类	分类列表
搜索功能	按标题、作者、内容搜索	搜索框
收藏管理	收藏喜欢的诗词	收藏列表
学习记录	记录学习进度和时长	数据统计
朗读功能	诗词朗读和拼音标注	音频播放
分享功能	分享诗词到社交平台	分享接口
学习打卡	每日学习打卡记录	打卡日历

1.3 朝代分类定义

序号	朝代名称	Emoji	描述	代表作品数
1	唐代	📜	诗歌鼎盛时期	120首
2	宋代	📖	词作辉煌时代	80首
3	元代	🎭	曲作兴起时期	40首
4	明代	📚	诗词复兴时期	30首
5	清代	📝	古典诗词总结	25首
6	先秦	🏛️	诗歌起源时期	15首

1.4 题材分类定义

序号	题材名称	Emoji	描述	代表作品
1	山水田园	🏔️	描写自然风光	《山居秋暝》
2	边塞军旅	⚔️	描写边塞生活	《出塞》
3	咏史怀古	🏛️	借古讽今	《赤壁》
4	送别离别	👋	离别之情	《送元二使安西》
5	思乡怀人	🌙	思念之情	《静夜思》
6	爱情婚姻	💕	爱情主题	《鹊桥仙》
7	哲理人生	💭	人生感悟	《登鹳雀楼》
8	咏物抒怀	🌸	借物抒情	《咏柳》

1.5 学习等级定义

序号	等级名称	Emoji	描述	达成条件
1	初学者	🌱	开始学习古诗词	学习10首诗词
2	进阶者	📖	有一定基础	学习50首诗词
3	爱好者	🎓	热爱古诗词	学习100首诗词
4	通晓者	🏆	熟悉古诗词	学习200首诗词
5	大师	👑	古诗词专家	学习300首诗词

1.6 技术栈

技术领域	技术选型	版本要求
开发框架	Flutter	>= 3.0.0
编程语言	Dart	>= 2.17.0
设计规范	Material Design 3	-
状态管理	setState	-
数据存储	SharedPreferences	>= 2.0.0
音频播放	audioplayers	>= 4.0.0
目标平台	鸿蒙OS / Web	API 21+

1.7 项目结构

复制代码

lib/
└── main_poetry_learning.dart
    ├── PoetryLearningApp               # 应用入口
    ├── Dynasty                         # 朝代枚举
    ├── Theme                           # 题材枚举
    ├── LearningLevel                   # 学习等级枚举
    ├── Poem                            # 诗词模型
    ├── Author                          # 作者模型
    ├── LearningRecord                  # 学习记录模型
    ├── PoetryLearningHomePage          # 主页面（底部导航）
    ├── _buildBrowsePage                # 浏览页面
    ├── _buildCategoryPage              # 分类页面
    ├── _buildFavoritesPage             # 收藏页面
    ├── _buildProfilePage               # 个人页面
    └── PoemDetailPage                  # 诗词详情页

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

PoetryLearningHomePage
浏览页
分类页
收藏页
个人页
诗词列表
搜索框
筛选器
朝代分类
题材分类
作者分类
收藏列表
收藏管理
学习统计
学习记录
设置选项
诗词管理器

PoetryManager
学习管理器

LearningManager
收藏管理器

FavoriteManager
Poem

诗词
Author

作者
LearningRecord

学习记录

2.2 类图设计

belongs to
has
written by
references
PoetryLearningApp
+Widget build()
<<enumeration>>
Dynasty
+String label
+String emoji
+String description
+int workCount
+tang()
+song()
+yuan()
+ming()
+qing()
+preQin()
<<enumeration>>
Theme
+String label
+String emoji
+String description
+landscape()
+border()
+history()
+farewell()
+homesick()
+love()
+philosophy()
+object()
<<enumeration>>
LearningLevel
+String label
+String emoji
+int minPoems
+beginner()
+intermediate()
+enthusiast()
+scholar()
+master()
Poem
+String id
+String title
+String author
+Dynasty dynasty
+Theme theme
+String content
+String annotation
+String appreciation
+String translation
+int viewCount
+bool isFavorite
Author
+String id
+String name
+Dynasty dynasty
+String introduction
+List<String> works
+int poemCount
LearningRecord
+String id
+String poemId
+DateTime learnTime
+int duration
+bool completed

2.3 页面导航流程

浏览
分类
收藏
我的
应用启动
浏览页
底部导航
诗词列表
分类浏览
收藏列表
个人中心
点击诗词
诗词详情
查看注释
查看赏析
收藏诗词
选择分类
管理收藏
查看统计
学习记录
设置选项

2.4 学习流程

渲染错误: Mermaid 渲染失败: Parse error on line 4: ...ticipant 应用诗词管理器 participant 学习管 ----------------------^ Expecting '()', 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', 'SOLID_ARROW', 'SOLID_ARROW_TOP', 'SOLID_ARROW_BOTTOM', 'STICK_ARROW_TOP', 'STICK_ARROW_BOTTOM', 'SOLID_ARROW_TOP_DOTTED', 'SOLID_ARROW_BOTTOM_DOTTED', 'STICK_ARROW_TOP_DOTTED', 'STICK_ARROW_BOTTOM_DOTTED', 'SOLID_ARROW_TOP_REVERSE', 'SOLID_ARROW_BOTTOM_REVERSE', 'STICK_ARROW_TOP_REVERSE', 'STICK_ARROW_BOTTOM_REVERSE', 'SOLID_ARROW_TOP_REVERSE_DOTTED', 'SOLID_ARROW_BOTTOM_REVERSE_DOTTED', 'STICK_ARROW_TOP_REVERSE_DOTTED', 'STICK_ARROW_BOTTOM_REVERSE_DOTTED', 'BIDIRECTIONAL_SOLID_ARROW', 'DOTTED_ARROW', 'BIDIRECTIONAL_DOTTED_ARROW', 'SOLID_CROSS', 'DOTTED_CROSS', 'SOLID_POINT', 'DOTTED_POINT', got 'NEWLINE'

三、核心模块设计

3.1 数据模型设计

3.1.1 朝代枚举

dart 复制代码

enum Dynasty {
  tang(label: '唐代', emoji: '📜', description: '诗歌鼎盛时期', workCount: 120),
  song(label: '宋代', emoji: '📖', description: '词作辉煌时代', workCount: 80),
  yuan(label: '元代', emoji: '🎭', description: '曲作兴起时期', workCount: 40),
  ming(label: '明代', emoji: '📚', description: '诗词复兴时期', workCount: 30),
  qing(label: '清代', emoji: '📝', description: '古典诗词总结', workCount: 25),
  preQin(label: '先秦', emoji: '🏛️', description: '诗歌起源时期', workCount: 15);

  final String label;
  final String emoji;
  final String description;
  final int workCount;
  const Dynasty({
    required this.label,
    required this.emoji,
    required this.description,
    required this.workCount,
  });
}

3.1.2 题材枚举

dart 复制代码

enum Theme {
  landscape(label: '山水田园', emoji: '🏔️', description: '描写自然风光'),
  border(label: '边塞军旅', emoji: '⚔️', description: '描写边塞生活'),
  history(label: '咏史怀古', emoji: '🏛️', description: '借古讽今'),
  farewell(label: '送别离别', emoji: '👋', description: '离别之情'),
  homesick(label: '思乡怀人', emoji: '🌙', description: '思念之情'),
  love(label: '爱情婚姻', emoji: '💕', description: '爱情主题'),
  philosophy(label: '哲理人生', emoji: '💭', description: '人生感悟'),
  object(label: '咏物抒怀', emoji: '🌸', description: '借物抒情');

  final String label;
  final String emoji;
  final String description;
  const Theme({
    required this.label,
    required this.emoji,
    required this.description,
  });
}

3.1.3 诗词模型

dart 复制代码

class Poem {
  final String id;              // 诗词ID
  final String title;           // 标题
  final String author;          // 作者
  final Dynasty dynasty;        // 朝代
  final Theme theme;            // 题材
  final String content;         // 原文
  final String annotation;      // 注释
  final String appreciation;    // 赏析
  final String translation;     // 译文
  final int viewCount;          // 浏览次数
  final bool isFavorite;        // 是否收藏

  const Poem({
    required this.id,
    required this.title,
    required this.author,
    required this.dynasty,
    required this.theme,
    required this.content,
    required this.annotation,
    required this.appreciation,
    required this.translation,
    this.viewCount = 0,
    this.isFavorite = false,
  });

  Poem copyWith({
    int? viewCount,
    bool? isFavorite,
  }) {
    return Poem(
      id: id,
      title: title,
      author: author,
      dynasty: dynasty,
      theme: theme,
      content: content,
      annotation: annotation,
      appreciation: appreciation,
      translation: translation,
      viewCount: viewCount ?? this.viewCount,
      isFavorite: isFavorite ?? this.isFavorite,
    );
  }
}

3.1.4 作者模型

dart 复制代码

class Author {
  final String id;              // 作者ID
  final String name;            // 姓名
  final Dynasty dynasty;        // 朝代
  final String introduction;    // 简介
  final List<String> works;     // 代表作品
  final int poemCount;          // 作品数量

  const Author({
    required this.id,
    required this.name,
    required this.dynasty,
    required this.introduction,
    required this.works,
    required this.poemCount,
  });
}

3.1.5 学习记录模型

dart 复制代码

class LearningRecord {
  final String id;              // 记录ID
  final String poemId;          // 诗词ID
  final DateTime learnTime;     // 学习时间
  final int duration;           // 学习时长（秒）
  final bool completed;         // 是否完成

  const LearningRecord({
    required this.id,
    required this.poemId,
    required this.learnTime,
    required this.duration,
    required this.completed,
  });
}

3.1.6 朝代作品分布

39% 26% 13% 10% 8% 5% 各朝代作品数量分布唐代宋代元代明代清代先秦

3.2 页面结构设计

3.2.1 主页面布局

PoetryLearningHomePage
IndexedStack
浏览页
分类页
收藏页
个人页
NavigationBar
浏览 Tab
分类 Tab
收藏 Tab
我的 Tab

3.2.2 浏览页结构

浏览页
SliverAppBar
搜索框
筛选器
诗词列表
搜索输入
搜索按钮
朝代筛选
题材筛选
诗词卡片
标题
作者
朝代
内容预览
收藏按钮

3.2.3 诗词详情页结构

诗词详情页
标题区
原文区
注释区
赏析区
译文区
操作栏
诗词标题
作者信息
朝代题材
诗词原文
拼音标注
词语注释
典故说明
艺术特色
思想内容
收藏按钮
分享按钮
朗读按钮

3.2.4 分类页结构

分类页
朝代分类
题材分类
作者分类
唐代诗词
宋代诗词
其他朝代
山水田园
边塞军旅
其他题材
李白
杜甫
其他作者

3.3 诗词浏览逻辑

搜索
筛选
点击诗词
收藏
打开浏览页
加载诗词列表
显示诗词卡片
用户操作
输入关键词
过滤诗词
选择筛选条件
应用筛选
打开详情页
显示诗词详情
记录浏览历史
切换收藏状态
更新收藏列表

3.4 学习记录逻辑

查看注释
查看赏析
查看译文
是
否
打开诗词详情
记录开始时间
用户阅读学习
学习行为
记录注释查看
记录赏析查看
记录译文查看
计算学习时长
生成学习记录
更新统计数据
检查等级提升
达到新等级?
显示等级提升
完成记录

四、UI设计规范

4.1 配色方案

应用以典雅的墨绿色为主色调，象征传统文化的深厚底蕴：

颜色类型	色值	用途
主色	#2E7D32 (Green)	导航、主题元素
辅助色	#4CAF50	浏览页面
第三色	#66BB6A	分类页面
强调色	#81C784	收藏页面
背景色	#FAFAFA	页面背景
卡片背景	#FFFFFF	诗词卡片
文字色	#212121	主要文字
次要文字	#757575	辅助文字

4.2 朝代配色

朝代	色值	视觉效果
唐代	#D4AF37	金色辉煌
宋代	#8B4513	典雅棕褐
元代	#CD853F	朴实厚重
明代	#BCAAA4	清雅素净
清代	#A1887F	沉稳内敛
先秦	#6D4C41	古朴沧桑

4.3 字体规范

元素	字号	字重	颜色
页面标题	24px	Bold	主色
诗词标题	20px	Bold	#000000
作者名	16px	Medium	#333333
诗词正文	18px	Regular	#000000
注释文字	14px	Regular	#666666
赏析文字	14px	Regular	#555555

4.4 组件规范

4.4.1 诗词卡片

复制代码

┌─────────────────────────────────────┐
│  📜 静夜思                           │
│  李白 · 唐代 · 山水田园               │
│                                     │
│  床前明月光，疑是地上霜。              │
│  举头望明月，低头思故乡。              │
│                                     │
│  浏览 1234次                ❤️ 收藏   │
└─────────────────────────────────────┘

4.4.2 分类卡片

复制代码

┌─────────────────────────────────────┐
│  📜 唐代诗词                          │
│                                     │
│  诗歌鼎盛时期                         │
│  作品数：120首                        │
│                                     │
│  代表：李白、杜甫、白居易              │
└─────────────────────────────────────┘

4.4.3 详情页标题区

复制代码

┌─────────────────────────────────────┐
│  静夜思                               │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  │
│  李白 · 唐代                          │
│  📜 山水田园 · 💭 思乡怀人             │
└─────────────────────────────────────┘

4.4.4 注释卡片

复制代码

┌─────────────────────────────────────┐
│  📝 注释                              │
│                                     │
│  • 床：此处指井栏或井边的床            │
│  • 疑：怀疑，以为                     │
│  • 举头：抬头                         │
│  • 低头：形容沉思的样子                │
└─────────────────────────────────────┘

4.4.5 赏析卡片

复制代码

┌─────────────────────────────────────┐
│  💡 赏析                              │
│                                     │
│  这首诗写的是在寂静的月夜思念家乡       │
│  的感受。诗的前两句，是写诗人在作客     │
│  他乡的特定环境中一刹那间所产生的       │
│  错觉......                          │
└─────────────────────────────────────┘

4.4.6 学习统计卡片

复制代码

┌─────────────────────────────────────┐
│  📊 学习统计                          │
│                                     │
│  已学习诗词：45首                     │
│  学习时长：3小时20分                   │
│  当前等级：📖 进阶者                   │
│  连续学习：7天                         │
└─────────────────────────────────────┘

五、核心功能实现

5.1 诗词数据初始化

dart 复制代码

final List<Poem> _poems = [
  Poem(
    id: '1',
    title: '静夜思',
    author: '李白',
    dynasty: Dynasty.tang,
    theme: Theme.homesick,
    content: '床前明月光，疑是地上霜。\n举头望明月，低头思故乡。',
    annotation: '• 床：此处指井栏或井边的床\n• 疑：怀疑，以为\n• 举头：抬头\n• 低头：形容沉思的样子',
    appreciation: '这首诗写的是在寂静的月夜思念家乡的感受。诗的前两句，是写诗人在作客他乡的特定环境中一刹那间所产生的错觉。一个独处他乡的人，白天奔波忙碌，倒还能冲淡离愁，然而一到夜深人静的时候，心头就难免泛起阵阵思念故乡的波澜。何况是在月明之夜，更何况是月色如霜的秋夜。',
    translation: '明亮的月光洒在床前的窗户纸上，好像地上泛起了一层霜。我禁不住抬起头来，看那天窗外空中的一轮明月，不由得低头沉思，想起远方的家乡。',
    viewCount: 1234,
    isFavorite: false,
  ),
  // ... 更多诗词
];

5.2 搜索功能实现

dart 复制代码

void _searchPoems(String query) {
  setState(() {
    if (query.isEmpty) {
      _filteredPoems = _poems;
    } else {
      _filteredPoems = _poems.where((poem) {
        return poem.title.contains(query) ||
               poem.author.contains(query) ||
               poem.content.contains(query);
      }).toList();
    }
  });
}

5.3 筛选功能实现

dart 复制代码

void _filterPoems() {
  setState(() {
    _filteredPoems = _poems.where((poem) {
      bool matchDynasty = _selectedDynasty == null || poem.dynasty == _selectedDynasty;
      bool matchTheme = _selectedTheme == null || poem.theme == _selectedTheme;
      return matchDynasty && matchTheme;
    }).toList();
  });
}

5.4 收藏功能实现

dart 复制代码

void _toggleFavorite(String poemId) {
  setState(() {
    final index = _poems.indexWhere((p) => p.id == poemId);
    if (index != -1) {
      _poems[index] = _poems[index].copyWith(
        isFavorite: !_poems[index].isFavorite,
      );
      
      if (_poems[index].isFavorite) {
        _favoritePoems.add(_poems[index]);
      } else {
        _favoritePoems.removeWhere((p) => p.id == poemId);
      }
    }
  });
}

5.5 学习记录实现

dart 复制代码

void _recordLearning(String poemId, int duration) {
  final record = LearningRecord(
    id: 'record_${DateTime.now().millisecondsSinceEpoch}',
    poemId: poemId,
    learnTime: DateTime.now(),
    duration: duration,
    completed: true,
  );

  setState(() {
    _learningRecords.add(record);
    _totalLearnedPoems++;
    _totalLearningTime += duration;
    _currentLevel = _calculateLevel(_totalLearnedPoems);
  });
}

5.6 等级计算实现

dart 复制代码

LearningLevel _calculateLevel(int learnedPoems) {
  if (learnedPoems >= 300) return LearningLevel.master;
  if (learnedPoems >= 200) return LearningLevel.scholar;
  if (learnedPoems >= 100) return LearningLevel.enthusiast;
  if (learnedPoems >= 50) return LearningLevel.intermediate;
  return LearningLevel.beginner;
}

六、交互设计

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 2024-03-17 2024-03-24 2024-03-31 基础UI框架诗词数据录入搜索筛选功能朗读功能拼音标注学习打卡 AI诗词推荐社区交流云端同步 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本古诗词学习应用开发计划

7.2 功能扩展建议

7.2.1 朗读功能

朗读功能：

专业朗诵音频
拼音标注显示
语速调节
跟读练习

7.2.2 AI智能推荐

AI功能：

个性化推荐
学习路径规划
薄弱点分析
智能复习提醒

7.2.3 社区交流

社交功能：

学习心得分享
诗词创作
评论互动
学习小组

八、注意事项

8.1 开发注意事项

数据准确性：确保诗词内容、注释、赏析的准确性
版权问题：注意诗词内容的版权和引用规范
性能优化：大量诗词数据需优化加载和搜索性能
用户体验：提供良好的阅读体验和交互反馈
数据持久化：学习记录和收藏数据需持久化存储

8.2 常见问题

问题	原因	解决方案
搜索无结果	关键词不匹配	提供搜索建议
加载缓慢	数据量大	分页加载优化
收藏丢失	未保存数据	及时持久化
统计不准	记录丢失	完善记录机制
显示异常	数据格式错误	数据验证处理

8.3 使用技巧

📚 古诗词学习技巧 📚

学习方法

先读原文，理解大意
再看注释，了解典故
后读赏析，深入理解
最后背诵，巩固记忆

分类学习

按朝代学习：了解时代背景
按题材学习：掌握写作手法
按作者学习：理解诗人风格

记忆技巧

理解记忆：先理解后背诵
联想记忆：联系生活实际
反复复习：定期回顾巩固
朗读背诵：加深印象

九、运行说明

9.1 环境要求

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

9.2 运行命令

bash 复制代码

# 查看可用设备
flutter devices

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

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

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

十、总结

古诗词学习应用通过诗词浏览、分类学习、收藏管理、学习记录四大模块，为用户提供了一个便捷的古诗词学习平台。应用收录了唐诗、宋词、元曲等经典古诗词作品，提供原文、注释、赏析、译文等丰富内容，支持分类浏览、搜索查询、收藏管理、学习记录等功能。

核心功能涵盖诗词浏览、分类学习、收藏管理、学习记录四大模块。诗词浏览支持搜索和筛选功能；分类学习按朝代、题材、作者分类；收藏管理方便用户收藏喜欢的诗词；学习记录记录学习进度和统计数据。

应用采用 Material Design 3 设计规范，以典雅的墨绿色为主色调，象征传统文化的深厚底蕴与文人雅士的气质。通过本应用，希望能够帮助用户深入了解古诗词文化，传承中华优秀传统文化，提升文学素养和审美能力。

古诗词学习------传承经典，品味文化