Flutter 框架跨平台鸿蒙开发 - 直觉训练器应用

小雨天気.2026-04-09 12:44

欢迎加入开源鸿蒙跨平台社区：
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 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

IntuitionTrainerHomePage
训练选择页
训练进行页
统计分析页
历史记录页
个人中心页
难度选择
类型选择
直觉测试
选项展示
结果反馈
准确率统计
类型得分
会话列表
会话详情
训练管理器

TrainingManager
得分计算器

ScoreCalculator
统计引擎

StatsEngine
TrainingSession

训练会话
RoundResult

轮次结果
TrainingType

训练类型
Difficulty

难度等级
UserStats

用户统计

2.2 类图设计

has
has
has many
manages
tracks
renders
scores
IntuitionTrainerApp
+Widget build()
<<enumeration>>
TrainingType
+String label
+String emoji
+String description
+colorGuess()
+numberGuess()
+directionGuess()
+cardGuess()
+patternGuess()
+emotionGuess()
<<enumeration>>
Difficulty
+String label
+double multiplier
+int rounds
+beginner()
+intermediate()
+advanced()
+master()
TrainingSession
+String id
+TrainingType type
+Difficulty difficulty
+DateTime startTime
+DateTime endTime
+int totalRounds
+int correctRounds
+int score
+double accuracy
+List<RoundResult> results
RoundResult
+int round
+String target
+String guess
+bool isCorrect
+int responseTime
UserStats
+int totalSessions
+int totalRounds
+int correctRounds
+int totalScore
+int currentStreak
+int longestStreak
+int intuitionLevel
+Map<TrainingType,int> typeScores
+double get accuracy
IntuitionTrainerHomePage
-int _selectedIndex
-UserStats _userStats
-List<TrainingSession> _sessions
-TrainingType? _currentTrainingType
-Difficulty _currentDifficulty
-int _currentRound
-bool _isTraining
+Widget build()
-_startTraining()
-_makeGuess()
-_completeTraining()
TypeScoreChartPainter
+Map<TrainingType,int> typeScores
+void paint()
+bool shouldRepaint()

2.3 页面导航流程

训练
统计
历史
我的
正确
错误
否
是
应用启动
训练选择页
底部导航
选择难度
数据分析
历史记录
个人中心
选择训练类型
开始训练
直觉测试
选择答案
判断正确
得分增加
继续下一轮
完成所有轮次?
显示结果
保存记录
查看准确率
查看类型得分
查看会话列表
查看会话详情
查看成就
查看理念

2.4 训练流程

数据层 游戏逻辑 训练页面 用户 数据层 游戏逻辑 训练页面 用户 loop [每轮训练] 选择训练类型 显示难度选择 选择难度 开始训练 生成目标 显示选项 选择答案 判断结果 显示反馈 保存会话 更新统计 显示结果

三、核心模块设计

3.1 数据模型设计

3.1.1 训练类型枚举 (TrainingType)
dart 复制代码 
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)
dart 复制代码 
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)
dart 复制代码 
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)
dart 复制代码 
class RoundResult {
  final int round;          // 轮次
  final String target;      // 目标答案
  final String guess;       // 用户猜测
  final bool isCorrect;     // 是否正确
  final int responseTime;   // 响应时间（毫秒）
}
3.1.5 用户统计模型 (UserStats)
dart 复制代码 
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 训练类型得分分布

20% 19% 17% 16% 15% 14% 训练类型得分分布示例 颜色直觉 数字直觉 方向直觉 卡片直觉 图案直觉 情绪直觉

3.2 页面结构设计

3.2.1 主页面布局

IntuitionTrainerHomePage
IndexedStack
训练选择页
统计分析页
历史记录页
个人中心页
NavigationBar
训练 Tab
统计 Tab
历史 Tab
我的 Tab

3.2.2 训练选择页结构

训练选择页
SliverAppBar
快速统计
难度选择
训练类型列表
标题
渐变背景
直觉等级
准确率
连续天数
初学者
进阶者
高手
大师
训练类型卡片

3.2.3 训练进行页结构

训练进行页
进度显示
直觉图标
选项网格
退出按钮
当前轮次
总轮次
脉冲动画
类型图标
选项按钮
点击响应

3.2.4 统计分析页结构

统计分析页
总准确率展示
统计卡片
类型得分图
准确率数值
准确率说明
总积分
正确率
连续天数
最长连续
环形图
图例说明

3.3 训练逻辑流程

正确
错误
否
是
开始训练
生成目标
显示选项
用户选择
判断正确
正确轮数+1
记录结果
当前轮次 >= 总轮次?
轮次+1
计算得分
保存会话
更新统计
显示结果

3.4 得分计算逻辑

初学者
进阶者
高手
大师
训练完成
获取正确轮数
获取难度倍率
计算基础得分
得分 = 正确轮数 × 10 × 倍率
难度判断
倍率 1.0x
倍率 1.5x
倍率 2.0x
倍率 3.0x
累计总分
计算等级
Level = 总分/200 + 1

