Flutter 框架跨平台鸿蒙开发 - 起床战争

运行效果图起床战争是一款趣味闹钟应用，核心创意在于用户必须完成指定的小游戏才能关闭闹钟。这一设计理念源于一个简单而有效的观察：普通闹钟太容易被随手关掉，导致用户在半梦半醒间就又睡着了。通过强制用户完成需要动脑的小游戏，确保用户真正清醒后才能关闭闹钟，从而提高起床成功率。应用以橙红色为主色调，象征活力与热情，搭配深色背景营造专注的游戏氛围。五种不同类型的游戏满足不同用户的偏好，三级难度设置让用户可以

Utopia^

11人浏览 · 2026-04-07 22:19:11

Utopia^ · 2026-04-07 22:19:11 发布

起床战争应用

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

一、项目概述

运行效果图
在这里插入图片描述

1.1 应用简介

起床战争是一款趣味闹钟应用，核心创意在于用户必须完成指定的小游戏才能关闭闹钟。这一设计理念源于一个简单而有效的观察：普通闹钟太容易被随手关掉，导致用户在半梦半醒间就又睡着了。通过强制用户完成需要动脑的小游戏，确保用户真正清醒后才能关闭闹钟，从而提高起床成功率。

应用以橙红色为主色调，象征活力与热情，搭配深色背景营造专注的游戏氛围。五种不同类型的游戏满足不同用户的偏好，三级难度设置让用户可以根据自己的"起床困难程度"进行选择。

1.2 核心功能

功能模块	功能描述	实现方式
闹钟管理	添加、编辑、删除闹钟	列表 + 底部弹窗
时间选择	设置闹钟时间	showTimePicker
重复设置	设置工作日/周末重复	周选择器
游戏选择	选择关闭闹钟的游戏类型	卡片选择器
难度设置	设置游戏难度等级	三级难度条
数学游戏	解数学题关闭闹钟	随机算术题
记忆游戏	翻牌配对游戏	翻牌记忆
滑块拼图	数字滑块还原	滑块拼图
颜色匹配	选择正确颜色	颜色识别
摇晃游戏	摇晃手机指定次数	点击模拟

1.3 游戏类型

序号	游戏名称	图标	游戏描述
1	数学题	calculate	解开数学运算题
2	记忆翻牌	psychology	找出所有配对卡片
3	滑块拼图	grid_on	还原数字顺序
4	颜色匹配	palette	选择正确颜色
5	疯狂摇晃	vibration	摇晃手机N次

1.4 技术栈

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

1.5 项目结构

lib/
└── main_wake_up_war.dart
    ├── WakeUpWarApp           # 应用入口
    ├── GameType               # 游戏类型枚举
    ├── Alarm                  # 闹钟数据模型
    ├── WakeUpWarHomePage      # 主页面
    ├── AddAlarmPage           # 添加/编辑闹钟页面
    ├── AlarmGameScreen        # 闹钟游戏屏幕
    ├── MathGame               # 数学题游戏
    ├── MemoryGame             # 记忆翻牌游戏
    ├── SliderGame             # 滑块拼图游戏
    ├── ColorGame              # 颜色匹配游戏
    └── ShakeGame              # 摇晃游戏

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 数据流向图

三、核心模块设计

3.1 数据模型设计

闹钟模型 (Alarm)

class Alarm {
  final String id;              // 唯一标识
  final TimeOfDay time;         // 闹钟时间
  final bool enabled;           // 是否启用
  final String label;           // 闹钟标签
  final List<bool> repeatDays;  // 重复日期（周一到周日）
  final GameType gameType;      // 游戏类型
  final int difficulty;         // 难度等级（1-3）
  
  // 计算属性
  String get timeString;        // 格式化时间字符串
  String get repeatString;      // 重复描述字符串
}

游戏类型枚举 (GameType)

enum GameType {
  math('数学题', Icons.calculate, '解开数学题'),
  memory('记忆翻牌', Icons.psychology, '找出所有配对'),
  slider('滑块拼图', Icons.grid_on, '还原数字顺序'),
  color('颜色匹配', Icons.palette, '选择正确颜色'),
  shake('疯狂摇晃', Icons.vibration, '摇晃手机N次');
  
  final String label;       // 游戏名称
  final IconData icon;      // 游戏图标
  final String description; // 游戏描述
}

3.2 页面结构设计

主页面布局

添加闹钟页面布局

3.3 游戏模块设计

数学题游戏流程

记忆翻牌游戏流程

四、UI设计规范

4.1 配色方案

应用以橙红色为主色调，象征活力与热情：

颜色类型	色值	用途
主色	#FF5722 (Deep Orange 500)	导航、强调元素
背景	#121212 (Grey 900)	主背景色
卡片背景	#1E1E1E (Grey 800)	卡片背景
禁用状态	#424242 (Grey 800)	禁用元素
成功色	#4CAF50 (Green)	完成提示
错误色	#F44336 (Red)	错误提示

4.2 字体规范

元素	字号	字重	颜色
时间显示	48px	Light	#FFFFFF
页面标题	20px	Medium	#FFFFFF
闹钟标签	16px	Medium	#FFFFFF
游戏类型标签	12px	Normal	#FFFFFF
辅助文字	14px	Normal	#BDBDBD
游戏题目	48px	Bold	#FFFFFF

4.3 组件规范

闹钟卡片

┌─────────────────────────────────────────┐
│  07:00                          [开关]  │
│  工作日起床  [数学题]                    │
│  周一、二、三、四、五              [删除]│
└─────────────────────────────────────────┘

游戏选择卡片

┌─────────────┐
│    🧮       │
│   数学题    │
└─────────────┘

