Flutter 框架跨平台鸿蒙开发 - 恐惧清单应用

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

一、项目概述

运行效果图

1.1 应用简介

恐惧清单是一款心理成长类应用，帮助用户列出所有恐惧，并逐一面对克服。通过系统化的恐惧管理，用户可以逐步挑战自己的恐惧，记录面对过程，最终实现个人成长。

应用核心理念：直面恐惧，成就更强大的自己。

恐惧是人类最原始的情感之一，它保护我们远离危险，但也可能限制我们的成长。恐惧清单应用帮助用户正视恐惧，通过科学的方法逐步克服，让每一次面对都成为成长的机会。

1.2 核心功能

功能模块	功能描述	实现方式
恐惧管理	添加、编辑、删除恐惧	CRUD操作
分类管理	按类型分类恐惧	枚举分类
程度评估	评估恐惧严重程度	四级评估
步骤追踪	追踪面对恐惧的进度	步骤列表
状态更新	更新恐惧面对状态	状态枚举
统计分析	统计恐惧克服情况	数据统计
成就系统	解锁克服恐惧成就	成就列表

1.3 恐惧分类

序号	类型	Emoji	描述	示例
1	社交恐惧	👥	与人交往相关的恐惧	公开演讲、社交拒绝
2	自然恐惧	🌪️	自然现象相关的恐惧	高空、雷电、水
3	动物恐惧	🐍	动物相关的恐惧	蜘蛛、蛇、狗
4	情境恐惧	🏢	特定情境相关的恐惧	密闭空间、电梯
5	健康恐惧	🏥	健康相关的恐惧	疾病、医疗
6	失败恐惧	📉	失败相关的恐惧	尝试新事物、冒险
7	未知恐惧	❓	未知事物相关的恐惧	黑暗、未来
8	其他恐惧	📝	其他类型的恐惧	个人特殊恐惧

1.4 恐惧程度

程度	Emoji	等级	描述	建议
轻微	🌱	1	可以轻松面对	自行克服
中等	🌿	2	需要一些勇气	逐步面对
严重	🌳	3	需要很大勇气	系统训练
极度	🏔️	4	需要专业帮助	寻求专业支持

1.5 恐惧状态

状态	Emoji	颜色	描述
待面对	⏳	灰色	尚未开始面对
面对中	🔥	橙色	正在积极面对
已克服	🏆	绿色	成功克服恐惧
暂缓	⏸️	蓝灰	暂时搁置

1.6 技术栈

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

二、项目结构

复制代码

lib/
├── main_fear_list.dart    # 应用主入口（~1050行）
│   ├── FearListApp        # 根应用组件
│   ├── FearCategory       # 恐惧分类枚举
│   ├── FearLevel          # 恐惧程度枚举
│   ├── FearStatus         # 恐惧状态枚举
│   ├── Fear               # 恐惧模型
│   ├── FacingStep         # 面对步骤模型
│   ├── Achievement        # 成就模型
│   └── FearListHomePage   # 主页面

三、数据模型

3.1 恐惧分类枚举 (FearCategory)

dart 复制代码

enum FearCategory {
  social('社交恐惧', '👥', '与人交往相关的恐惧'),
  nature('自然恐惧', '🌪️', '自然现象相关的恐惧'),
  animal('动物恐惧', '🐍', '动物相关的恐惧'),
  situation('情境恐惧', '🏢', '特定情境相关的恐惧'),
  health('健康恐惧', '🏥', '健康相关的恐惧'),
  failure('失败恐惧', '📉', '失败相关的恐惧'),
  unknown('未知恐惧', '❓', '未知事物相关的恐惧'),
  other('其他恐惧', '📝', '其他类型的恐惧');

  final String label;       // 类型名称
  final String icon;        // 代表图标
  final String description; // 类型描述
}

3.2 恐惧程度枚举 (FearLevel)

dart 复制代码

enum FearLevel {
  mild('轻微', '🌱', 1, '可以轻松面对'),
  moderate('中等', '🌿', 2, '需要一些勇气'),
  severe('严重', '🌳', 3, '需要很大勇气'),
  extreme('极度', '🏔️', 4, '需要专业帮助');

