方言学习助手应用

---

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

一、项目概述

运行效果图

1.1 应用简介

方言学习助手是一款教育学习类应用，致力于帮助用户学习全国各地特色方言。支持粤语、四川话、东北话、上海话、闽南语、湖南话六大方言体系，涵盖日常问候、购物场景、美食点餐、交通出行、旅游问路、家庭生活六大实用场景。通过真人发音示范、情景对话练习、趣味闯关测试，让用户轻松掌握各地方言，走遍全国都不怕。

应用以温暖的橙红色为主色调，象征热情与交流。涵盖首页导航、学习中心、练习测试、学习进度四大模块。用户可以选择方言类型、学习场景课程、进行发音练习、完成趣味测试，系统化提升方言能力。

1.2 核心功能

功能模块	功能描述	实现方式
方言选择	6种方言类型选择	枚举定义
场景课程	6种实用场景课程	分类管理
发音学习	方言发音+音标标注	模拟播放
情景对话	实用例句展示	数据模型
趣味练习	选择题闯关测试	交互组件
学习进度	进度统计+连续天数	状态管理

1.3 方言类型定义

序号	方言名称	Emoji	地区	色值
1	粤语	🦁	广东	#E91E63
2	四川话	🌶️	四川	#F44336
3	东北话	🧣	东北	#2196F3
4	上海话	🏙️	上海	#9C27B0
5	闽南语	🌊	福建	#00BCD4
6	湖南话	🌶️	湖南	#FF9800

1.4 学习场景定义

序号	场景名称	Emoji	色值	描述
1	日常问候	👋	#4CAF50	打招呼用语
2	购物场景	🛒	#2196F3	买卖交流
3	美食点餐	🍜	#FF9800	餐厅用语
4	交通出行	🚇	#9C27B0	交通问路
5	旅游问路	🗺️	#00BCD4	景点导航
6	家庭生活	🏠	#E91E63	家庭交流

1.5 难度等级定义

序号	等级名称	Emoji	色值
1	入门	🌱	#8BC34A
2	进阶	🌿	#FFC107
3	高级	🌳	#FF5722

1.6 技术栈

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

1.7 项目结构

lib/
└── main_dialect_learning.dart
    ├── DialectLearningApp              # 应用入口
    ├── DialectType                     # 方言类型枚举
    ├── LessonType                      # 学习场景枚举
    ├── Difficulty                      # 难度等级枚举
    ├── DialectPhrase                   # 方言短语模型
    ├── LearningProgress                # 学习进度模型
    ├── DialectLearningHomePage         # 主页面（底部导航）
    ├── _buildHomePage                  # 首页模块
    ├── _buildLearnPage                 # 学习页模块
    ├── _buildPracticePage              # 练习页模块
    ├── _buildProgressPage              # 进度页模块
    ├── LessonPage                      # 课程学习页面
    └── PracticePage                    # 练习测试页面

---

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 学习流程时序

---

三、核心模块设计

3.1 数据模型设计

3.1.1 方言类型枚举 (DialectType)

enum DialectType {
  cantonese('粤语', '🦁', '广东', Color(0xFFE91E63)),
  sichuan('四川话', '🌶️', '四川', Color(0xFFF44336)),
  dongbei('东北话', '🧣', '东北', Color(0xFF2196F3)),
  shanghai('上海话', '🏙️', '上海', Color(0xFF9C27B0)),
  minnan('闽南语', '🌊', '福建', Color(0xFF00BCD4)),
  hunan('湖南话', '🌶️', '湖南', Color(0xFFFF9800));

  final String label;
  final String emoji;
  final String region;
  final Color color;

  const DialectType(this.label, this.emoji, this.region, this.color);
}

3.1.2 学习场景枚举 (LessonType)

enum LessonType {
  greeting('日常问候', '👋', Color(0xFF4CAF50)),
  shopping('购物场景', '🛒', Color(0xFF2196F3)),
  food('美食点餐', '🍜', Color(0xFFFF9800)),
  transport('交通出行', '🚇', Color(0xFF9C27B0)),
  travel('旅游问路', '🗺️', Color(0xFF00BCD4)),
  family('家庭生活', '🏠', Color(0xFFE91E63));

  final String label;
  final String emoji;
  final Color color;

  const LessonType(this.label, this.emoji, this.color);
}

3.1.3 方言短语模型 (DialectPhrase)

class DialectPhrase {
  final String id;              // 短语ID
  final String mandarin;        // 普通话原文
  final String dialect;         // 方言表达
  final String pronunciation;   // 发音标注
  final String meaning;         // 含义解释
  final DialectType dialectType;// 所属方言
  final LessonType lessonType;  // 所属场景
  final Difficulty difficulty;  // 难度等级
  final String example;         // 例句
}

3.1.4 学习进度模型 (LearningProgress)

class LearningProgress {
  final DialectType dialect;    // 方言类型
  final int learnedPhrases;     // 已学短语数
  final int totalPhrases;       // 总短语数
  final int correctAnswers;     // 正确答题数
  final int totalAnswers;       // 总答题数
  final int streak;             // 连续学习天数

  double get progress => totalPhrases > 0 ? learnedPhrases / totalPhrases : 0;
  double get accuracy => totalAnswers > 0 ? correctAnswers / totalAnswers : 0;
}

3.1.5 方言学习分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 首页结构

3.2.3 学习页结构

3.2.4 练习页结构

3.3 发音播放逻辑

3.4 练习答题逻辑

---

四、UI设计规范

4.1 配色方案

应用以温暖的橙红色为主色调，象征热情与交流：

颜色类型	色值	用途
主色	#FF5722 (DeepOrange)	导航、主题元素
辅助色	#FF7043	渐变效果
强调色	#FFCDD2	背景渐变
背景色	#FFEBEE → #EF9A9A	首页渐变背景
卡片背景	#FFFFFF	内容卡片

4.2 方言专属配色

方言	色值	视觉效果
粤语	#E91E63	热情粉红
四川话	#F44336	辣椒红
东北话	#2196F3	冰雪蓝
上海话	#9C27B0	优雅紫
闽南语	#00BCD4	海洋青
湖南话	#FF9800	剁椒橙

4.3 字体规范

元素	字号	字重	颜色
页面标题	22px	Bold	#000000
方言表达	28px	Bold	方言色
普通话	16px	Regular	#9E9E9E
发音标注	14px	Italic	#757575
统计数字	20px	Bold	白色

4.4 组件规范

4.4.1 方言选择卡片

┌─────────────────────────────────────┐
│  选择方言                            │
│                                     │
│  ┌──────┐ ┌──────┐ ┌──────┐        │
│  │  🦁  │ │  🌶️  │ │  🧣  │        │
│  │ 粤语 │ │四川话│ │东北话│        │
│  │ 广东 │ │ 四川 │ │ 东北 │        │
│  └