四、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 开始训练实现

dart 复制代码 
void _startTraining(TrainingType type) {
  setState(() {
    _currentTrainingType = type;
    _currentRound = 0;
    _correctInSession = 0;
    _sessionResults = [];
    _isTraining = true;
  });
  _generateNewTarget();
  _pulseController.repeat(reverse: true);
}

5.2 生成目标实现

dart 复制代码 
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 猜测判断实现

dart 复制代码 
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 完成训练实现

dart 复制代码 
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 类型得分图绘制

dart 复制代码 
class TypeScoreChartPainter extends CustomPainter {
  final Map<TrainingType, int> typeScores;

  @override
  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 猜测判断流程

正确
错误
否
是
显示选项
用户选择
记录响应时间
判断正确
正确轮数+1
记录结果
完成所有轮次?
生成新目标
计算得分
保存会话
更新统计
显示结果

6.3 等级提升系统

0分
200分
400分
600分
800分
1000分
Lv1
Lv2
Lv3
Lv4
Lv5
Lv6
直觉新手
直觉修行者
直觉大师

七、扩展功能规划

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 训练游戏 难度系统 统计分析 更多训练类型 成就系统 排行榜 双人对战 自定义训练 云端同步 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 直觉训练器应用开发计划

7.2 功能扩展建议

7.2.1 更多训练类型

扩展功能：

  • 声音直觉训练
  • 图像直觉训练
  • 时间直觉训练
  • 空间直觉训练
7.2.2 成就系统

成就功能：

  • 训练里程碑成就
  • 准确率成就
  • 连续训练成就
  • 类型精通成就
7.2.3 双人对战

对战功能：

  • 实时对战模式
  • 轮流猜测
  • 积分排名
  • 好友挑战

八、注意事项

8.1 开发注意事项

  1. 随机性保证：目标生成使用 Random，确保随机性

  2. 状态管理：训练状态需要正确切换，避免状态混乱

  3. 动画控制：脉冲动画需要在训练开始和结束时正确控制

  4. 得分计算：得分需要考虑难度倍率，正确计算

  5. 数据持久化：训练会话数据需要本地存储

8.2 常见问题

问题 原因 解决方案
训练无法开始 状态未重置 检查状态初始化
得分计算错误 倍率未应用 确认难度倍率
动画不播放 控制器未启动 检查动画控制器
统计数据不准 数据未及时更新 每次操作后刷新
选项显示错误 类型判断错误 检查类型匹配

8.3 设计理念

🔮 直觉训练器理念 🔮

直觉不是神秘的魔法，

而是一种可以训练的能力。

通过反复练习，

我们可以提升对信息的敏感度，

让潜意识更好地为我们服务。

不要过度思考，

相信你的第一感觉。

直觉训练，

是连接意识与潜意识的桥梁。

相信直觉，释放潜能

九、运行说明

9.1 环境要求

环境 版本要求
Flutter SDK >= 3.0.0
Dart SDK >= 2.17.0
鸿蒙OS API 21+

9.2 运行命令

bash 复制代码 
# 查看可用设备
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 设计规范，以神秘的紫色为主色调，象征直觉的神秘与深邃。通过本应用，希望能够帮助用户训练和提升直觉能力，连接意识与潜意识，释放内在潜能。

直觉训练器------相信直觉，释放潜能

相关推荐
浮芷.2 小时前
Flutter 框架跨平台鸿蒙开发 - 姿势纠正助手应用
科技·flutter·华为·harmonyos·鸿蒙
马剑威（威哥爱编程）2 小时前
HarmonyOS 6.0原子化服务完全指南
华为·harmonyos
一直在想名2 小时前
Flutter 框架跨平台鸿蒙开发 - 影子收藏家
flutter·华为·harmonyos
早點睡3902 小时前
Flutter for OpenHarmony三方库适配实战：palette_generator 图片调色板提取
flutter
2301_822703202 小时前
开源鸿蒙跨平台Flutter开发：跨端图形渲染引擎的类型边界与命名空间陷阱：以多维雷达图绘制中的 dart:ui 及 StrokeJoin 异常为例
算法·flutter·ui·开源·图形渲染·harmonyos·鸿蒙
yumgpkpm3 小时前
华为昇腾910B上用Kubernetes（K8s）部署LLM（Qwen3-32B）的详细步骤，保姆级命令及方法、下载链接等
运维·服务器·华为·stable diffusion·aigc·copilot·llama
浮芷.3 小时前
Flutter 框架跨平台鸿蒙开发 - 药物相互作用查询应用
科技·flutter·华为·harmonyos·鸿蒙
世人万千丶3 小时前
Flutter 框架跨平台鸿蒙开发 - 情绪过山车应用
flutter
李李李勃谦3 小时前
Flutter 框架跨平台鸿蒙开发 - 月亮同步
flutter·华为·harmonyos
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南05VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）06Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）07Oh My Codex 快速使用指南08UV安装并设置国内源09Claude Code 未登录 使用第三方模型10【Vulhub】Fastjson 1.2.24_rce复现