Flutter 框架跨平台鸿蒙开发 - 人生RPG - 把日常任务变成RPG任务，完成获得经验值
运行效果图人生RPG应用是一款游戏化的任务管理应用，旨在将日常生活中的任务转化为RPG游戏中的冒险任务，通过完成任务获得经验值、提升等级、增强属性，让枯燥的日常变得充满乐趣和成就感。应用以紫色为主色调，营造奇幻冒险的游戏氛围。应用涵盖了任务系统、角色系统、成就系统、设置管理四大模块，支持5种任务类型、6种角色属性、8项成就挑战。通过任务完成、经验获取、属性成长、成就解锁等功能，帮助用户以游戏化的方
·
人生RPG应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
人生RPG应用是一款游戏化的任务管理应用，旨在将日常生活中的任务转化为RPG游戏中的冒险任务，通过完成任务获得经验值、提升等级、增强属性，让枯燥的日常变得充满乐趣和成就感。应用以紫色为主色调，营造奇幻冒险的游戏氛围。
应用涵盖了任务系统、角色系统、成就系统、设置管理四大模块，支持5种任务类型、6种角色属性、8项成就挑战。通过任务完成、经验获取、属性成长、成就解锁等功能，帮助用户以游戏化的方式管理生活，激发自我提升的动力。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 任务系统 | 5种任务类型管理 | 卡片列表展示 |
| 经验系统 | 完成任务获得经验 | 动态计算奖励 |
| 等级系统 | 经验积累升级 | 进度条可视化 |
| 属性系统 | 6种角色属性成长 | 属性条展示 |
| 成就系统 | 里程碑解锁 | 成就卡片展示 |
| 角色面板 | 角色状态总览 | 统计卡片 |
1.3 任务类型
| 序号 | 类型名称 | 图标 | 主题色 | 基础经验 | 说明 |
|---|---|---|---|---|---|
| 1 | 日常任务 | 📅 | #00B894 | 10 EXP | 每日重复的小任务 |
| 2 | 主线任务 | ⭐ | #E17055 | 50 EXP | 重要的人生目标 |
| 3 | 支线任务 | 🧭 | #74B9FF | 25 EXP | 额外的探索任务 |
| 4 | 挑战任务 | 🏆 | #FDCB6E | 100 EXP | 高难度的挑战目标 |
| 5 | 习惯养成 | 🔄 | #A29BFE | 15 EXP | 需要持续的习惯 |
1.4 角色属性
| 序号 | 属性名称 | Emoji | 主题色 | 对应任务 |
|---|---|---|---|---|
| 1 | 力量 | 💪 | #E74C3C | 运动健身、体力劳动 |
| 2 | 智力 | 🧠 | #3498DB | 学习阅读、解谜思考 |
| 3 | 敏捷 | ⚡ | #F39C12 | 快速行动、时间管理 |
| 4 | 魅力 | ✨ | #9B59B6 | 社交沟通、演讲表达 |
| 5 | 耐力 | 🛡️ | #27AE60 | 坚持到底、克服困难 |
| 6 | 幸运 | 🍀 | #1ABC9C | 把握机会、积极心态 |
1.5 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 动画控制 | AnimationController | - |
| 状态管理 | setState | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.6 项目结构
lib/
└── main_life_rpg.dart
├── LifeRPGApp # 应用入口
├── TaskType # 任务类型枚举
├── AttributeType # 属性类型枚举
├── AchievementCategory # 成就分类枚举
├── RPGTask # 任务数据模型
├── Character # 角色数据模型
├── Achievement # 成就数据模型
├── LifeRPGHomePage # 主页面（底部导航）
├── _buildQuestPage # 任务页面
├── _buildCharacterPage # 角色页面
├── _buildAchievementPage # 成就页面
└── _buildSettingsPage # 设置页面
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 数据流向图
三、核心模块设计
3.1 数据模型设计
3.1.1 任务类型枚举 (TaskType)
enum TaskType {
daily('日常任务', Icons.today, Color(0xFF00B894), 10),
mainQuest('主线任务', Icons.star, Color(0xFFE17055), 50),
sideQuest('支线任务', Icons.explore, Color(0xFF74B9FF), 25),
challenge('挑战任务', Icons.emoji_events, Color(0xFFFDCB6E), 100),
habit('习惯养成', Icons.repeat, Color(0xFFA29BFE), 15);
final String label; // 类型名称
final IconData icon; // 类型图标
final Color color; // 主题颜色
final int baseExp; // 基础经验值
}
3.1.2 属性类型枚举 (AttributeType)
enum AttributeType {
strength('力量', '💪', Color(0xFFE74C3C), ['运动健身', '体力劳动']),
intelligence('智力', '🧠', Color(0xFF3498DB), ['学习阅读', '解谜思考']),
agility('敏捷', '⚡', Color(0xFFF39C12), ['快速行动', '时间管理']),
charisma('魅力', '✨', Color(0xFF9B59B6), ['社交沟通', '演讲表达']),
endurance('耐力', '🛡️', Color(0xFF27AE60), ['坚持到底', '克服困难']),
luck('幸运', '🍀', Color(0xFF1ABC9C), ['把握机会', '积极心态']);
final String label; // 属性名称
final String emoji; // 属性表情
final Color color; // 主题颜色
final List<String> examples; // 对应任务示例
}
3.1.3 任务模型 (RPGTask)
class RPGTask {
final String id; // 唯一标识
final String title; // 任务名称
final String? description; // 任务描述
final TaskType type; // 任务类型
final int difficulty; // 难度等级(1-5)
final List<AttributeType> attributes; // 关联属性
final int expReward; // 经验奖励
final bool completed; // 是否完成
final DateTime? completedAt; // 完成时间
final DateTime createdAt; // 创建时间
final bool isRecurring; // 是否重复
final int streak; // 连续天数
}
3.1.4 角色模型 (Character)
class Character {
final String name; // 角色名称
final int level; // 当前等级
final int exp; // 当前经验
final int totalExp; // 总经验
final Map<AttributeType, int> attributes; // 属性值
final int tasksCompleted; // 完成任务数
final int currentStreak; // 当前连续天数
final int longestStreak; // 最长连续天数
int get expToNextLevel; // 升级所需经验
double get expProgress; // 经验进度
}
3.1.5 任务类型分布
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 任务页面结构
3.2.3 角色页面结构
3.2.4 成就页面结构
3.3 经验值计算
3.4 成就解锁流程
四、UI设计规范
4.1 配色方案
应用采用紫色为主色调，营造奇幻冒险的游戏氛围：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #6C5CE7 (Purple) | 导航、强调元素 |
| 渐变起始 | #6C5CE7 | 角色卡片渐变 |
| 渐变结束 | #A29BFE | 角色卡片渐变 |
| 日常任务 | #00B894 | 绿色 |
| 主线任务 | #E17055 | 橙红色 |
| 支线任务 | #74B9FF | 蓝色 |
| 挑战任务 | #FDCB6E | 金色 |
| 习惯养成 | #A29BFE | 紫色 |
4.2 属性配色
| 属性 | 色值 | 情感表达 |
|---|---|---|
| 力量 | #E74C3C | 热情力量 |
| 智力 | #3498DB | 冷静智慧 |
| 敏捷 | #F39C12 | 活力速度 |
| 魅力 | #9B59B6 | 神秘魅力 |
| 耐力 | #27AE60 | 坚韧持久 |
| 幸运 | #1ABC9C | 幸运希望 |
4.3 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 角色名称 | 24px | Bold | #FFFFFF |
| 等级标签 | 14px | Bold | #FFFFFF |
| 任务标题 | 15px | SemiBold | #000000 |
| 经验奖励 | 11px | Bold | 主题色 |
| 属性名称 | 14px | Medium | #000000 |
| 统计数值 | 22px | Bold | #000000 |
4.4 组件规范
4.4.1 任务卡片
┌─────────────────────────────────────────────────┐
│ ┌────┐ 晨间运动30分钟 +20 EXP ✓ │
│ │ 📅 │ 日常任务 ★★ │
│ └────┘ 💪🛡️ │
└─────────────────────────────────────────────────┘
4.4.2 角色卡片
┌─────────────────────────────────────────────────┐
│ ┌────┐ 勇者 Lv.1 │
│ │ 👤 │ 总经验: 0 │
│ └────┘ ████████████░░░░░░░░ 0/110 EXP │
└─────────────────────────────────────────────────┘
4.4.3 属性条
💪 力量 [5]
████████████░░░░░░░░░░░░░░░░░░░░░░░░
4.4.4 成就卡片
┌─────────────────────────────────────────────────┐
│ ┌────┐ 初出茅庐 1/1 │
│ │ 🏆 │ 完成第一个任务 │
│ └────┘ ████████████████████████ 已解锁 │
└─────────────────────────────────────────────────┘
五、核心功能实现
5.1 经验值计算
class Character {
int get expToNextLevel => (level * 100 + level * level * 10);
double get expProgress => exp / expToNextLevel;
}
class RPGTask {
RPGTask({
required this.type,
this.difficulty = 1,
int? expReward,
}) : expReward = expReward ?? (type.baseExp * difficulty);
}
5.2 任务完成处理
void _completeTask(RPGTask task) {
setState(() {
_tasks.removeWhere((t) => t.id == task.id);
_completedTasks.insert(0, task.copyWith(completed: true, completedAt: DateTime.now()));
int newExp = _character.exp + task.expReward;
int newLevel = _character.level;
int newTotalExp = _character.totalExp + task.expReward;
// 升级检测
while (newExp >= _character.expToNextLevel) {
newExp -= _character.expToNextLevel;
newLevel++;
}
// 属性提升
final newAttributes = Map<AttributeType, int>.from(_character.attributes);
for (var attr in task.attributes) {
newAttributes[attr] = (newAttributes[attr] ?? 1) + 1;
}
_character = _character.copyWith(
level: newLevel,
exp: newExp,
totalExp: newTotalExp,
attributes: newAttributes,
tasksCompleted: _character.tasksCompleted + 1,
);
_updateAchievements();
});
}
5.3 属性条显示
Widget _buildAttributeBar(AttributeType attr) {
final value = _character.attributes[attr] ?? 1;
final maxValue = max(value, 10);
return Column(
children: [
Row(
children: [
Text(attr.emoji),
Text(attr.label),
Spacer(),
Container(
child: Text('$value'),
),
],
),
LinearProgressIndicator(
value: value / maxValue,
backgroundColor: attr.color.withValues(alpha: 0.1),
valueColor: AlwaysStoppedAnimation(attr.color),
),
],
);
}
5.4 成就检测
void _updateAchievements() {
for (int i = 0; i < _achievements.length; i++) {
final achievement = _achievements[i];
int progress = 0;
switch (achievement.category) {
case AchievementCategory.task:
progress = _character.tasksCompleted + _completedTasks.length;
break;
case AchievementCategory.level:
progress = _character.level;
break;
case AchievementCategory.streak:
progress = _character.currentStreak;
break;
case AchievementCategory.attribute:
progress = _character.attributes.values.reduce(max);
break;
default:
break;
}
if (progress >= achievement.requirement && !achievement.unlocked) {
_achievements[i] = achievement.copyWith(
progress: progress,
unlocked: true,
unlockedAt: DateTime.now(),
);
_showAchievementUnlocked(_achievements[i]);
}
}
}
5.5 创建任务
void _showAddTaskDialog() {
final titleController = TextEditingController();
TaskType selectedType = TaskType.daily;
int difficulty = 1;
List<AttributeType> selectedAttributes = [];
showModalBottomSheet(
context: context,
builder: (context) => StatefulBuilder(
builder: (context, setModalState) => Container(
child: Column(
children: [
TextField(controller: titleController, labelText: '任务名称'),
// 任务类型选择
Wrap(
children: TaskType.values.map((type) => ChoiceChip(
label: Text(type.label),
selected: selectedType == type,
onSelected: (selected) => setModalState(() => selectedType = type),
)).toList(),
),
// 难度选择
Row(
children: List.generate(5, (index) => IconButton(
icon: Icon(index < difficulty ? Icons.star : Icons.star_border),
onPressed: () => setModalState(() => difficulty = index + 1),
)),
),
// 属性选择
Wrap(
children: AttributeType.values.map((attr) => FilterChip(
label: Text('${attr.emoji} ${attr.label}'),
selected: selectedAttributes.contains(attr),
onSelected: (selected) => setModalState(() {
selected ? selectedAttributes.add(attr) : selectedAttributes.remove(attr);
}),
)).toList(),
),
// 创建按钮
FilledButton(
onPressed: () {
final task = RPGTask(
id: DateTime.now().millisecondsSinceEpoch.toString(),
title: titleController.text,
type: selectedType,
difficulty: difficulty,
attributes: selectedAttributes,
createdAt: DateTime.now(),
);
setState(() => _tasks.insert(0, task));
Navigator.pop(context);
},
child: Text('创建任务'),
),
],
),
),
),
);
}
六、交互设计
6.1 任务完成流程
6.2 升级流程
6.3 成就解锁流程
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 技能系统
技能解锁机制：
- 等级达到要求解锁技能
- 技能提供额外加成
- 技能树分支选择
7.2.2 装备系统
装备收集机制：
- 完成特定任务获得装备
- 装备提供属性加成
- 装备稀有度分级
7.2.3 组队系统
社交互动机制：
- 创建或加入队伍
- 队伍任务加成
- 队伍排行榜
八、注意事项
8.1 开发注意事项
-
经验计算：使用公式
level * 100 + level * level * 10 -
属性更新：完成任务时遍历关联属性逐一增加
-
成就检测：每次完成任务后遍历所有成就检查
-
状态管理：完成任务后需要setState更新多个数据
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 经验不更新 | 未调用setState | 确保状态更新 |
| 属性不增长 | 属性列表为空 | 检查attributes |
| 成就不解锁 | 进度计算错误 | 检查category匹配 |
| 升级异常 | 经验扣除错误 | 检查循环条件 |
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_life_rpg.dart --web-port 8109
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_life_rpg.dart
# 运行到Windows
flutter run -d windows -t lib/main_life_rpg.dart
# 代码分析
flutter analyze lib/main_life_rpg.dart
十、总结
人生RPG应用通过游戏化的方式，将日常任务转化为RPG冒险，让用户在完成任务的过程中获得成就感和成长感。应用支持5种任务类型，每种类型对应不同的经验奖励；6种角色属性，通过完成任务逐步提升；8项成就挑战，激励用户持续进步。
核心功能涵盖任务系统、角色系统、成就系统三大模块。任务系统支持日常、主线、支线、挑战、习惯五种类型，每种类型有不同的基础经验值；角色系统包含等级、经验、属性三个维度，完成任务可获得经验提升等级和属性；成就系统提供任务、等级、连续、属性四类成就，解锁后给予用户正向反馈。
应用采用Material Design 3设计规范，以紫色为主色调，界面奇幻有趣。通过本应用，希望能够帮助用户以游戏化的方式管理生活，激发自我提升的动力，让每一天都成为精彩的冒险。
把生活变成一场精彩的冒险
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
7
0- 0
已为社区贡献10条内容
所有评论(0)