  final String label;       // 程度名称
  final String icon;        // 代表图标
  final int value;          // 数值等级
  final String description; // 程度描述
}

3.3 恐惧状态枚举 (FearStatus)

dart 复制代码

enum FearStatus {
  pending('待面对', '⏳', Color(0xFF9E9E9E)),
  inProgress('面对中', '🔥', Color(0xFFFF9800)),
  conquered('已克服', '🏆', Color(0xFF4CAF50)),
  postponed('暂缓', '⏸️', Color(0xFF607D8B));

  final String label; // 状态名称
  final String icon;  // 状态图标
  final Color color;  // 状态颜色
}

3.4 恐惧模型 (Fear)

dart 复制代码

class Fear {
  final String id;              // 唯一标识
  final String title;           // 恐惧名称
  final String description;     // 恐惧描述
  final FearCategory category;  // 恐惧分类
  final FearLevel level;        // 恐惧程度
  final FearStatus status;      // 恐惧状态
  final DateTime createdAt;     // 创建时间
  final DateTime? conqueredAt;  // 克服时间
  final List<FacingStep> steps; // 面对步骤
  final int completedSteps;     // 已完成步骤数
  final String? notes;          // 备注
}

3.5 面对步骤模型 (FacingStep)

dart 复制代码

class FacingStep {
  final String id;           // 唯一标识
  final String title;        // 步骤标题
  final String description;  // 步骤描述
  final bool isCompleted;    // 是否完成
  final DateTime? completedAt; // 完成时间
}

3.6 成就模型 (Achievement)

dart 复制代码

class Achievement {
  final String id;            // 唯一标识
  final String title;         // 成就名称
  final String description;   // 成就描述
  final String icon;          // 成就图标
  final bool isUnlocked;      // 是否解锁
  final DateTime? unlockedAt; // 解锁时间
}

3.7 数据流转图

否
是
添加恐惧
选择分类
评估程度
生成步骤
开始面对
完成步骤
全部完成?
标记克服
解锁成就

四、核心功能实现

4.1 添加恐惧

dart 复制代码

void _addFear() {
  if (_fearTitleController.text.isEmpty) return;

  setState(() {
    _fears.insert(
      0,
      Fear(
        id: DateTime.now().millisecondsSinceEpoch.toString(),
        title: _fearTitleController.text,
        description: _fearDescController.text.isEmpty
            ? '暂无描述'
            : _fearDescController.text,
        category: _selectedCategory,
        level: _selectedLevel,
        status: FearStatus.pending,
        createdAt: DateTime.now(),
        steps: _generateDefaultSteps(_selectedCategory),
        completedSteps: 0,
      ),
    );
  });
}

4.2 生成默认步骤

根据恐惧类型自动生成面对步骤：

dart 复制代码

List<FacingStep> _generateDefaultSteps(FearCategory category) {
  switch (category) {
    case FearCategory.social:
      return [
        FacingStep(id: '1', title: '了解恐惧来源', description: '思考为什么害怕'),
        FacingStep(id: '2', title: '小范围尝试', description: '在安全环境中练习'),
        FacingStep(id: '3', title: '逐步扩大范围', description: '挑战更大的场合'),
      ];
    case FearCategory.animal:
      return [
        FacingStep(id: '1', title: '看图片或视频', description: '从视觉开始脱敏'),
        FacingStep(id: '2', title: '远距离观察', description: '保持安全距离'),
        FacingStep(id: '3', title: '近距离接触', description: '在专业人士指导下'),
      ];
    // ... 其他类型
  }
}

4.3 完成步骤

dart 复制代码

void _completeStep(Fear fear, int stepIndex) {
  setState(() {
    final index = _fears.indexWhere((f) => f.id == fear.id);
    if (index != -1) {
      final steps = List<FacingStep>.from(fear.steps);
      steps[stepIndex] = FacingStep(
        id: steps[stepIndex].id,
        title: steps[stepIndex].title,
        description: steps[stepIndex].description,
        isCompleted: true,
        completedAt: DateTime.now(),
      );

      int completedCount = steps.where((s) => s.isCompleted).length;

      FearStatus newStatus = fear.status;
      if (completedCount == steps.length) {
        newStatus = FearStatus.conquered;
      } else if (fear.status == FearStatus.pending) {
        newStatus = FearStatus.inProgress;
      }

      _fears[index] = Fear(
        id: fear.id,
        // ... 更新其他字段
        status: newStatus,
        steps: steps,
        completedSteps: completedCount,
      );
    }
  });
}

