Flutter 框架跨平台鸿蒙开发 - 时间胶囊慢递应用

世人万千丶2026-04-10 15:05

开源鸿蒙社区 : https://openharmonycrossplatform.csdn.net

一、应用概述

运行效果图

时间胶囊慢递是一款生活创意类应用，让用户能够给未来的自己写一封信、录一段视频，设定开启时间后，到时自动"寄"给用户。这是一种独特的情感记录方式，帮助用户跨越时间与自己对话，在未来的某一天遇见过去的自己。

核心价值

维度 描述
情感寄托 将当下的心情、期望、祝福封存，在未来开启时获得独特的情感体验
自我对话 跨越时间的自我交流，见证个人成长与变化
仪式感 为人生重要时刻增添仪式感，记录生命中值得铭记的瞬间
时间管理 帮助用户设定长期目标，在未来回顾当初的期许

二、功能架构

时间胶囊慢递
创建胶囊
我的胶囊
开启记录
个人中心
选择类型
填写内容
设定时间
添加标签
待开启列表
进度展示
到期提醒
开启操作
历史记录
内容回顾
时间统计
数据统计
通知设置
隐私保护
数据备份

三、数据模型设计

3.1 时间胶囊模型

dart 复制代码 
class TimeCapsule {
  final String id;              // 胶囊唯一标识
  final String title;           // 胶囊标题
  final CapsuleType type;       // 胶囊类型
  final CapsuleStatus status;   // 胶囊状态
  final DateTime createdAt;     // 创建时间
  final DateTime openAt;        // 开启时间
  final String content;         // 文字内容
  final String? mediaPath;      // 媒体文件路径
  final List<String> tags;      // 内容标签
  final String? mood;           // 心情标签
  final bool isOpened;          // 是否已开启
}

3.2 胶囊类型枚举

类型 标签 图标 颜色值
letter 信件 mail_outline #6B5B95
video 视频 videocam_outlined #E74C3C
voice 语音 mic_outlined #3498DB
photo 图片 photo_outlined #27AE60
mixed 混合 dashboard_outlined #F39C12

3.3 胶囊状态枚举

状态 标签 图标 颜色值
pending 待开启 lock_outline #9B59B6
opened 已开启 lock_open_outlined #27AE60
expired 已过期 schedule_outlined #E74C3C
archived 已归档 archive_outlined #95A5A6

3.4 时间预设枚举

预设 标签 天数
oneWeek 一周后 7
oneMonth 一月后 30
threeMonths 三月后 90
halfYear 半年后 180
oneYear 一年后 365
threeYears 三年后 1095
fiveYears 五年后 1825
custom 自定义 0

四、界面设计

4.1 整体布局

应用采用底部标签导航结构，包含四个主要页面：
底部导航
创建
胶囊
记录
我的
胶囊类型选择
内容编辑区
时间设定器
标签选择器
待开启胶囊列表
胶囊卡片展示
进度条显示
已开启记录列表
历史回顾卡片
用户信息区
数据统计卡
设置选项列表

4.2 配色方案

应用采用深色主题，营造神秘、温馨的氛围：

元素 颜色值 用途
Primary #6B5B95 主色调，紫罗兰色
Secondary #88B04B 辅助色，自然绿
Tertiary #F7CAC9 点缀色，玫瑰粉
Background #0F0F23 背景色，深邃夜空
Surface #1A1A2E 卡片背景

4.3 核心组件

胶囊卡片组件

每个胶囊卡片展示以下信息：

  • 胶囊类型图标与颜色
  • 胶囊标题与创建日期
  • 开启状态标签
  • 时间进度条
  • 剩余时间/开启状态
  • 心情标签
  • 内容标签列表
开启对话框

当胶囊到期后，点击卡片弹出开启对话框：

  • 仪式感的开启动画
  • 创建时间与开启时间对比
  • 完整内容展示
  • 标签回顾
  • 确认开启按钮

五、核心功能实现

5.1 胶囊创建流程

是
否
通过
失败
开始创建
选择胶囊类型
输入标题
填写内容
选择开启时间
是否自定义时间?
打开日期选择器
使用预设时间
选择心情标签
选择内容标签
点击封存按钮
验证内容
创建胶囊成功
提示补充信息

5.2 时间计算逻辑

dart 复制代码 
Duration get remainingTime => openAt.difference(DateTime.now());

bool get canOpen => DateTime.now().isAfter(openAt);

double get progress {
  final total = openAt.difference(createdAt).inSeconds;
  final elapsed = DateTime.now().difference(createdAt).inSeconds;
  if (total <= 0) return 1.0;
  return (elapsed / total).clamp(0.0, 1.0);
}

5.3 胶囊开启流程

数据层 应用 用户 数据层 应用 用户 点击到期胶囊 检查canOpen状态 显示开启对话框 确认开启 更新胶囊状态 返回更新结果 添加到开启记录 显示开启成功

六、状态管理

6.1 主页状态

