Flutter 框架跨平台鸿蒙开发 - 安全知识闯关

一直在想名

456人浏览 · 2026-04-09 21:54:25

一直在想名 · 2026-04-09 21:54:25 发布

安全知识闯关应用

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

一、项目概述

运行效果图

1.1 应用简介

安全知识闯关是一款亲子教育类应用，核心理念是"游戏化学习安全知识"。通过情景模拟和选择闯关的方式，将枯燥的安全教育转化为有趣的游戏体验，让孩子在轻松愉快的氛围中掌握各类安全知识。

安全教育是儿童成长过程中不可或缺的一环，但传统的说教方式往往效果有限。本应用借鉴游戏化学习理论，将安全知识融入情景模拟中，让孩子在"做选择"的过程中主动思考，在"闯关"的过程中获得成就感，从而加深对安全知识的理解和记忆。

1.2 核心功能

功能模块	功能描述	实现方式
闯关模式	关卡制游戏体验	10关递进式难度
情景模拟	真实场景还原	情景描述 + 选择题
即时反馈	答题后立即解析	正确答案 + 知识讲解
积分系统	答题获得积分	难度系数 × 基础分
成就系统	解锁成就徽章	条件触发 + 徽章展示
安全学堂	分类知识学习	图文卡片展示

1.3 安全知识分类

序号	类别	Emoji	颜色	典型场景
1	交通安全	🚦	#F44336	过马路、乘车安全
2	消防安全	🔥	#FF9800	火灾逃生、用电安全
3	食品安全	🍎	#4CAF50	饮食卫生、防食物中毒
4	网络安全	💻	#2196F3	个人信息保护、防诈骗
5	防拐骗	🚨	#9C27B0	陌生人应对、求助方法
6	应急自救	🆘	#E91E63	紧急电话、急救常识
7	居家安全	🏠	#00BCD4	防跌落、防触电
8	户外安全	🌲	#8BC34A	防溺水、防走失

1.4 难度等级

序号	等级	星级	适用关卡	分值系数
1	简单	⭐	1-3关	1倍
2	中等	⭐⭐	4-7关	2倍
3	困难	⭐⭐⭐	8-10关	3倍

1.5 技术栈

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

二、项目结构

lib/
├── main_safety_quiz.dart           # 应用主入口
│   ├── SafetyQuizApp               # 根应用组件
│   ├── SafetyCategory              # 安全类型枚举
│   ├── Difficulty                  # 难度等级枚举
│   ├── SafetyQuestion              # 安全问题模型
│   ├── LevelProgress               # 关卡进度模型
│   ├── SafetyQuizHomePage          # 主页面
│   ├── QuizGamePage                # 答题页面
│   └── ResultDialog                # 结果弹窗

三、数据模型

3.1 SafetyCategory 枚举

enum SafetyCategory {
  traffic('交通安全', '🚦', Color(0xFFF44336)),
  fire('消防安全', '🔥', Color(0xFFFF9800)),
  food('食品安全', '🍎', Color(0xFF4CAF50)),
  network('网络安全', '💻', Color(0xFF2196F3)),
  stranger('防拐骗', '🚨', Color(0xFF9C27B0)),
  emergency('应急自救', '🆘', Color(0xFFE91E63)),
  home('居家安全', '🏠', Color(0xFF00BCD4)),
  outdoor('户外安全', '🌲', Color(0xFF8BC34A));

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

3.2 Difficulty 枚举

enum Difficulty {
  easy('简单', 1, Color(0xFF8BC34A)),
  medium('中等', 2, Color(0xFFFFC107)),
  hard('困难', 3, Color(0xFFFF5722));