4.4 更新恐惧状态

dart 复制代码

void _updateFearStatus(Fear fear, FearStatus newStatus) {
  setState(() {
    final index = _fears.indexWhere((f) => f.id == fear.id);
    if (index != -1) {
      _fears[index] = Fear(
        id: fear.id,
        title: fear.title,
        description: fear.description,
        category: fear.category,
        level: fear.level,
        status: newStatus,
        createdAt: fear.createdAt,
        conqueredAt: newStatus == FearStatus.conquered ? DateTime.now() : null,
        steps: fear.steps,
        completedSteps: fear.completedSteps,
        notes: fear.notes,
      );
    }
  });
}

五、恐惧分类详解

5.1 社交恐惧 👥

属性	描述
定义	与人交往时产生的恐惧和焦虑
常见表现	公开演讲、社交拒绝、被评价
面对策略	渐进式暴露、认知重构
推荐步骤	了解来源→小范围尝试→逐步扩大

典型恐惧示例：

恐惧	程度	面对步骤
公开演讲	严重	镜前练习→家人面前→小组发言→演讲俱乐部
社交拒绝	中等	陌生人打招呼→邀请朋友→表达真实想法
被评价	中等	接受小批评→主动寻求反馈→公开分享

5.2 自然恐惧 🌪️

属性	描述
定义	对自然现象产生的恐惧
常见表现	高空、雷电、水、火
面对策略	知识学习、渐进式接触
推荐步骤	了解现象→渐进接触→安全体验

5.3 动物恐惧 🐍

属性	描述
定义	对特定动物产生的恐惧
常见表现	蜘蛛、蛇、狗、昆虫
面对策略	系统脱敏疗法
推荐步骤	图片→视频→远距离→近距离

5.4 失败恐惧 📉

属性	描述
定义	害怕尝试新事物因为担心失败
常见表现	不敢冒险、完美主义、拖延
面对策略	重构失败认知、小风险尝试
推荐步骤	列出结果→小失败尝试→学习成长

六、UI设计

6.1 色彩系统

应用以蓝灰色为主色调，营造沉稳内敛的氛围：

颜色类型	色值	用途
背景渐变1	#263238	深蓝灰
背景渐变2	#37474F	中蓝灰
背景渐变3	#455A64	浅蓝灰
主色调	#37474F	蓝灰
强调色	#78909C	浅蓝灰
文字主色	#FFFFFF	白色

6.2 状态配色

状态	颜色	色值	意象
待面对	灰色	#9E9E9E	静止等待
面对中	橙色	#FF9800	积极行动
已克服	绿色	#4CAF50	成功达成
暂缓	蓝灰	#607D8B	暂时搁置

6.3 页面结构

复制代码

┌─────────────────────────────────────┐
│  🦁 恐惧清单                        │  ← 标题栏
│  列出所有恐惧，逐一面对             │
├─────────────────────────────────────┤
│  [⏳待面对:2] [🔥面对中:1] [🏆已克服:2]│  ← 统计卡片
├─────────────────────────────────────┤
│  [恐惧清单] [统计] [成就]          │  ← Tab栏
├─────────────────────────────────────┤
│  🔥 正在面对  1                     │
│  ┌─────────────────────────────┐  │
│  │ 👥 公开演讲        [🔥面对中]│  │
│  │ 在众人面前讲话时感到紧张...  │  ← 恐惧卡片
│  │ 🌳 严重  ████░░░░ 2/4       │  │
│  └─────────────────────────────┘  │
│  ⏳ 待面对  2                       │
│  ┌─────────────────────────────┐  │
│  │ 🌪️ 高空恐惧        [⏳待面对]│  │
│  │ 站在高处时感到眩晕和恐惧     │  │
│  │ 🌿 中等  ░░░░░░░░ 0/3       │  │
│  └─────────────────────────────┘  │
└─────────────────────────────────────┘

