Flutter 框架跨平台鸿蒙开发 - 直觉训练器应用
直觉训练器应用摘要： 一款基于Flutter框架开发的第六感训练应用，提供颜色、数字、方向等6种直觉训练类型，支持4种难度等级。核心功能包括训练游戏、统计分析、历史记录和等级系统，通过游戏化方式帮助用户提升直觉能力。采用Material Design 3设计规范，包含自定义图表绘制和动画效果。项目结构清晰，分为表现层、业务层和数据层，支持鸿蒙OS/Web平台。用户可通过训练获得积分，跟踪准确率并查
·
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
直觉训练器是一款独特的第六感训练应用。它通过多种直觉测试游戏，帮助用户训练和提升直觉能力。应用基于心理学中的直觉训练理论，让用户在轻松有趣的氛围中，逐步开发和强化自己的第六感。
应用以神秘的紫色为主色调，象征直觉的神秘与深邃。涵盖训练游戏、统计分析、历史记录、个人成长四大模块。用户可以通过颜色、数字、方向、卡片、图案、情绪等多种训练类型，全面提升直觉能力。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 训练游戏 | 多种直觉测试 | 游戏逻辑 |
| 难度选择 | 四级难度系统 | 参数配置 |
| 统计分析 | 准确率与得分统计 | CustomPainter |
| 历史记录 | 查看过往训练 | 列表管理 |
| 等级系统 | 积分与等级提升 | 计算逻辑 |
| 连续打卡 | 激励持续训练 | 状态追踪 |
1.3 训练类型定义
| 序号 | 类型名称 | Emoji | 描述 |
|---|---|---|---|
| 1 | 颜色直觉 | 🎨 | 猜测隐藏的颜色 |
| 2 | 数字直觉 | 🔢 | 猜测隐藏的数字 |
| 3 | 方向直觉 | 🧭 | 猜测隐藏的方向 |
| 4 | 卡片直觉 | 🃏 | 猜测隐藏的卡片 |
| 5 | 图案直觉 | 🔮 | 猜测隐藏的图案 |
| 6 | 情绪直觉 | 😊 | 猜测隐藏的情绪 |
1.4 难度等级定义
| 序号 | 难度名称 | 倍率 | 轮数 | 描述 |
|---|---|---|---|---|
| 1 | 初学者 | 1.0x | 5轮 | 适合新手入门 |
| 2 | 进阶者 | 1.5x | 10轮 | 有一定基础 |
| 3 | 高手 | 2.0x | 15轮 | 直觉较强 |
| 4 | 大师 | 3.0x | 20轮 | 直觉敏锐 |
1.5 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 动画控制 | AnimationController | - |
| 图表绘制 | CustomPainter | - |
| 状态管理 | setState | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.6 项目结构
lib/
└── main_intuition_trainer.dart
├── IntuitionTrainerApp # 应用入口
├── TrainingType # 训练类型枚举
├── Difficulty # 难度等级枚举
├── TrainingSession # 训练会话模型
├── RoundResult # 轮次结果模型
├── UserStats # 用户统计模型
├── IntuitionTrainerHomePage # 主页面（底部导航）
├── _buildTrainingPage # 训练选择页面
├── _buildActiveTrainingPage # 训练进行页面
├── _buildStatsPage # 统计分析页面
├── _buildHistoryPage # 历史记录页面
├── _buildProfilePage # 个人中心页面
└── TypeScoreChartPainter # 类型得分图表绘制器
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 训练流程
三、核心模块设计
3.1 数据模型设计
3.1.1 训练类型枚举 (TrainingType)
enum TrainingType {
colorGuess(label: '颜色直觉', emoji: '🎨', description: '猜测隐藏的颜色'),
numberGuess(label: '数字直觉', emoji: '🔢', description: '猜测隐藏的数字'),
directionGuess(label: '方向直觉', emoji: '🧭', description: '猜测隐藏的方向'),
cardGuess(label: '卡片直觉', emoji: '🃏', description: '猜测隐藏的卡片'),
patternGuess(label: '图案直觉', emoji: '🔮', description: '猜测隐藏的图案'),
emotionGuess(label: '情绪直觉', emoji: '😊', description: '猜测隐藏的情绪');
final String label;
final String emoji;
final String description;
}
3.1.2 难度等级枚举 (Difficulty)
enum Difficulty {
beginner(label: '初学者', multiplier: 1.0, rounds: 5),
intermediate(label: '进阶者', multiplier: 1.5, rounds: 10),
advanced(label: '高手', multiplier: 2.0, rounds: 15),
master(label: '大师', multiplier: 3.0, rounds: 20);
final String label;
final double multiplier; // 得分倍率
final int rounds; // 训练轮数
}
3.1.3 训练会话模型 (TrainingSession)
class TrainingSession {
final String id;
final TrainingType type;
final Difficulty difficulty;
final DateTime startTime;
final DateTime endTime;
final int totalRounds; // 总轮数
final int correctRounds; // 正确轮数
final int score; // 得分
final double accuracy; // 准确率
final List<RoundResult> results;
}
3.1.4 轮次结果模型 (RoundResult)
class RoundResult {
final int round; // 轮次
final String target; // 目标答案
final String guess; // 用户猜测
final bool isCorrect; // 是否正确
final int responseTime; // 响应时间（毫秒）
}
3.1.5 用户统计模型 (UserStats)
class UserStats {
int totalSessions; // 总训练次数
int totalRounds; // 总轮数
int correctRounds; // 正确轮数
int totalScore; // 总积分
int currentStreak; // 当前连续天数
int longestStreak; // 最长连续天数
int intuitionLevel; // 直觉等级
Map<TrainingType, int> typeScores; // 各类型得分
double get accuracy => totalRounds > 0 ? correctRounds / totalRounds : 0;
}
3.1.6 训练类型得分分布
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 训练选择页结构
3.2.3 训练进行页结构
3.2.4 统计分析页结构
3.3 训练逻辑流程
3.4 得分计算逻辑
四、UI设计规范
4.1 配色方案
应用以神秘的紫色为主色调，象征直觉的神秘与深邃：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #7B1FA2 (Purple) | 导航、主题元素 |
| 辅助色 | #9C27B0 | 统计页面 |
| 第三色 | #AB47BC | 历史页面 |
| 强调色 | #BA68C8 | 个人中心 |
| 背景色 | #ECEFF1 | 页面背景 |
| 卡片背景 | #FFFFFF | 训练卡片 |
4.2 难度配色
| 难度等级 | 倍率 | 视觉效果 |
|---|---|---|
| 初学者 | 1.0x | 基础绿色 |
| 进阶者 | 1.5x | 明亮蓝色 |
| 高手 | 2.0x | 橙色活力 |
| 大师 | 3.0x | 金色荣耀 |
4.3 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 24px | Bold | 主色 |
| 训练类型 | 18px | Bold | #000000 |
| 准确率 | 36px | Bold | 主色 |
| 得分显示 | 18px | Bold | 主色 |
| 标签文字 | 12px | Regular | 灰色 |
4.4 组件规范
4.4.1 训练类型卡片
┌──────────────────────────────────────────────────────┐
│ ┌────┐ ┌──────────┐ │
│ │ 🎨 │ 颜色直觉 │ 180分 │ │
│ │ │ 猜测隐藏的颜色 │ │ │
│ └────┘ └──────────┘ │
└──────────────────────────────────────────────────────┘
4.4.2 训练进行界面
┌─────────────────────────────────────────────────────┐
│ │
│ 颜色直觉 3/10 [退出] │
│ │
│ ╭───────╮ │
│ │ 🎨 │ │
│ ╰───────╯ │
│ │
│ 用你的直觉选择 │
│ │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │ 🔴 │ │ 🟠 │ │ 🟡 │ │ 🟢 │ │ 🔵 │ │ 🟣 │ │
│ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ │
│ │
└─────────────────────────────────────────────────────┘
4.4.3 结果弹窗
┌─────────────────────────────────────────────────────┐
│ 🎉 训练完成！ │
├─────────────────────────────────────────────────────┤
│ │
│ ╭───────╮ │
│ │ ✨ │ │
│ ╰───────╯ │
│ │
│ 60.0% │
│ 本次准确率 │
│ │
│ 正确: 6/10 得分: +60 │
│ │
│ ┌────────────────────────────────────────────┐ │
│ │ 不错的表现，继续训练！ │ │
│ └────────────────────────────────────────────┘ │
│ │
│ [完成] │
└─────────────────────────────────────────────────────┘
4.4.4 会话卡片
┌──────────────────────────────────────────────────────┐
│ ┌────┐ 颜色直觉 ┌──────────┐ │
│ │ 🎨 │ 12/15 14:30 │ 60% │ │
│ └────┘ 初学者 6/10 │ +60 │ │
│ └──────────┘ │
└──────────────────────────────────────────────────────┘
五、核心功能实现
5.1 开始训练实现
void _startTraining(TrainingType type) {
setState(() {
_currentTrainingType = type;
_currentRound = 0;
_correctInSession = 0;
_sessionResults = [];
_isTraining = true;
});
_generateNewTarget();
_pulseController.repeat(reverse: true);
}
5.2 生成目标实现
void _generateNewTarget() {
_roundStartTime = DateTime.now();
switch (_currentTrainingType) {
case TrainingType.colorGuess:
final colors = ['🔴', '🟠', '🟡', '🟢', '🔵', '🟣'];
_currentTarget = colors[_random.nextInt(colors.length)];
break;
case TrainingType.numberGuess:
_currentTarget = '${_random.nextInt(10)}';
break;
// ... 其他类型
}
}
5.3 猜测判断实现
void _makeGuess(String guess) {
if (!_isTraining || _currentTarget == null) return;
final responseTime = DateTime.now().difference(_roundStartTime!).inMilliseconds;
final isCorrect = guess == _currentTarget;
_sessionResults.add(RoundResult(
round: _currentRound + 1,
target: _currentTarget!,
guess: guess,
isCorrect: isCorrect,
responseTime: responseTime,
));
if (isCorrect) {
_correctInSession++;
}
setState(() {
_currentRound++;
});
if (_currentRound >= _currentDifficulty.rounds) {
_completeTraining();
} else {
_generateNewTarget();
}
}
5.4 完成训练实现
void _completeTraining() {
_pulseController.stop();
final session = TrainingSession(
id: 'session_${DateTime.now().millisecondsSinceEpoch}',
type: _currentTrainingType!,
difficulty: _currentDifficulty,
startTime: DateTime.now().subtract(Duration(minutes: _currentDifficulty.rounds)),
endTime: DateTime.now(),
totalRounds: _currentDifficulty.rounds,
correctRounds: _correctInSession,
score: (_correctInSession * 10 * _currentDifficulty.multiplier).round(),
accuracy: _correctInSession / _currentDifficulty.rounds,
results: _sessionResults,
);
setState(() {
_sessions.insert(0, session);
_userStats.totalSessions++;
_userStats.totalRounds += session.totalRounds;
_userStats.correctRounds += session.correctRounds;
_userStats.totalScore += session.score;
_userStats.intuitionLevel = (_userStats.totalScore ~/ 200) + 1;
_isTraining = false;
});
}
5.5 类型得分图绘制
class TypeScoreChartPainter extends CustomPainter {
final Map<TrainingType, int> typeScores;
void paint(Canvas canvas, Size size) {
final total = typeScores.values.fold<int>(0, (sum, v) => sum + v);
if (total == 0) return;
final center = Offset(size.width / 2, size.height / 2);
final radius = size.height / 2 - 20;
var startAngle = -pi / 2;
typeScores.forEach((type, score) {
if (score == 0) return;
final sweepAngle = (score / total) * 2 * pi;
final paint = Paint()
..color = colors[colorIndex % colors.length]
..style = PaintingStyle.fill;
canvas.drawArc(
Rect.fromCircle(center: center, radius: radius),
startAngle,
sweepAngle,
true,
paint,
);
startAngle += sweepAngle;
});
final innerPaint = Paint()
..color = Colors.white
..style = PaintingStyle.fill;
canvas.drawCircle(center, radius * 0.5, innerPaint);
}
}
六、交互设计
6.1 训练开始流程
6.2 猜测判断流程
6.3 等级提升系统
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 更多训练类型
扩展功能：
- 声音直觉训练
- 图像直觉训练
- 时间直觉训练
- 空间直觉训练
7.2.2 成就系统
成就功能：
- 训练里程碑成就
- 准确率成就
- 连续训练成就
- 类型精通成就
7.2.3 双人对战
对战功能：
- 实时对战模式
- 轮流猜测
- 积分排名
- 好友挑战
八、注意事项
8.1 开发注意事项
-
随机性保证：目标生成使用 Random，确保随机性
-
状态管理：训练状态需要正确切换，避免状态混乱
-
动画控制：脉冲动画需要在训练开始和结束时正确控制
-
得分计算：得分需要考虑难度倍率，正确计算
-
数据持久化：训练会话数据需要本地存储
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 训练无法开始 | 状态未重置 | 检查状态初始化 |
| 得分计算错误 | 倍率未应用 | 确认难度倍率 |
| 动画不播放 | 控制器未启动 | 检查动画控制器 |
| 统计数据不准 | 数据未及时更新 | 每次操作后刷新 |
| 选项显示错误 | 类型判断错误 | 检查类型匹配 |
8.3 设计理念
🔮 直觉训练器理念 🔮
直觉不是神秘的魔法，
而是一种可以训练的能力。
通过反复练习，
我们可以提升对信息的敏感度，
让潜意识更好地为我们服务。
不要过度思考，
相信你的第一感觉。
直觉训练，
是连接意识与潜意识的桥梁。
相信直觉，释放潜能
九、运行说明
9.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 鸿蒙OS | API 21+ |
9.2 运行命令
# 查看可用设备
flutter devices
# 运行到Web服务器
flutter run -d web-server -t lib/main_intuition_trainer.dart --web-port 8132
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_intuition_trainer.dart
# 运行到Windows
flutter run -d windows -t lib/main_intuition_trainer.dart
# 代码分析
flutter analyze lib/main_intuition_trainer.dart
十、总结
直觉训练器应用通过训练游戏、统计分析、历史记录、个人成长四大模块，为用户提供了一个独特的第六感训练平台。应用基于心理学直觉训练理论，通过多种直觉测试游戏，帮助用户逐步开发和强化直觉能力。
核心功能涵盖六种训练类型、四级难度系统、准确率统计、积分成长四大模块。训练系统支持颜色、数字、方向、卡片、图案、情绪六种直觉类型；难度系统提供初学者到大师四个等级；统计系统实时计算准确率和得分；成长系统记录训练历程，激励持续进步。
应用采用 Material Design 3 设计规范，以神秘的紫色为主色调，象征直觉的神秘与深邃。通过本应用，希望能够帮助用户训练和提升直觉能力，连接意识与潜意识，释放内在潜能。
直觉训练器——相信直觉，释放潜能
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
10
0- 0
已为社区贡献25条内容
所有评论(0)