Flutter 框架跨平台鸿蒙开发 - 遗憾博物馆应用

遗憾博物馆：人生智慧的跨平台分享应用遗憾博物馆是一款基于Flutter开发的跨平台应用，采用灰蓝色调设计，以博物馆展品形式展示各类人生遗憾故事。应用包含八大分类（事业、感情、家庭等）和四个遗憾等级，通过卡片列表、分类筛选和统计图表等功能，帮助用户从他人经历中汲取教训。支持提交个人遗憾、点赞收藏等互动，采用Material Design 3规范开发，兼容鸿蒙OS和Web平台。项目结构清晰，包含完整

math_hongfan

325人浏览 · 2026-04-08 23:08:04

math_hongfan · 2026-04-08 23:08:04 发布

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

一、项目概述

运行效果图

1.1 应用简介

遗憾博物馆是一款独特的人生智慧分享应用，收集人们的遗憾故事，让后来者从中获得启示与警示。应用以灰蓝色为主色调，象征沉思与智慧。界面设计采用博物馆展品卡片的形式，将每一条遗憾都视为珍贵的展品。

应用通过分类展示不同类型的人生遗憾，包括事业、感情、家庭、健康、学业、财务、时间和勇气等八个维度。每条遗憾都包含教训总结，让浏览者能够从他人的经历中学习。用户可以点赞、收藏有启发的遗憾，也可以分享自己的遗憾，为后来者点亮一盏灯。

1.2 核心功能

功能模块	功能描述	实现方式
遗憾展示	展示收集的遗憾故事	卡片列表
分类浏览	按类型筛选遗憾	网格分类
详情查看	查看遗憾详情和教训	底部面板
提交遗憾	分享自己的遗憾	表单对话框
互动功能	点赞和收藏遗憾	状态管理
统计分析	遗憾数据统计	图表展示

1.3 遗憾分类体系

应用将人生遗憾划分为八大类别：

分类	图标	颜色	典型遗憾
事业	work	#5C6BC0	放弃梦想、错失机会
感情	favorite	#E91E63	错过表白、失去联系
家庭	home	#00BCD4	缺少陪伴、忽视亲情
健康	healing	#4CAF50	透支身体、忽视健康
学业	school	#FF9800	放弃学习、选错专业
财务	attach_money	#8BC34A	错过理财、投资失误
时间	schedule	#9C27B0	浪费时间、虚度光阴
勇气	flash_on	#FF5722	缺乏勇气、不敢尝试

1.4 遗憾程度等级

等级	名称	颜色	说明
1	轻微遗憾	#90A4AE	可以弥补的遗憾
2	一般遗憾	#78909C	影响较小的遗憾
3	深刻遗憾	#607D8B	影响深远的遗憾
4	终生遗憾	#455A64	无法弥补的遗憾

1.5 技术栈

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

1.6 项目结构

lib/
└── main_regret_museum.dart
    ├── RegretMuseumApp           # 应用入口
    ├── RegretCategory            # 遗憾分类枚举
    ├── RegretIntensity           # 遗憾程度枚举
    ├── Regret                    # 遗憾模型
    ├── RegretMuseumHomePage      # 主页面（底部导航）
    ├── _buildMuseumPage          # 博物馆页面
    ├── _buildCategoryPage        # 分类页面
    └── _buildStatsPage           # 统计页面

二、设计理念

2.1 遗憾博物馆可视化

2.2 遗憾分类模型

2.3 色彩体系

应用采用灰蓝色为主色调：

颜色类型	色值	RGB	用途
主色	#607D8B	96,125,139	导航、按钮、强调
辅助色	#455A64	69,90,100	渐变、次要元素
事业色	#5C6BC0	92,107,192	事业类遗憾
感情色	#E91E63	233,30,99	感情类遗憾
家庭色	#00BCD4	0,188,212	家庭类遗憾
健康色	#4CAF50	76,175,80	健康类遗憾

2.4 遗憾提交流程

三、系统架构

3.1 整体架构图

3.2 类图设计

3.3 遗憾浏览流程

四、核心功能实现

4.1 遗憾分类枚举

定义八大遗憾分类：