难度选择条

[████] [████] [    ]
 简单   中等   困难

五、核心功能实现

5.1 闹钟检测实现

void _startAlarmCheck() {
  _alarmTimer = Timer.periodic(const Duration(seconds: 1), (timer) {
    _checkAlarm();
  });
}

void _checkAlarm() {
  if (_isAlarmRinging) return;

  final now = DateTime.now();
  final currentTime = TimeOfDay(hour: now.hour, minute: now.minute);

  for (final alarm in _alarms) {
    if (!alarm.enabled) continue;

    if (alarm.time.hour == currentTime.hour &&
        alarm.time.minute == currentTime.minute) {
      final weekday = now.weekday;
      if (alarm.repeatDays[weekday - 1] || !alarm.repeatDays.contains(true)) {
        _triggerAlarm(alarm);
        break;
      }
    }
  }
}

5.2 数学题游戏实现

void _generateQuestion() {
  final random = Random();
  final maxNum = 10 + (widget.difficulty * 10);
  
  _num1 = random.nextInt(maxNum) + 1;
  _num2 = random.nextInt(maxNum) + 1;
  
  final operators = ['+', '-', '×'];
  _operator = operators[random.nextInt(operators.length)];
  
  switch (_operator) {
    case '+':
      _correctAnswer = _num1 + _num2;
      break;
    case '-':
      if (_num1 < _num2) {
        final temp = _num1;
        _num1 = _num2;
        _num2 = temp;
      }
      _correctAnswer = _num1 - _num2;
      break;
    case '×':
      _num1 = random.nextInt(10) + 1;
      _num2 = random.nextInt(10) + 1;
      _correctAnswer = _num1 * _num2;
      break;
  }
}

5.3 记忆翻牌游戏实现

void _onCardTap(int index) {
  if (_revealed[index] || _matched.contains(index)) return;
  
  if (_firstSelected != null && _firstSelected != index) {
    setState(() {
      _revealed[index] = true;
    });

    Future.delayed(const Duration(milliseconds: 500), () {
      if (_cards[_firstSelected!] == _cards[index]) {
        setState(() {
          _matched.add(_firstSelected!);
          _matched.add(index);
          _matchedPairs++;
        });

        if (_matchedPairs >= _pairs) {
          widget.onComplete();
        }
      } else {
        setState(() {
          _revealed[_firstSelected!] = false;
          _revealed[index] = false;
        });
      }
      _firstSelected = null;
    });
  } else {
    setState(() {
      _revealed[index] = true;
      _firstSelected = index;
    });
  }
}

5.4 滑块拼图游戏实现

bool _isSolvable() {
  int inversions = 0;
  for (int i = 0; i < _tiles.length - 1; i++) {
    for (int j = i + 1; j < _tiles.length; j++) {
      if (_tiles[i] != 0 && _tiles[j] != 0 && _tiles[i] > _tiles[j]) {
        inversions++;
      }
    }
  }
  return inversions % 2 == 0;
}

bool _isSolved() {
  for (int i = 0; i < _tiles.length - 1; i++) {
    if (_tiles[i] != i + 1) return false;
  }
  return _tiles[_tiles.length - 1] == 0;
}

六、扩展功能设计

6.1 数据持久化

当前版本数据存储在内存中，可扩展为本地持久化：

方案	实现方式	优势
SharedPreferences	键值对存储	简单易用
Hive	轻量级NoSQL	高性能
SQLite	关系型数据库	支持复杂查询

6.2 功能扩展

功能	实现方案	价值
真实闹钟	flutter_local_notifications	后台响铃
震动反馈	vibrate 包	增强唤醒效果
音效系统	audioplayers	自定义闹钟音
睡眠记录	本地数据库	追踪睡眠质量
社交分享	share_plus	分享起床战绩

6.3 游戏扩展

游戏	实现方案	特点
打字游戏	键盘输入	需要专注
扫雷游戏	逻辑推理	需要思考
连连看	图形匹配	需要观察
反应力测试	快速点击	需要反应

七、技术要点

7.1 性能优化

优化项	实现方式	效果
定时器管理	Timer.periodic	精确检测闹钟
动画优化	AnimationController	平滑游戏体验
状态管理	setState	响应式更新
内存管理	dispose清理	防止内存泄漏

7.2 边界条件处理

场景	处理方式	效果
空闹钟列表	显示空状态提示	提升用户体验
滑块拼图无解	检测并重新生成	确保游戏可完成
时间选择	默认当前时间	方便用户操作
难度设置	三级难度	适应不同用户

7.3 代码规范

规范	实现方式	效果
命名规范	驼峰命名法	代码可读性高
代码组织	模块化设计	易于维护
注释规范	文档注释	便于理解
错误处理	try-catch	增强稳定性

八、总结与展望

8.1 项目总结

起床战争应用以独特的游戏化闹钟理念，解决了传统闹钟容易被随手关掉的问题。通过强制用户完成需要动脑的小游戏，确保用户真正清醒后才能关闭闹钟。五种不同类型的游戏满足不同用户的偏好，三级难度设置让用户可以根据自己的起床困难程度进行选择。

8.2 核心价值

维度	价值体现
用户价值	有效解决起床困难问题
技术价值	Flutter游戏开发实践
设计价值	游戏化设计参考
社会价值	提高生活效率

8.3 未来规划

8.4 开发信息

项目	信息
开发框架	Flutter 3.x
设计规范	Material Design 3
主要文件	main_wake_up_war.dart
运行端口	8124
创建日期	2026-04-07
应用名称	起床战争
目标平台	鸿蒙OS / Web