6.4 详情页面结构

复制代码

┌─────────────────────────────────────┐
│  👥 公开演讲                  🗑️   │  ← 标题和删除
│  [🔥 面对中]                        │
│  在众人面前讲话时感到紧张和恐惧     │  ← 描述
├─────────────────────────────────────┤
│  [🌳严重] [📅30天前] [🏆已克服]    │  ← 信息标签
├─────────────────────────────────────┤
│  面对步骤                           │
│  ✓ ① 在镜子前练习演讲              │  ← 步骤列表
│  ✓ ② 在家人面前演讲                │
│  ○ ③ 在小组会议上发言              │
│  ○ ④ 参加演讲俱乐部                │
├─────────────────────────────────────┤
│  状态更新                           │
│  [⏳待面对] [🔥面对中] [🏆已克服] [⏸️暂缓]│
└─────────────────────────────────────┘

6.5 交互设计

交互元素	触发方式	响应行为
恐惧卡片	点击	显示详情弹窗
步骤圆圈	点击	标记步骤完成
状态按钮	点击	更新恐惧状态
添加按钮	点击	打开添加弹窗
删除按钮	点击	删除恐惧

七、状态管理

7.1 状态分类

状态类型	状态名称	说明
恐惧列表	`_fears`	所有恐惧数据
成就列表	`_achievements`	所有成就数据
选中的恐惧	`_selectedFear`	当前查看的恐惧
输入控制器	`_fearTitleController`	恐惧名称输入
输入控制器	`_fearDescController`	恐惧描述输入
选中分类	`_selectedCategory`	当前选择的分类
选中程度	`_selectedLevel`	当前选择的程度

7.2 状态流转

添加恐惧
开始面对
全部完成
暂时搁置
继续面对
完成克服
待面对
面对中
已克服
暂缓

7.3 面对流程图

步骤系统应用用户步骤系统应用用户 alt [全部完成] [未全部完成] 添加恐惧生成默认步骤返回步骤列表显示恐惧卡片点击步骤完成更新步骤状态检查是否全部完成更新状态为已克服显示祝贺消息更新进度

八、心理学原理

8.1 暴露疗法

恐惧清单应用基于心理学中的暴露疗法原理：
暴露疗法
核心原理
系统脱敏
渐进式暴露
习惯化
实施步骤
建立恐惧层级
学习放松技巧
逐步暴露
效果机制
减少焦虑反应
建立新认知
增强自我效能

8.2 恐惧层级

应用通过步骤系统建立恐惧层级：

F e a r L e v e l = ∑ i = 1 n S t e p i × D i f f i c u l t y i FearLevel = \sum_{i=1}^{n} Step_i \times Difficulty_i FearLevel=i=1∑nStepi×Difficultyi

其中：

S t e p i Step_i Stepi 为第i个步骤
D i f f i c u l t y i Difficulty_i Difficultyi 为该步骤的难度系数
n n n 为总步骤数

8.3 成长曲线

克服恐惧的成长曲线：

P r o g r e s s ( t ) = P 0 + ( P m a x − P 0 ) × ( 1 − e − k t ) Progress(t) = P_0 + (P_{max} - P_0) \times (1 - e^{-kt}) Progress(t)=P0+(Pmax−P0)×(1−e−kt)

其中：

P 0 P_0 P0 为初始恐惧程度
P m a x P_{max} Pmax 为最大克服程度
k k k 为学习速率
t t t 为时间

8.4 心理学价值

价值维度	描述
自我认知	帮助用户认识自己的恐惧
行为改变	通过步骤系统促进行为改变
成长记录	记录克服恐惧的成长过程
成就激励	通过成就系统激励用户

九、成就系统

9.1 成就列表

成就	图标	条件	难度
勇敢起步	🌱	添加第一个恐惧	简单
直面恐惧	🔥	开始面对一个恐惧	简单
小有成就	⭐	克服第一个恐惧	中等
勇者之路	🏆	克服5个恐惧	困难
无畏战士	👑	克服10个恐惧	极难
社交达人	👥	克服所有社交恐惧	困难
自然之子	🌍	克服所有自然恐惧	困难
极限挑战	🏔️	克服一个极度恐惧	极难