enum RegretCategory {
  career('事业', Icons.work, Color(0xFF5C6BC0)),
  relationship('感情', Icons.favorite, Color(0xFFE91E63)),
  family('家庭', Icons.home, Color(0xFF00BCD4)),
  health('健康', Icons.healing, Color(0xFF4CAF50)),
  education('学业', Icons.school, Color(0xFFFF9800)),
  finance('财务', Icons.attach_money, Color(0xFF8BC34A)),
  time('时间', Icons.schedule, Color(0xFF9C27B0)),
  courage('勇气', Icons.flash_on, Color(0xFFFF5722));

  final String label;
  final IconData icon;
  final Color color;

  const RegretCategory(this.label, this.icon, this.color);
}

4.2 遗憾程度枚举

定义四级遗憾程度：

enum RegretIntensity {
  mild('轻微遗憾', Color(0xFF90A4AE), 1),
  moderate('一般遗憾', Color(0xFF78909C), 2),
  strong('深刻遗憾', Color(0xFF607D8B), 3),
  profound('终生遗憾', Color(0xFF455A64), 4);

  final String label;
  final Color color;
  final int level;

  const RegretIntensity(this.label, this.color, this.level);
}

4.3 遗憾模型

遗憾数据模型定义：

class Regret {
  final String id;
  final String content;
  final String? lesson;
  final RegretCategory category;
  final RegretIntensity intensity;
  final int age;
  final String? gender;
  final DateTime createdAt;
  final int likes;
  final int saves;
  final bool isAnonymous;

  Regret({
    required this.id,
    required this.content,
    this.lesson,
    required this.category,
    required this.intensity,
    required this.age,
    this.gender,
    required this.createdAt,
    this.likes = 0,
    this.saves = 0,
    this.isAnonymous = true,
  });
}

4.4 遗憾卡片渲染

遗憾卡片的核心渲染逻辑：

Widget _buildRegretCard(Regret regret) {
  return GestureDetector(
    onTap: () => _showRegretDetail(regret),
    child: Card(
      margin: const EdgeInsets.only(bottom: 16),
      elevation: 2,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
      ),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16),
          border: Border.all(
            color: regret.intensity.color.withOpacity(0.3),
            width: 1,
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 分类和程度标签
              Row(
                children: [
                  Container(
                    padding: const EdgeInsets.all(8),
                    decoration: BoxDecoration(
                      color: regret.category.color.withOpacity(0.2),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: Icon(
                      regret.category.icon,
                      color: regret.category.color,
                      size: 18,
                    ),
                  ),
                  // 程度标签
                  Container(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 8,
                      vertical: 4,
                    ),
                    decoration: BoxDecoration(
                      color: regret.intensity.color.withOpacity(0.2),
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: Text(
                      regret.intensity.label,
                      style: TextStyle(
                        fontSize: 10,
                        color: regret.intensity.color,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ],
              ),
              // 遗憾内容
              Text(
                regret.content,
                style: const TextStyle(fontSize: 15, height: 1.5),
                maxLines: 3,
                overflow: TextOverflow.ellipsis,
              ),
              // 教训总结
              if (regret.lesson != null)
                Container(
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: const Color(0xFF607D8B).withOpacity(0.05),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Row(
                    children: [
                      Icon(Icons.lightbulb_outline, size: 16),
                      Expanded(child: Text(regret.lesson!)),
                    ],
                  ),
                ),
            ],
          ),
        ),
      ),
    ),
  );
}

4.5 详情面板

遗憾详情的底部面板：

void _showRegretDetail(Regret regret) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    backgroundColor: Colors.transparent,
    builder: (context) => DraggableScrollableSheet(
      initialChildSize: 0.7,
      minChildSize: 0.5,
      maxChildSize: 0.95,
      builder: (context, scrollController) {
        return Container(
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
          ),
          child: Column(
            children: [
              // 拖动指示器
              Container(
                width: 40,
                height: 4,
                margin: const EdgeInsets.symmetric(vertical: 12),
                decoration: BoxDecoration(
                  color: Colors.grey[300],
                  borderRadius: BorderRadius.circular(2),
                ),
              ),
              // 内容区域
              Expanded(
                child: SingleChildScrollView(
                  controller: scrollController,
                  child: Column(
                    children: [
                      // 分类和程度
                      // 遗憾内容
                      // 教训总结
                      // 互动按钮
                    ],
                  ),
                ),
              ),
            ],
          ),
        );
      },
    ),
  );
}

