Flutter 框架跨平台鸿蒙开发 - 隐藏任务
运行效果图隐藏任务是一款将日常生活游戏化的创意应用。它打破常规的任务管理模式，通过随机发布隐藏任务，让用户在平凡的日子里发现惊喜。每一个任务都是一次小小的冒险，完成挑战获得虚拟奖励，为生活增添探索的乐趣。应用以紫罗兰色为主色调，象征神秘与探索。涵盖任务发现、任务管理、奖励系统、统计分析四大模块。用户可以通过完成各种类型的隐藏任务，积累积分、获得奖励、提升探索者等级，让每一天都充满期待。序号类型名称
·
隐藏任务应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
隐藏任务是一款将日常生活游戏化的创意应用。它打破常规的任务管理模式，通过随机发布隐藏任务，让用户在平凡的日子里发现惊喜。每一个任务都是一次小小的冒险，完成挑战获得虚拟奖励，为生活增添探索的乐趣。
应用以紫罗兰色为主色调，象征神秘与探索。涵盖任务发现、任务管理、奖励系统、统计分析四大模块。用户可以通过完成各种类型的隐藏任务，积累积分、获得奖励、提升探索者等级，让每一天都充满期待。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 任务发现 | 随机生成隐藏任务 | Timer + Random |
| 任务管理 | 查看、完成、放弃任务 | ListView + State |
| 奖励系统 | 虚拟奖励发放与展示 | Reward Model |
| 统计分析 | 用户数据可视化 | CustomPainter |
| 等级系统 | 积分累计与等级提升 | 计算逻辑 |
| 时限管理 | 任务倒计时与过期处理 | Timer.periodic |
1.3 任务类型定义
| 序号 | 类型名称 | Emoji | 主题色 | 描述 |
|---|---|---|---|---|
| 1 | 探索 | 🗺️ | #6B5B95 | 发现新事物，探索未知领域 |
| 2 | 善意 | 💝 | #88B04B | 传递温暖，帮助他人 |
| 3 | 创意 | 🎨 | #92A8D1 | 激发想象，表达创意 |
| 4 | 挑战 | ⚡ | #F7CAC9 | 突破自我，尝试新事物 |
| 5 | 观察 | 👁️ | #034F84 | 发现细节，用心观察 |
| 6 | 社交 | 🤝 | #FF6F61 | 建立连接，与他人互动 |
1.4 任务难度分类
| 序号 | 难度等级 | 星级 | 积分 | 时间限制 | 描述 |
|---|---|---|---|---|---|
| 1 | 简单 | ⭐ | 10 | 3小时 | 轻松完成的小任务 |
| 2 | 中等 | ⭐⭐ | 25 | 5小时 | 需要一些努力 |
| 3 | 困难 | ⭐⭐⭐ | 50 | 7小时 | 具有挑战性的任务 |
| 4 | 传奇 | ⭐⭐⭐⭐⭐ | 100 | 11小时 | 极具挑战的稀有任务 |
1.5 奖励类型定义
| 序号 | 奖励类型 | Emoji | 描述 |
|---|---|---|---|
| 1 | 徽章 | 🏅 | 成就徽章，展示荣誉 |
| 2 | 称号 | 👑 | 专属称号，彰显身份 |
| 3 | 宝箱 | 🎁 | 神秘宝箱，惊喜奖励 |
| 4 | 星星 | ⭐ | 星星奖励，积累光芒 |
| 5 | 宝石 | 💎 | 珍贵宝石，稀有收藏 |
1.6 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 动画控制 | AnimationController | - |
| 图表绘制 | CustomPainter | - |
| 状态管理 | setState | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.7 项目结构
lib/
└── main_hidden_task.dart
├── HiddenTaskApp # 应用入口
├── TaskType # 任务类型枚举
├── TaskDifficulty # 任务难度枚举
├── RewardType # 奖励类型枚举
├── HiddenTask # 隐藏任务模型
├── Reward # 奖励模型
├── UserStats # 用户统计模型
├── HiddenTaskHomePage # 主页面（底部导航）
├── _buildTaskPage # 任务发现页面
├── _buildStatsPage # 统计分析页面
├── _buildRewardsPage # 奖励展示页面
├── _buildProfilePage # 个人中心页面
└── TaskTypeChartPainter # 任务类型分布图绘制器
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 任务完成流程
三、核心模块设计
3.1 数据模型设计
3.1.1 任务类型枚举 (TaskType)
enum TaskType {
exploration('探索', '🗺️', Color(0xFF6B5B95)),
kindness('善意', '💝', Color(0xFF88B04B)),
creativity('创意', '🎨', Color(0xFF92A8D1)),
challenge('挑战', '⚡', Color(0xFFF7CAC9)),
observation('观察', '👁️', Color(0xFF034F84)),
social('社交', '🤝', Color(0xFFFF6F61));
final String label;
final String emoji;
final Color color;
const TaskType({
required this.label,
required this.emoji,
required this.color,
});
}
3.1.2 任务难度枚举 (TaskDifficulty)
enum TaskDifficulty {
easy(label: '简单', stars: 1, points: 10, color: Color(0xFF88B04B)),
medium(label: '中等', stars: 2, points: 25, color: Color(0xFFFFB347)),
hard(label: '困难', stars: 3, points: 50, color: Color(0xFFFF6F61)),
legendary(label: '传奇', stars: 5, points: 100, color: Color(0xFF9B59B6));
final String label;
final int stars;
final int points;
final Color color;
const TaskDifficulty({
required this.label,
required this.stars,
required this.points,
required this.color,
});
}
3.1.3 隐藏任务模型 (HiddenTask)
class HiddenTask {
final String id;
final String title;
final String description;
final TaskType type;
final TaskDifficulty difficulty;
final int points;
final List<Reward> rewards;
final DateTime discoveredAt;
final DateTime? completedAt;
final bool isCompleted;
final bool isExpired;
final Duration timeLimit;
Duration get remainingTime {
if (isCompleted || isExpired) return Duration.zero;
final elapsed = DateTime.now().difference(discoveredAt);
final remaining = timeLimit - elapsed;
return remaining.isNegative ? Duration.zero : remaining;
}
bool get isTimeRunningOut => remainingTime.inMinutes < 30 && !isCompleted;
}
3.1.4 奖励模型 (Reward)
class Reward {
final RewardType type;
final String name;
final String description;
final int rarity;
Reward({
required this.type,
required this.name,
required this.description,
this.rarity = 1,
});
}
3.1.5 用户统计模型 (UserStats)
class UserStats {
int totalPoints;
int completedTasks;
int currentStreak;
int longestStreak;
int explorationLevel;
List<Reward> earnedRewards;
Map<TaskType, int> tasksByType;
UserStats({
this.totalPoints = 0,
this.completedTasks = 0,
this.currentStreak = 0,
this.longestStreak = 0,
this.explorationLevel = 1,
List<Reward>? earnedRewards,
Map<TaskType, int>? tasksByType,
}) : earnedRewards = earnedRewards ?? [],
tasksByType = tasksByType ?? {for (var t in TaskType.values) t: 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 配色方案
应用以紫罗兰色为主色调，象征神秘与探索：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #6B5B95 (Violet) | 导航、探索类型 |
| 辅助色 | #88B04B (Green) | 善意类型、成功状态 |
| 强调色 | #FFB347 (Orange) | 奖励页、中等难度 |
| 警告色 | #FF6F61 (Coral) | 挑战类型、紧急状态 |
| 创意色 | #92A8D1 (Blue) | 创意类型 |
| 观察色 | #034F84 (Navy) | 观察类型 |
| 传奇色 | #9B59B6 (Purple) | 传奇难度 |
4.2 难度配色
| 难度等级 | 色值 | 视觉效果 |
|---|---|---|
| 简单 | #88B04B | 清新绿色 |
| 中等 | #FFB347 | 温暖橙色 |
| 困难 | #FF6F61 | 警示红色 |
| 传奇 | #9B59B6 | 神秘紫色 |
4.3 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 24px | Bold | 主色 |
| 任务标题 | 16px | Bold | #000000 |
| 任务描述 | 13px | Regular | #666666 |
| 难度标签 | 10px | Bold | 难度色 |
| 积分显示 | 20px | Bold | #FFB347 |
| 时间显示 | 12px | Regular | #9E9E9E |
4.4 组件规范
4.4.1 任务卡片布局
┌──────────────────────────────────────────────────────┐
│ ┌────┐ ┌──────────┐ │
│ │ 🗺️ │ 在公园里找到一片心形的叶子 │ +25 ⭐ │ │
│ │ │ [探索] ⭐⭐ │ 2h30m │ │
│ └────┘ └──────────┘ │
│ │
│ 探索周围的世界，发现隐藏的美好。 │
│ │
│ [放弃] [完成] │
└──────────────────────────────────────────────────────┘
4.4.2 任务详情弹窗
┌─────────────────────────────────────────────────────┐
│ ───── │
│ │
│ ┌────────┐ │
│ │ 🗺️ │ 在公园里找到一片心形的叶子 │
│ └────────┘ 探索 · 中等 │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ 任务描述 │ │
│ │ 探索周围的世界，发现隐藏的美好。 │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ┌────────────────┐ ┌────────────────┐ │
│ │ ⭐ 奖励积分 │ │ ⏰ 剩余时间 │ │
│ │ +25 │ │ 2小时 │ │
│ └────────────────┘ └────────────────┘ │
│ │
│ 完成奖励: │
│ ┌────────┐ ┌────────┐ │
│ │ 🏅 │ │ ⭐ │ │
│ │探索徽章 │ │星星奖励 │ │
│ └────────┘ └────────┘ │
│ │
│ [放弃任务] [完成任务] │
└─────────────────────────────────────────────────────┘
4.4.3 统计卡片
┌─────────────────────────────────────────────────────┐
│ │
│ ⭐ ✅ 🔥 🏆 │
│ 125 15 3 7 │
│ 总积分 完成任务 连续天数 最长连续 │
│ │
└─────────────────────────────────────────────────────┘
4.4.4 奖励展示
┌─────────────────────────────────────────────────────┐
│ 12 │
│ 已获得奖励 │
├─────────────────────────────────────────────────────┤
│ │
│ 🏅 徽章 (5) │
│ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │探索徽章 │ │善行使者 │ │创意之星 │ │
│ └────────┘ └────────┘ └────────┘ │
│ │
│ 👑 称号 (3) │
│ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ 冒险家 │ │温暖使者 │ │创意天才 │ │
│ └────────┘ └────────┘ └────────┘ │
│ │
└─────────────────────────────────────────────────────┘
五、核心功能实现
5.1 任务生成实现
HiddenTask _generateRandomTask() {
final type = TaskType.values[_random.nextInt(TaskType.values.length)];
final difficulty = TaskDifficulty.values[_random.nextInt(TaskDifficulty.values.length)];
final title = _taskTemplates[_random.nextInt(_taskTemplates.length)];
final rewards = _generateRewards(difficulty);
return HiddenTask(
id: 'task_${DateTime.now().millisecondsSinceEpoch}_${_random.nextInt(1000)}',
title: title,
description: _generateDescription(type),
type: type,
difficulty: difficulty,
points: difficulty.points,
rewards: rewards,
discoveredAt: DateTime.now(),
timeLimit: Duration(hours: 1 + difficulty.stars * 2),
);
}
5.2 奖励生成实现
List<Reward> _generateRewards(TaskDifficulty difficulty) {
final rewards = <Reward>[];
final rewardCount = difficulty.stars;
for (int i = 0; i < rewardCount; i++) {
final rewardType = RewardType.values[_random.nextInt(RewardType.values.length)];
rewards.add(Reward(
type: rewardType,
name: _getRandomRewardName(rewardType),
description: '完成任务的珍贵奖励',
rarity: difficulty.stars,
));
}
return rewards;
}
5.3 任务完成实现
void _confirmTaskCompletion(HiddenTask task) {
setState(() {
_activeTasks.removeWhere((t) => t.id == task.id);
_completedTasks.insert(
0,
task.copyWith(
isCompleted: true,
completedAt: DateTime.now(),
),
);
_userStats.totalPoints += task.points;
_userStats.completedTasks++;
_userStats.tasksByType[task.type] = (_userStats.tasksByType[task.type] ?? 0) + 1;
_userStats.earnedRewards.addAll(task.rewards);
_userStats.explorationLevel = (_userStats.totalPoints ~/ 100) + 1;
});
_showCompletionReward(task);
}
5.4 过期检查实现
void _checkExpiredTasks() {
for (int i = _activeTasks.length - 1; i >= 0; i--) {
if (_activeTasks[i].remainingTime == Duration.zero && !_activeTasks[i].isCompleted) {
_activeTasks[i] = _activeTasks[i].copyWith(isExpired: true);
_activeTasks.removeAt(i);
}
}
}
5.5 类型分布图绘制
class TaskTypeChartPainter extends CustomPainter {
final Map<TaskType, int> tasksByType;
TaskTypeChartPainter({required this.tasksByType});
void paint(Canvas canvas, Size size) {
final total = tasksByType.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;
tasksByType.forEach((type, count) {
if (count == 0) return;
final sweepAngle = (count / total) * 2 * pi;
final paint = Paint()
..color = type.color
..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 AR任务发现
增强现实功能：
- 使用相机发现隐藏任务
- 基于地理位置的任务
- AR线索解谜
- 实地探索奖励
八、注意事项
8.1 开发注意事项
-
定时器管理：任务发现和过期检查使用不同的定时器，需要在 dispose 时正确释放
-
任务数量限制：同时最多5个活动任务，避免用户压力过大
-
时间计算：剩余时间需要实时更新，每秒刷新一次
-
状态同步：完成任务时需要同步更新多个数据（积分、奖励、统计）
-
用户体验：放弃任务需要二次确认，避免误操作
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 任务不自动发现 | 定时器未启动 | 检查 initState 中的定时器初始化 |
| 时间显示错误 | 剩余时间计算错误 | 确保 remainingTime 正确计算 |
| 奖励未显示 | 奖励列表为空 | 检查奖励生成逻辑 |
| 统计数据不准 | 数据未及时更新 | 每次操作后刷新统计 |
| 环形图显示错误 | 数据为空或全零 | 添加空数据检查 |
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_hidden_task.dart --web-port 8128
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_hidden_task.dart
# 运行到Windows
flutter run -d windows -t lib/main_hidden_task.dart
# 代码分析
flutter analyze lib/main_hidden_task.dart
十、总结
隐藏任务应用通过任务发现、任务管理、奖励系统、统计分析四大模块，为用户提供了一个独特的游戏化生活体验平台。应用采用随机任务发现机制，让用户在平凡的日子里发现惊喜，完成挑战获得虚拟奖励。
核心功能涵盖任务生成、时限管理、奖励发放、数据统计四大模块。任务生成系统通过随机算法生成不同类型和难度的任务，确保每次发现都是惊喜；时限管理系统实时监控任务剩余时间，过期自动移除；奖励系统根据任务难度发放不同数量和稀有度的奖励；统计分析提供类型分布图和历史记录，帮助用户了解自己的探索轨迹。
应用采用 Material Design 3 设计规范，以紫罗兰色为主色调，象征神秘与探索。通过本应用，希望能够帮助用户在日常生活中发现更多乐趣，让每一天都充满期待。
隐藏任务——发现生活的惊喜
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
1
0- 0
已为社区贡献6条内容
所有评论(0)