Flutter 框架跨平台鸿蒙开发 - 人生RPG - 把日常任务变成RPG任务，完成获得经验值

人生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 整体架构图

Data Layer
Presentation Layer
主页面

LifeRPGHomePage
任务页面
角色页面
成就页面
设置页面
角色头部
任务列表
添加任务
任务卡片
任务详情
角色卡片
属性面板
统计卡片
成就列表
成就卡片
RPGTask

任务模型
Character

角色模型
Achievement

成就模型
TaskType

任务类型
AttributeType

属性类型

2.2 类图设计

has
has many
has attributes
manages
manages
manages
LifeRPGApp
+Widget build()
<<enumeration>>
TaskType
+String label
+IconData icon
+Color color
+int baseExp
+daily()
+mainQuest()
+sideQuest()
+challenge()
+habit()
<<enumeration>>
AttributeType
+String label
+String emoji
+Color color
+List<String> examples
+strength()
+intelligence()
+agility()
+charisma()
+endurance()
+luck()
RPGTask
+String id
+String title
+String? description
+TaskType type
+int difficulty
+List<AttributeType> attributes
+int expReward
+bool completed
+DateTime? completedAt
+bool isRecurring
+int streak
Character
+String name
+int level
+int exp
+int totalExp
+Map<AttributeType, int> attributes
+int tasksCompleted
+int currentStreak
+int longestStreak
+int get expToNextLevel
+double get expProgress
Achievement
+String id
+String title
+String description
+AchievementCategory category
+IconData icon
+Color color
+int requirement
+int progress
+bool unlocked
LifeRPGHomePage
-int _selectedIndex
-Character _character
-List<RPGTask> _tasks
-List<Achievement> _achievements
+Widget build()
-_completeTask()
-_updateAchievements()

2.3 页面导航流程

任务
角色
成就
设置
应用启动
任务页面
底部导航
任务列表
角色面板
成就殿堂
设置页面
点击任务
查看详情
完成任务
获得经验
属性提升
添加任务
填写表单
创建任务
查看属性
查看统计
浏览成就
查看进度

2.4 数据流向图

成就系统角色系统任务页面用户成就系统角色系统任务页面用户完成任务获得经验值计算升级更新属性检查成就更新进度解锁成就提示显示升级动画

三、核心模块设计

3.1 数据模型设计

3.1.1 任务类型枚举 (TaskType)

dart 复制代码

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)

dart 复制代码

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)

dart 复制代码

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)

dart 复制代码

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 任务类型分布

25% 25% 25% 13% 13% 任务类型分布日常任务主线任务支线任务挑战任务习惯养成

3.2 页面结构设计

3.2.1 主页面布局

LifeRPGHomePage
IndexedStack
任务页面
角色页面
成就页面
设置页面
NavigationBar
任务 Tab
角色 Tab
成就 Tab
设置 Tab

3.2.2 任务页面结构

任务页面
SliverAppBar
任务列表
已完成列表
角色头部
等级显示
经验条
连续天数
类型筛选
任务卡片
任务信息
完成按钮

3.2.3 角色页面结构

角色页面
角色卡片
属性面板
统计卡片
角色头像
名称等级
经验进度
力量属性
智力属性
敏捷属性
魅力属性
耐力属性
幸运属性
完成任务
连续天数
最长连续

3.2.4 成就页面结构

成就页面
成就统计
成就列表
解锁进度
任务成就
等级成就
连续成就
属性成就
特殊成就

3.3 经验值计算

是
否
完成任务
获取任务类型
基础经验值
乘以难度系数
最终经验值
累加到角色
是否升级
等级+1
重置经验
累加经验

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 经验值计算

dart 复制代码

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 任务完成处理

dart 复制代码

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 属性条显示

dart 复制代码

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 成就检测

dart 复制代码

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 创建任务

dart 复制代码

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 升级流程

是
是
否
否
获得经验
经验>=升级所需?
等级+1
扣除升级经验
显示升级动画
还有多余经验?
完成

6.3 成就解锁流程

完成任务
未达要求
达到要求
弹出通知
未解锁
进度更新
已解锁
显示提示

七、扩展功能规划

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 2024-03-24 任务系统经验等级系统属性成就系统数据持久化技能系统装备系统组队系统排行榜云端同步 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本人生RPG应用开发计划

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 运行命令

bash 复制代码

# 查看可用设备
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设计规范，以紫色为主色调，界面奇幻有趣。通过本应用，希望能够帮助用户以游戏化的方式管理生活，激发自我提升的动力，让每一天都成为精彩的冒险。

把生活变成一场精彩的冒险