4.6 点赞收藏功能

互动功能的状态管理：

void _toggleLike(String regretId) {
  setState(() {
    if (_likedRegrets.contains(regretId)) {
      _likedRegrets.remove(regretId);
      // 减少点赞数
    } else {
      _likedRegrets.add(regretId);
      // 增加点赞数
    }
  });
}

void _toggleSave(String regretId) {
  setState(() {
    if (_savedRegrets.contains(regretId)) {
      _savedRegrets.remove(regretId);
    } else {
      _savedRegrets.add(regretId);
    }
  });
}

五、UI设计规范

5.1 配色方案

应用采用灰蓝色为主色调：

颜色类型	色值	用途
主色	#607D8B	导航、按钮、强调
辅助色	#455A64	渐变、次要元素
事业色	#5C6BC0	事业类遗憾
感情色	#E91E63	感情类遗憾
家庭色	#00BCD4	家庭类遗憾
健康色	#4CAF50	健康类遗憾

5.2 字体规范

元素	字号	字重	颜色
页面标题	20px	Bold	#000000
遗憾内容	15px	Regular	#000000
教训总结	12px	Regular	#666666
分类标签	10px	Bold	分类颜色
程度标签	10px	Bold	程度颜色

5.3 组件规范

5.3.1 遗憾卡片

┌─────────────────────────────────────────┐
│ [💼] 事业    [深刻遗憾]          35岁   │
│                                         │
│ 年轻时没有好好学习英语，现在工作机会    │
│ 受限。                                  │
│                                         │
│ 💡 语言能力是打开世界的钥匙...          │
│                                         │
│ ♡ 234    ⚲ 156              30天前    │
└─────────────────────────────────────────┘

5.3.2 分类卡片

┌───────────────────┐
│ [💼]              │
│                   │
│ 事业              │
│ 12 条遗憾         │
└───────────────────┘

5.3.3 详情面板

┌─────────────────────────────────────────┐
│                 ────                    │
│                                         │
│ [💼] 事业    [深刻遗憾]                 │
│              35岁 · 男                  │
│                                         │
│ ┌─────────────────────────────────────┐ │
│ │ " 遗憾                              │ │
│ │                                     │ │
│ │ 年轻时没有好好学习英语...            │ │
│ └─────────────────────────────────────┘ │
│                                         │
│ ┌─────────────────────────────────────┐ │
│ │ 💡 教训                             │ │
│ │                                     │ │
│ │ 语言能力是打开世界的钥匙...          │ │
│ └─────────────────────────────────────┘ │
│                                         │
│    ♡ 234    ⚲ 156    ↗ 分享            │
└─────────────────────────────────────────┘

六、交互设计

6.1 博物馆页面交互

6.2 遗憾提交流程

6.3 页面切换状态

七、数据分析

7.1 统计指标

统计项	计算方式	说明
遗憾总数	_regrets.length	收集的遗憾数量
总共鸣	所有点赞数之和	用户共鸣程度
总收藏	所有收藏数之和	用户收藏热度
平均年龄	所有年龄平均值	遗憾人群年龄

7.2 分类分布分析

Map<RegretCategory, int> _calculateCategoryDistribution() {
  final distribution = <RegretCategory, int>{};
  for (var category in RegretCategory.values) {
    distribution[category] = _regrets.where((r) => r.category == category).length;
  }
  return distribution;
}

7.3 程度分布分析

程度	计算方式	应用价值
轻微遗憾	统计该程度数量	了解可弥补的遗憾
一般遗憾	统计该程度数量	了解常见遗憾
深刻遗憾	统计该程度数量	了解重要遗憾
终生遗憾	统计该程度数量	了解严重遗憾

7.4 年龄分布分析

年龄段	分析维度	应用价值
20-30岁	青年遗憾	了解年轻人困惑
30-40岁	中年遗憾	了解中年人压力
40-50岁	壮年遗憾	了解壮年人反思
50岁以上	晚年遗憾	了解老年人智慧