  final String label;
  final int stars;
  final Color color;
}

3.3 SafetyQuestion 模型

class SafetyQuestion {
  final String id;              // 唯一标识
  final SafetyCategory category; // 安全类型
  final Difficulty difficulty;   // 难度等级
  final String scenario;         // 情景描述
  final String question;         // 问题内容
  final List<String> options;    // 选项列表
  final int correctIndex;        // 正确答案索引
  final String explanation;      // 答案解析
  final int points;              // 分值
}

3.4 LevelProgress 模型

class LevelProgress {
  final int level;              // 关卡编号
  final int totalQuestions;     // 题目总数
  final int correctAnswers;     // 正确数量
  final int stars;              // 获得星星
  final bool isUnlocked;        // 是否解锁
  final bool isCompleted;       // 是否完成
}

四、核心功能实现

4.1 题目生成机制

List<SafetyQuestion> _generateQuestions(int level) {
  final random = Random();
  final allQuestions = <SafetyQuestion>[];
  
  for (var category in SafetyCategory.values) {
    allQuestions.addAll(_getCategoryQuestions(category, level));
  }

  allQuestions.shuffle(random);
  return allQuestions.take(5).toList();
}

4.2 难度动态调整

List<SafetyQuestion> _getCategoryQuestions(SafetyCategory category, int level) {
  final difficulty = level <= 3 
      ? Difficulty.easy 
      : (level <= 7 ? Difficulty.medium : Difficulty.hard);
  
  return [
    SafetyQuestion(
      category: category,
      difficulty: difficulty,
      points: 10 * difficulty.stars,  // 难度系数影响分值
      // ...
    ),
  ];
}

4.3 答题交互逻辑

void _selectAnswer(int index) {
  if (_answered) return;

  setState(() {
    _selectedAnswer = index;
    _answered = true;

    final question = widget.questions[_currentIndex];
    if (index == question.correctIndex) {
      _score += question.points;
      _correctCount++;
      _successController.forward();  // 播放成功动画
    } else {
      _shakeController.forward();    // 播放错误动画
    }
  });
}

4.4 星级评定算法

int _calculateStars(int correct, int total) {
  final percentage = correct / total;
  if (percentage >= 1.0) return 3;   // 全对：3星
  if (percentage >= 0.6) return 2;   // 60%以上：2星
  if (percentage >= 0.4) return 1;   // 40%以上：1星
  return 0;                           // 低于40%：0星
}

4.5 成就解锁检测

void _checkAchievements() {
  if (_totalScore >= 100 && !_achievements.contains('安全小卫士')) {
    _achievements.add('安全小卫士');
  }
  if (_streak >= 5 && !_achievements.contains('连胜王者')) {
    _achievements.add('连胜王者');
  }
  if (_currentLevel >= 3 && !_achievements.contains('闯关达人')) {
    _achievements.add('闯关达人');
  }
}

五、界面设计

5.1 页面结构

页面	功能	设计要点
首页	快速开始和统计概览	渐变背景 + 快捷入口
闯关	关卡选择和进度展示	解锁机制 + 星级显示
成就	成就徽章收集展示	网格布局 + 解锁状态
学习	分类安全知识学习	卡片式知识要点

5.2 答题界面设计

元素	设计说明
进度条	顶部线性进度指示器
情景卡片	蓝色背景信息卡片
问题区域	白色卡片 + 大号字体
选项按钮	圆角卡片 + 字母标识
结果反馈	底部固定 + 解析说明

5.3 配色方案

元素	颜色值	用途
主色调	#4CAF50	品牌色、正确提示
错误色	#F44336	错误提示
背景渐变	#E8F5E9 → #A5D6A7	首页背景
卡片背景	#FFFFFF	内容卡片

六、动画效果

6.1 脉冲动画

_pulseController = AnimationController(
  vsync: this,
  duration: const Duration(milliseconds: 1000),
)..repeat(reverse: true);  // 往返脉冲效果

6.2 成功动画

_successController = AnimationController(
  vsync: this,
  duration: const Duration(milliseconds: 800),
);

6.3 动画应用

动画类型	效果描述	应用场景
脉冲动画	按钮呼吸效果	开始按钮
成功动画	答对时的反馈	正确答案
抖动动画	答错时的反馈	错误答案
渐变背景	多色渐变过渡	页面背景

七、运行与调试

7.1 运行命令

# 运行应用
flutter run -d harmonyos lib/main_safety_quiz.dart

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

# 构建HAP包
flutter build hap --target lib/main_safety_quiz.dart

7.2 调试要点

调试项	检查内容	解决方案
题目逻辑	正确答案索引是否正确	验证 correctIndex
关卡解锁	解锁条件是否正确	检查 isUnlocked 逻辑
成就触发	成就条件是否合理	调整触发阈值

八、扩展方向

8.1 功能扩展

扩展功能	实现思路	技术要点
题库扩展	添加更多题目	JSON配置 + 动态加载
多人模式	家长孩子一起玩	蓝牙/WiFi直连
语音播报	题目语音朗读	TTS语音合成
数据持久化	保存学习进度	SharedPreferences
错题本	记录答错题目	本地数据库存储