dart 复制代码 
class _TimeCapsuleHomePageState extends State<TimeCapsuleHomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final List<TimeCapsule> _capsules = [];
  final List<TimeCapsule> _openedRecords = [];
  int _totalCapsules = 0;
  int _pendingCapsules = 0;
  int _openedCapsules = 0;
}

6.2 统计数据更新

dart 复制代码 
void _updateStatistics() {
  _totalCapsules = _capsules.length;
  _pendingCapsules = _capsules.where((c) => c.status == CapsuleStatus.pending).length;
  _openedCapsules = _capsules.where((c) => c.status == CapsuleStatus.opened).length;
}

七、技术实现细节

7.1 依赖配置

yaml 复制代码 
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

environment:
  sdk: '>=3.0.0 <4.0.0'

7.2 主题配置

dart 复制代码 
ThemeData(
  useMaterial3: true,
  brightness: Brightness.dark,
  colorScheme: ColorScheme.dark(
    primary: const Color(0xFF6B5B95),
    secondary: const Color(0xFF88B04B),
    tertiary: const Color(0xFFF7CAC9),
    surface: const Color(0xFF1A1A2E),
    background: const Color(0xFF16213E),
  ),
)

7.3 渐变背景

dart 复制代码 
Container(
  decoration: const BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        Color(0xFF0F0F23),
        Color(0xFF1A1A2E),
        Color(0xFF16213E),
      ],
    ),
  ),
)

八、扩展功能规划

8.1 短期规划

功能 描述 优先级
媒体附件 支持添加图片、视频、语音文件 高
本地推送 胶囊到期时发送本地通知提醒 高
数据持久化 使用SQLite或Hive存储胶囊数据 高
密码保护 为胶囊设置开启密码 中

8.2 中期规划

功能 描述 优先级
云端同步 支持多设备数据同步 中
社交分享 开启后可分享到社交平台 中
胶囊模板 提供预设的胶囊内容模板 低
统计图表 可视化展示胶囊数据统计 低

8.3 长期规划

功能 描述 优先级
共享胶囊 支持多人共同创建胶囊 低
位置触发 到达特定地点时开启胶囊 低
AI助手 AI帮助优化胶囊内容 低

九、项目结构

复制代码 
lib/
├── main_time_capsule.dart      # 应用入口
│   ├── TimeCapsuleApp          # 应用配置
│   ├── TimeCapsuleHomePage     # 主页面
│   ├── _CreateCapsuleTab       # 创建胶囊页
│   ├── _MyCapsulesTab          # 我的胶囊页
│   ├── _OpenedRecordsTab       # 开启记录页
│   ├── _SettingsTab            # 个人中心页
│   ├── _CapsuleCard            # 胶囊卡片组件
│   ├── _CapsuleOpenDialog      # 开启对话框
│   └── _OpenedRecordCard       # 记录卡片组件
│
├── models/
│   └── time_capsule.dart       # 数据模型
│
├── enums/
│   ├── capsule_type.dart       # 胶囊类型枚举
│   ├── capsule_status.dart     # 胶囊状态枚举
│   └── time_preset.dart        # 时间预设枚举
│
└── utils/
    └── time_utils.dart         # 时间工具类

十、开发说明

10.1 运行方式

bash 复制代码 
# 获取依赖
flutter pub get

# 运行应用
flutter run -d <device_id>

# 指定入口文件运行
flutter run -d <device_id> -t lib/main_time_capsule.dart

10.2 注意事项

  1. 时间精度：胶囊开启时间精确到日期，不考虑具体时刻
  2. 数据存储：当前版本使用内存存储，重启后数据丢失
  3. 媒体文件：视频、语音、图片功能需要配合文件系统实现
  4. 后台提醒：需要配置后台任务与本地通知权限

记录现在，遇见未来的自己

Time Capsule - A Letter to Your Future Self

相关推荐
世人万千丶1 天前
Flutter 框架跨平台鸿蒙开发 - 恐惧清单应用
学习·flutter·华为·开源·harmonyos·鸿蒙
yuzhuanhei1 天前
Visual Studio 配置C++opencv
c++·学习·visual studio
行乾1 天前
鸿蒙端 IMSDK 架构探索
架构·harmonyos
Utopia^1 天前
Flutter 框架跨平台鸿蒙开发 - 21天挑战
flutter·华为·harmonyos
此刻觐神1 天前
IMX6ULL开发板学习-01（Linux文件目录和目录相关命令）
linux·服务器·学习
憧憬从前1 天前
算法学习记录DAY2
学习
一直在想名1 天前
Flutter 框架跨平台鸿蒙开发 - 黑白屏
flutter·华为·kotlin·harmonyos
一蓑烟雨，一任平生1 天前
鸿蒙H5调试方法
前端·华为·h5·harmonyos
babe小鑫1 天前
会计岗位学习数据分析的价值分析
学习·数据挖掘·数据分析
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南05Oh My Codex 快速使用指南06CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南07Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）08VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）09UV安装并设置国内源10实测！Gemma 4 成功跑在安卓手机上：离线 AI 助手终于来了