9.2 成就解锁逻辑

dart 复制代码

void _checkAchievements() {
  int conquered = _fears.where((f) => f.status == FearStatus.conquered).length;

  // 检查"勇者之路"成就
  if (conquered >= 5) {
    _unlockAchievement('4');
  }

  // 检查"无畏战士"成就
  if (conquered >= 10) {
    _unlockAchievement('5');
  }

  // 检查"极限挑战"成就
  bool hasExtremeConquered = _fears.any(
    (f) => f.level == FearLevel.extreme && f.status == FearStatus.conquered
  );
  if (hasExtremeConquered) {
    _unlockAchievement('8');
  }
}

十、性能优化

10.1 渲染优化

优化点	实现方式	效果
列表渲染	ListView.builder	按需渲染
Tab切换	TabController	平滑切换
状态更新	setState局部	减少重绘
弹窗管理	showModalBottomSheet	按需创建

10.2 内存管理

dart 复制代码

@override
void dispose() {
  _tabController.dispose();
  _fearTitleController.dispose();
  _fearDescController.dispose();
  super.dispose();
}

10.3 性能指标

指标	目标值	实测值
列表滚动	60fps	60fps
内存占用	< 50MB	待测试
启动时间	< 2s	待测试
CPU占用	< 15%	待测试

十一、常见问题

11.1 问题排查

问题	原因	解决方案
恐惧不显示	列表为空	检查_fears列表
步骤无法完成	索引错误	检查stepIndex
状态不更新	setState未调用	检查状态更新逻辑
成就不解锁	条件未满足	检查成就条件

11.2 调试技巧

dart 复制代码

// 打印恐惧状态
debugPrint('Total fears: ${_fears.length}');
debugPrint('Conquered: ${_fears.where((f) => f.status == FearStatus.conquered).length}');
debugPrint('In progress: ${_fears.where((f) => f.status == FearStatus.inProgress).length}');

// 打印步骤进度
for (var fear in _fears) {
  debugPrint('${fear.title}: ${fear.completedSteps}/${fear.steps.length}');
}

十二、运行说明

12.1 环境要求

环境	版本要求
Flutter SDK	>= 3.0.0
Dart SDK	>= 2.17.0
鸿蒙OS	API 21+

12.2 运行命令

bash 复制代码

# 查看可用设备
flutter devices

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_fear_list.dart

# 运行到Web服务器
flutter run -d web-server -t lib/main_fear_list.dart --web-port 8132

# 运行到Windows
flutter run -d windows -t lib/main_fear_list.dart

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

十三、扩展建议

13.1 功能扩展

功能	优先级	实现思路
数据持久化	高	本地存储恐惧数据
提醒功能	中	定期提醒面对恐惧
分享功能	中	分享克服经历
社区功能	低	与他人分享经验
专业指导	低	接入心理咨询服务

13.2 设计扩展

方向	描述
主题切换	多种配色主题
动画效果	克服恐惧动画
音效反馈	操作音效
振动反馈	触觉反馈

13.3 技术扩展

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 社交版本恐惧清单应用开发计划

十四、总结

恐惧清单应用通过系统化的恐惧管理，帮助用户直面恐惧、逐步克服。应用核心亮点包括：

14.1 核心特色

8种恐惧分类：全面覆盖各类恐惧类型
4级程度评估：科学评估恐惧严重程度
步骤追踪系统：记录面对恐惧的每一步
状态管理：清晰追踪恐惧面对进度
成就激励：通过成就系统激励用户

14.2 技术亮点

枚举类型设计：分类、程度、状态使用枚举，代码清晰
步骤系统：灵活的面对步骤管理
进度追踪：实时显示克服进度
成就系统：激励用户持续面对恐惧
统计分析：全面的数据统计展示

14.3 心理学价值

恐惧清单不仅是一个工具应用，更是一个心理成长平台。它基于暴露疗法原理，帮助用户系统化地面对恐惧，记录成长过程，最终实现自我突破。
**直面恐惧，成就更强大的自己！**

愿每一次面对都成为成长的机会 🦁