八、扩展功能规划

8.1 后续版本规划

8.2 功能扩展建议

8.2.1 评论功能

支持用户评论遗憾：

发表看法和建议
分享类似经历
提供解决方案
互动交流

8.2.2 分享功能

遗憾分享系统：

生成分享图片
社交平台分享
匿名分享
生成海报

8.2.3 AI分析

AI辅助分析功能：

遗憾情感分析
智能分类推荐
相似遗憾匹配
解决方案建议

九、注意事项

9.1 开发注意事项

数据安全：用户提交的遗憾需要保护隐私
状态管理：使用setState管理本地状态，注意刷新时机
性能优化：列表使用SliverList实现懒加载
用户体验：详情面板要流畅，表单要简洁

9.2 常见问题

问题	原因	解决方案
遗憾不显示	数据为空	检查_regrets
分类筛选无效	状态未更新	检查setState
点赞不更新	状态未刷新	检查toggleLike
表单提交失败	数据验证	检查必填字段

9.3 使用提示

🏛️ 遗憾博物馆使用小贴士 🏛️

前人的遗憾，后人的灯塔。
每一条遗憾都是一份珍贵的经验。
从他人的经历中学习，避免重蹈覆辙。
分享你的遗憾，帮助更多的人。

提示：定期浏览博物馆，获得人生智慧。

十、运行说明

10.1 环境要求

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

10.2 运行命令

# 查看可用设备
flutter devices

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

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

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

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

十一、总结

遗憾博物馆是一款独特的人生智慧分享应用，收集人们的遗憾故事，让后来者从中获得启示与警示。应用以灰蓝色为主色调，采用博物馆展品卡片的形式，将每一条遗憾都视为珍贵的展品。

从技术实现来看，应用使用枚举类型定义八大遗憾分类和四级遗憾程度，通过卡片列表展示遗憾，使用底部面板展示详情，通过setState管理点赞和收藏状态。分类筛选和统计分析功能让用户能够深入了解遗憾分布。

从用户体验来看，应用提供直观的博物馆展示，让用户能够浏览他人的遗憾。点击卡片查看详情，点赞收藏有启发的遗憾，操作简单直观。提交功能让用户能够分享自己的遗憾，为后来者点亮一盏灯。

应用不仅是一个遗憾收集平台，更是一个人生智慧分享社区。它提醒我们：前人的遗憾，后人的灯塔；每一条遗憾都是一份珍贵的经验；从他人的经历中学习，避免重蹈覆辙；分享你的遗憾，帮助更多的人。在人生的道路上，遗憾博物馆为我们提供了一面镜子，让我们能够从他人的经历中获得智慧。

前人的遗憾，后人的灯塔

人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

Flutter 框架跨平台鸿蒙开发 - 作业提交与互评系统应用

运行效果图作业提交与互评系统是一款教育学习应用，为学生提供作业提交、互评、成绩查询等功能。支持多种作业类型、在线提交、匿名互评、成绩统计，提升学习效率。应用涵盖作业管理、提交系统、互评模块、成绩查询四大模块。应用以教育的蓝色为主色调，象征知识与学习。学生可以快速提交作业、参与互评、查看成绩、了解学习进度，享受便捷的学习体验。序号类型名称Emoji描述1文档作业📄Word、PDF文档2代码作业💻

人工智能6S服务平台

开源鸿蒙跨平台Flutter开发：校园问答互助社区应用

人工智能6S服务平台

Flutter 框架跨平台鸿蒙开发 - 家庭食谱传承系统

运行效果图家庭食谱传承系统是一款生活服务类应用，致力于记录和传承家庭传统菜谱。支持按家庭成员分类管理，包含奶奶、爷爷、妈妈、爸爸、阿姨、叔叔六位家人的拿手菜谱，配有详细的食材清单、烹饪步骤、视频教程，让家的味道代代相传。每道菜谱背后都有一段温馨的故事，承载着家人之间的爱与记忆。应用以温暖的棕色为主色调，象征家的温馨与传承。序号成员名称Emoji色值1奶奶👵#E91E632爷爷👴#9C27B03