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

2301_822703202026-04-11 14:37

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

一、项目概述

运行效果图

1.1 应用简介

家庭时间胶囊是一款温馨的生活创意应用，让全家人共同制作时间胶囊，记录当下的生活点滴、美好瞬间和真挚祝福，约定在未来某个时刻开启。通过时间胶囊，家庭成员可以跨越时空对话，见证生活的变化与成长，珍藏那些转瞬即逝的美好时光。

应用以温暖的紫色为主色调，象征时光的神秘与珍贵。涵盖胶囊制作、胶囊管理、开启倒计时、家庭相册四大模块。用户可以创建时间胶囊、添加家庭成员、记录生活内容、设定开启时间，让爱与记忆穿越时光，在未来绽放。

1.2 核心功能

功能模块 功能描述 实现方式
胶囊制作 创建时间胶囊 表单组件
成员管理 添加家庭成员 列表管理
内容记录 文字、图片、语音 多媒体支持
开启时间 设定开启日期 日期选择器
倒计时 显示剩余时间 定时器
胶囊开启 到期自动提醒 通知提醒

1.3 胶囊类型定义

序号 类型名称 Emoji 描述
1 生日祝福 🎂 为家人准备的生日惊喜
2 新年愿望 🎆 跨年度的美好期许
3 成长记录 📈 记录孩子的成长
4 家庭纪念 👨‍👩‍👧‍👦 重要时刻的珍藏
5 未来信件 ✉️ 给未来的自己或家人
6 毕业纪念 🎓 学业里程碑的记录

1.4 胶囊状态定义

序号 状态名称 Emoji 数值 描述
1 封存中 🔒 0 等待开启时间
2 即将开启 ⏰ 1 距开启不到7天
3 可以开启 🔓 2 已到开启时间
4 已开启 📖 3 胶囊已打开

1.5 家庭角色定义

序号 角色名称 Emoji 权限级别 描述
1 创建者 👑 3 完全管理权限
2 管理员 ⭐ 2 可编辑内容
3 成员 👤 1 可添加内容
4 访客 👀 0 仅可查看

1.6 内容类型定义

序号 类型名称 Emoji 描述
1 文字 📝 文字记录和祝福
2 图片 📷 照片和图片
3 语音 🎤 语音留言
4 视频 🎥 视频片段
5 文件 📎 其他文件

1.7 技术栈

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

1.8 项目结构

复制代码 
lib/
└── main_family_time_capsule.dart
    ├── FamilyTimeCapsuleApp        # 应用入口
    ├── CapsuleType                 # 胶囊类型枚举
    ├── CapsuleStatus               # 胶囊状态枚举
    ├── FamilyRole                  # 家庭角色枚举
    ├── ContentType                 # 内容类型枚举
    ├── TimeCapsule                 # 时间胶囊模型
    ├── FamilyMember                # 家庭成员模型
    ├── CapsuleContent              # 胶囊内容模型
    ├── FamilyTimeCapsuleHomePage   # 主页面（底部导航）
    ├── _buildCreatePage            # 创建页面
    ├── _buildCapsulesPage          # 胶囊页面
    ├── _buildCountdownPage         # 倒计时页面
    ├── _buildProfilePage           # 关于页面
    ├── CapsulePainter              # 胶囊绘制器
    └── CountdownPainter            # 倒计时绘制器

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

FamilyTimeCapsuleHomePage
创建页
胶囊页
倒计时页
关于页
胶囊类型选择
成员管理
内容添加
时间设定
胶囊列表
状态筛选
胶囊详情
倒计时展示
即将开启
开启提醒
家庭统计
使用指南
胶囊管理器

CapsuleManager
倒计时计算器

CountdownCalculator
内容处理器

ContentProcessor
权限控制器

PermissionController
TimeCapsule

时间胶囊
FamilyMember

家庭成员
CapsuleContent

胶囊内容
CapsuleType

胶囊类型

2.2 类图设计

has
has
contains
contains
has
has
FamilyTimeCapsuleApp
+Widget build()
<<enumeration>>
CapsuleType
+String label
+String emoji
+String description
+birthday()
+newYear()
+growth()
+family()
+futureLetter()
+graduation()
<<enumeration>>
CapsuleStatus
+String label
+String emoji
+int value
+sealed()
+openingSoon()
+canOpen()
+opened()
<<enumeration>>
FamilyRole
+String label
+String emoji
+int level
+creator()
+admin()
+member()
+visitor()
<<enumeration>>
ContentType
+String label
+String emoji
+text()
+image()
+audio()
+video()
+file()
TimeCapsule
+String id
+String title
+CapsuleType type
+CapsuleStatus status
+List<FamilyMember> members
+List<CapsuleContent> contents
+DateTime createTime
+DateTime openTime
+String description
+bool isOpened
FamilyMember
+String id
+String name
+String avatar
+FamilyRole role
+DateTime joinTime
CapsuleContent
+String id
+ContentType type
+String content
+String authorId
+DateTime createTime
+String description

2.3 页面导航流程

创建
胶囊
倒计时
关于
封存中
可以开启
已开启
应用启动
创建页
底部导航
选择胶囊类型
胶囊列表
倒计时展示
应用信息
添加家庭成员
添加胶囊内容
设定开启时间
保存胶囊
查看胶囊详情
胶囊状态
查看倒计时
开启胶囊
查看内容
展示胶囊内容
记录开启时间
查看即将开启
开启提醒

2.4 胶囊创建流程

胶囊库 内容处理 成员管理 创建页 用户 胶囊库 内容处理 成员管理 创建页 用户 选择胶囊类型 显示类型卡片 输入胶囊标题 实时预览 添加家庭成员 管理成员列表 返回成员列表 添加胶囊内容 处理内容数据 返回内容列表 设定开启时间 显示倒计时 点击保存 保存胶囊 显示成功提示

三、核心模块设计

3.1 数据模型设计

3.1.1 胶囊类型枚举 (CapsuleType)
dart 复制代码 
enum CapsuleType {
  birthday(label: '生日祝福', emoji: '🎂', description: '为家人准备的生日惊喜'),
  newYear(label: '新年愿望', emoji: '🎆', description: '跨年度的美好期许'),
  growth(label: '成长记录', emoji: '📈', description: '记录孩子的成长'),
  family(label: '家庭纪念', emoji: '👨‍👩‍👧‍👦', description: '重要时刻的珍藏'),
  futureLetter(label: '未来信件', emoji: '✉️', description: '给未来的自己或家人'),
  graduation(label: '毕业纪念', emoji: '🎓', description: '学业里程碑的记录');

  final String label;
  final String emoji;
  final String description;
}
3.1.2 胶囊状态枚举 (CapsuleStatus)
dart 复制代码 
enum CapsuleStatus {
  sealed(label: '封存中', emoji: '🔒', value: 0),
  openingSoon(label: '即将开启', emoji: '⏰', value: 1),
  canOpen(label: '可以开启', emoji: '🔓', value: 2),
  opened(label: '已开启', emoji: '📖', value: 3);

  final String label;
  final String emoji;
  final int value;
}
3.1.3 时间胶囊模型 (TimeCapsule)
dart 复制代码 
class TimeCapsule {
  final String id;                      // 胶囊ID
  final String title;                   // 胶囊标题
  final CapsuleType type;               // 胶囊类型
  CapsuleStatus status;                 // 胶囊状态
  final List<FamilyMember> members;     // 家庭成员
  final List<CapsuleContent> contents;  // 胶囊内容
  final DateTime createTime;            // 创建时间
  final DateTime openTime;              // 开启时间
  final String description;             // 胶囊描述
  bool isOpened;                        // 是否已开启
  DateTime? actualOpenTime;             // 实际开启时间
}
3.1.4 家庭成员模型 (FamilyMember)
dart 复制代码 
class FamilyMember {
  final String id;              // 成员ID
  final String name;            // 成员姓名
  final String avatar;          // 头像
  final FamilyRole role;        // 家庭角色
  final DateTime joinTime;      // 加入时间
}
3.1.5 胶囊内容模型 (CapsuleContent)
dart 复制代码 
class CapsuleContent {
  final String id;              // 内容ID
  final ContentType type;       // 内容类型
  final String content;         // 内容数据
  final String authorId;        // 作者ID
  final DateTime createTime;    // 创建时间
  final String description;     // 内容描述
}
3.1.6 胶囊类型分布

30% 25% 20% 15% 7% 3% 胶囊类型使用分布示例 生日祝福 新年愿望 成长记录 家庭纪念 未来信件 毕业纪念

3.2 页面结构设计

3.2.1 主页面布局

FamilyTimeCapsuleHomePage
IndexedStack
创建页
胶囊页
倒计时页
关于页
NavigationBar
创建 Tab
胶囊 Tab
倒计时 Tab
关于 Tab

3.2.2 创建页结构

创建页
SliverAppBar
快速统计
胶囊类型选择
基本信息输入
成员管理区
内容添加区
时间设定区
操作按钮
类型卡片列表
标题输入
描述输入
成员列表
添加成员按钮
内容列表
添加内容按钮
日期选择
时间选择
倒计时预览

3.2.3 胶囊页结构

胶囊页
SliverAppBar
状态筛选
胶囊列表
胶囊卡片
全部
封存中
即将开启
可以开启
胶囊图标
胶囊标题
开启时间
成员头像
倒计时显示

3.2.4 倒计时页结构

倒计时页
SliverAppBar
即将开启列表
倒计时展示
开启按钮
天数倒计时
小时倒计时
分钟倒计时
秒数倒计时
开启确认
内容展示

3.3 胶囊状态更新逻辑

> 7天
≤ 7天且> 0
= 0
是
否
定时检查
获取当前时间
遍历所有胶囊
计算剩余时间
剩余时间
状态: 封存中
状态: 即将开启
状态: 可以开启
更新胶囊状态
状态变化?
发送通知
继续检查

3.4 胶囊开启逻辑

可以开启
其他状态
是
否
用户点击开启
胶囊状态
显示确认对话框
提示无法开启
用户确认?
播放开启动画
取消操作
展示胶囊内容
更新胶囊状态
记录开启时间
通知所有成员
完成开启

四、UI设计规范

4.1 配色方案

应用以温暖的紫色为主色调，象征时光的神秘与珍贵：

颜色类型 色值 用途
主色 #9C27B0 (Purple) 导航、主题元素
辅助色 #AB47BC 胶囊页面
第三色 #BA68C8 倒计时页面
强调色 #CE93D8 创建页面
背景色 #FAFAFA 页面背景
卡片背景 #FFFFFF 胶囊卡片

4.2 胶囊类型色彩映射

胶囊类型 色值 视觉效果
生日祝福 #FF6B9D 温馨粉色
新年愿望 #FFB74D 金色喜庆
成长记录 #66BB6A 生机绿色
家庭纪念 #42A5F5 温暖蓝色
未来信件 #AB47BC 神秘紫色
毕业纪念 #26C6DA 清新青色

4.3 字体规范

元素 字号 字重 颜色
页面标题 24px Bold 主色
胶囊标题 18px Bold #000000
成员名称 16px Medium 主色
内容描述 14px Regular #424242
倒计时数字 48px Bold 主色

4.4 组件规范

4.4.1 胶囊类型选择卡片
复制代码 
┌─────────────────────────────────────┐
│  选择胶囊类型                        │
│                                     │
│  ┌──────┐ ┌──────┐ ┌──────┐        │
│  │  🎂  │ │  🎆  │ │  📈  │        │
│  │生日  │ │新年  │ │成长  │        │
│  │祝福  │ │愿望  │ │记录  │        │
│  └──────┘ └──────┘ └──────┘        │
│                                     │
│  ┌──────┐ ┌──────┐ ┌──────┐        │
│  │👨‍👩‍👧‍👦│ │  ✉️  │ │  🎓  │        │
│  │家庭  │ │未来  │ │毕业  │        │
│  │纪念  │ │信件  │ │纪念  │        │
│  └──────┘ └──────┘ └──────┘        │
└─────────────────────────────────────┘
4.4.2 家庭成员管理
复制代码 
┌─────────────────────────────────────┐
│  家庭成员                            │
│                                     │
│  👑 爸爸 (创建者)                    │
│  ⭐ 妈妈 (管理员)                    │
│  👤 小明 (成员)                      │
│  👤 小红 (成员)                      │
│                                     │
│  [+ 添加成员]                        │
└─────────────────────────────────────┘
4.4.3 胶囊内容卡片
复制代码 
┌─────────────────────────────────────┐
│  📝 文字内容                         │
│  ─────────────────────────────────  │
│  亲爱的未来的我们：                   │
│  希望你们看到这封信的时候，           │
│  一切都变得更好了...                  │
│                                     │
│  ─────────────────────────────────  │
│  作者: 爸爸                          │
│  时间: 2024-01-01                   │
└─────────────────────────────────────┘
4.4.4 倒计时展示区域
复制代码 
┌─────────────────────────────────────┐
│  距离开启还有                         │
│                                     │
│     365  天  12  时  30  分  45  秒  │
│                                     │
│  📅 开启时间: 2025-01-01 00:00       │
│                                     │
│  [🔔 设置提醒]                       │
└─────────────────────────────────────┘
4.4.5 胶囊卡片展示
复制代码 
┌─────────────────────────────────────┐
│  🎂 生日祝福                         │
│  ─────────────────────────────────  │
│  小明的18岁生日礼物                   │
│                                     │
│  👨‍👩‍👧‍👦 4位成员参与                    │
│  📝 8条内容                          │
│                                     │
│  ─────────────────────────────────  │
│  🔒 封存中                           │
│  ⏰ 剩余 365 天                      │
│  📅 2025-01-01 开启                  │
└─────────────────────────────────────┘

五、核心功能实现

5.1 倒计时绘制实现

dart 复制代码 
class CountdownPainter extends CustomPainter {
  final int days;
  final int hours;
  final int minutes;
  final int seconds;
  final CapsuleType capsuleType;

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    
    _drawBackgroundCircle(canvas, size, center);
    _drawProgressArc(canvas, size, center);
    _drawCountdownNumbers(canvas, size, center);
    _drawCapsuleIcon(canvas, size, center);
  }

  void _drawBackgroundCircle(Canvas canvas, Size size, Offset center) {
    final bgPaint = Paint()
      ..color = Colors.grey.withValues(alpha: 0.1)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 8.0;
    
    canvas.drawCircle(center, size.width * 0.35, bgPaint);
  }

  void _drawProgressArc(Canvas canvas, Size size, Offset center) {
    final progress = (days * 24 * 60 + hours * 60 + minutes) / 
                     (365 * 24 * 60);
    final progressPaint = Paint()
      ..color = _getTypeColor(capsuleType)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 8.0
      ..strokeCap = StrokeCap.round;
    
    canvas.drawArc(
      Rect.fromCircle(center: center, radius: size.width * 0.35),
      -pi / 2,
      2 * pi * (1 - progress),
      false,
      progressPaint,
    );
  }

  Color _getTypeColor(CapsuleType type) {
    switch (type) {
      case CapsuleType.birthday:
        return const Color(0xFFFF6B9D);
      case CapsuleType.newYear:
        return const Color(0xFFFFB74D);
      case CapsuleType.growth:
        return const Color(0xFF66BB6A);
      case CapsuleType.family:
        return const Color(0xFF42A5F5);
      case CapsuleType.futureLetter:
        return const Color(0xFFAB47BC);
      case CapsuleType.graduation:
        return const Color(0xFF26C6DA);
    }
  }
}

5.2 胶囊状态计算实现

dart 复制代码 
class CapsuleStatusCalculator {
  static CapsuleStatus calculateStatus(
    DateTime openTime,
    DateTime currentTime,
  ) {
    final difference = openTime.difference(currentTime);
    
    if (difference.isNegative) {
      return CapsuleStatus.canOpen;
    } else if (difference.inDays <= 7) {
      return CapsuleStatus.openingSoon;
    } else {
      return CapsuleStatus.sealed;
    }
  }
  
  static Duration calculateRemainingTime(
    DateTime openTime,
    DateTime currentTime,
  ) {
    final difference = openTime.difference(currentTime);
    return difference.isNegative ? Duration.zero : difference;
  }
  
  static String formatDuration(Duration duration) {
    final days = duration.inDays;
    final hours = duration.inHours.remainder(24);
    final minutes = duration.inMinutes.remainder(60);
    final seconds = duration.inSeconds.remainder(60);
    
    return '$days 天 $hours 时 $minutes 分 $seconds 秒';
  }
}

5.3 胶囊创建实现

dart 复制代码 
void _createCapsule() {
  if (_titleController.text.isEmpty) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('请输入胶囊标题')),
    );
    return;
  }

  if (_selectedOpenTime == null) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('请选择开启时间')),
    );
    return;
  }

  if (_selectedOpenTime!.isBefore(DateTime.now())) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('开启时间必须在未来')),
    );
    return;
  }

  final capsule = TimeCapsule(
    id: 'capsule_${DateTime.now().millisecondsSinceEpoch}',
    title: _titleController.text,
    type: _selectedCapsuleType,
    status: CapsuleStatus.sealed,
    members: List.from(_members),
    contents: List.from(_contents),
    createTime: DateTime.now(),
    openTime: _selectedOpenTime!,
    description: _descriptionController.text,
    isOpened: false,
  );

  setState(() {
    _capsules.insert(0, capsule);
    _titleController.clear();
    _descriptionController.clear();
    _members.clear();
    _contents.clear();
    _selectedOpenTime = null;
  });

  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(
      content: Text('时间胶囊已创建'),
      backgroundColor: Color(0xFF9C27B0),
    ),
  );
}

5.4 胶囊开启实现

dart 复制代码 
void _openCapsule(TimeCapsule capsule) {
  if (capsule.status != CapsuleStatus.canOpen) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('胶囊还未到开启时间')),
    );
    return;
  }

  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: const Text('开启时间胶囊'),
      content: Text('确定要开启 "${capsule.title}" 吗？'),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('取消'),
        ),
        FilledButton(
          onPressed: () {
            Navigator.pop(context);
            _showCapsuleContents(capsule);
          },
          child: const Text('开启'),
        ),
      ],
    ),
  );
}

void _showCapsuleContents(TimeCapsule capsule) {
  setState(() {
    final index = _capsules.indexWhere((c) => c.id == capsule.id);
    if (index != -1) {
      _capsules[index].isOpened = true;
      _capsules[index].status = CapsuleStatus.opened;
      _capsules[index].actualOpenTime = DateTime.now();
    }
  });

  showDialog(
    context: context,
    builder: (context) => Dialog(
      child: Container(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              capsule.type.emoji,
              style: const TextStyle(fontSize: 64),
            ),
            const SizedBox(height: 16),
            Text(
              capsule.title,
              style: const TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              '创建于 ${_formatDate(capsule.createTime)}',
              style: TextStyle(color: Colors.grey[600]),
            ),
            const Divider(height: 32),
            Expanded(
              child: ListView.builder(
                itemCount: capsule.contents.length,
                itemBuilder: (context, index) {
                  return _buildContentItem(capsule.contents[index]);
                },
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

5.5 成员管理实现

dart 复制代码 
void _addMember() {
  if (_memberNameController.text.isEmpty) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('请输入成员名称')),
    );
    return;
  }

  final member = FamilyMember(
    id: 'member_${DateTime.now().millisecondsSinceEpoch}',
    name: _memberNameController.text,
    avatar: _selectedAvatar,
    role: _selectedRole,
    joinTime: DateTime.now(),
  );

  setState(() {
    _members.add(member);
    _memberNameController.clear();
  });

  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('已添加成员: ${member.name}')),
  );
}

void _removeMember(String memberId) {
  setState(() {
    _members.removeWhere((member) => member.id == memberId);
  });
}

六、交互设计

6.1 胶囊创建流程

胶囊库 表单验证 创建页 用户 胶囊库 表单验证 创建页 用户 选择胶囊类型 显示类型卡片 输入胶囊标题 实时预览 添加家庭成员 显示成员列表 添加胶囊内容 显示内容列表 设定开启时间 显示倒计时 点击保存 验证表单 返回验证结果 保存胶囊 显示成功提示

6.2 胶囊开启流程

封存中
即将开启
可以开启
已开启
是
否
用户查看胶囊
胶囊状态
显示倒计时
显示提醒设置
显示开启按钮
显示内容
等待开启时间
设置开启提醒
点击开启按钮
确认对话框
用户确认?
播放开启动画
取消操作
展示胶囊内容
更新胶囊状态
记录开启时间
通知所有成员

6.3 倒计时更新流程

剩余≤7天
到达开启时间
用户开启
定时更新倒计时
定时更新倒计时
封存中
即将开启
可以开启
已开启

七、扩展功能规划

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 2024-03-31 基础UI框架 胶囊创建功能 倒计时功能 多媒体内容 成员权限管理 通知提醒功能 云端同步 家庭共享 AI内容生成 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 家庭时间胶囊应用开发计划

7.2 功能扩展建议

7.2.1 多媒体内容支持

内容功能：

  • 图片上传和预览
  • 语音录制和播放
  • 视频片段录制
  • 文件附件添加
7.2.2 家庭共享

共享功能：

  • 多设备同步
  • 家庭成员邀请
  • 实时协作编辑
  • 内容评论互动
7.2.3 智能提醒

提醒功能：

  • 开启时间提醒
  • 即将开启通知
  • 内容添加提醒
  • 定期回顾建议

八、注意事项

8.1 开发注意事项

  1. 时间计算：注意时区转换和夏令时影响

  2. 数据持久化：胶囊数据需本地持久化存储

  3. 隐私保护：胶囊内容涉及隐私，需做好数据保护

  4. 状态同步：多成员协作需保证状态一致性

  5. 用户体验：开启过程需流畅自然，增强仪式感

8.2 常见问题

问题 原因 解决方案
倒计时不准确 时区问题 统一使用UTC时间
胶囊无法开启 状态未更新 检查状态计算逻辑
内容丢失 数据未保存 添加自动保存功能
成员重复添加 未做重复检查 添加唯一性验证
时间选择异常 日期范围错误 限制最小日期

8.3 使用技巧

🎁 家庭时间胶囊使用技巧 🎁

胶囊创建技巧

  • 选择有意义的开启时间，如生日、纪念日
  • 邀请所有家庭成员参与，增加仪式感
  • 记录当下的真实感受，不要过于修饰
  • 添加多样化的内容，让胶囊更丰富

内容记录建议

  • 写下对未来的期许和祝福
  • 记录当下的生活状态和心情
  • 添加照片和视频，留住美好瞬间
  • 分享重要的人生感悟和经验

开启时刻准备

  • 全家人一起开启，增加仪式感
  • 准备相机记录开启瞬间
  • 分享彼此的感受和变化
  • 讨论未来的新计划

九、运行说明

9.1 环境要求

环境 版本要求
Flutter SDK >= 3.0.0
Dart SDK >= 2.17.0
鸿蒙OS API 21+
Web浏览器 Chrome 90+

9.2 运行命令

bash 复制代码 
# 查看可用设备
flutter devices

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

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

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

十、总结

家庭时间胶囊应用通过胶囊制作、胶囊管理、开启倒计时、家庭相册四大模块，为家庭提供了一个跨越时空的对话平台。应用支持6种胶囊类型、4种胶囊状态、4种家庭角色、5种内容类型，让家庭成员共同记录当下，期待未来。

核心功能涵盖胶囊创建、成员管理、内容记录、倒计时展示四大模块。胶囊类型从生日祝福到毕业纪念，覆盖家庭生活的重要时刻；胶囊状态从封存到开启，记录时光的流转；家庭角色从创建者到访客，保障协作的有序；内容类型从文字到视频，珍藏多样的记忆。

应用采用 Material Design 3 设计规范，以温暖的紫色为主色调，象征时光的神秘与珍贵。通过本应用，希望能够帮助家庭建立跨越时空的情感连接，让爱与记忆穿越时光，在未来绽放最美的光彩。

家庭时间胶囊------让爱穿越时光

相关推荐
tankeven2 小时前
HJ171 排座椅
c++·算法
提子拌饭1332 小时前
Flutter 框架跨平台鸿蒙开发 - 声音风景分享应用
flutter·华为·harmonyos·鸿蒙·风景
独特的螺狮粉2 小时前
开源鸿蒙跨平台Flutter开发：超市购物清单应用
flutter·华为·开源·harmonyos·鸿蒙
2301_822703202 小时前
成语小词典：鸿蒙Flutter实现的成语查询与管理应用
算法·flutter·华为·开源·图形渲染·harmonyos
Bczheng12 小时前
八.账号生成规则 哈希 密钥
算法·哈希算法
黎阳之光2 小时前
视频孪生领航者，以中国技术定义全球数智化新高度
大数据·人工智能·算法·安全·数字孪生
6Hzlia2 小时前
【Hot 100 刷题计划】 LeetCode 39. 组合总和 | C++ 回溯算法与 startIndex 剪枝
c++·算法·leetcode
患得患失9492 小时前
【前端WebSocket】心跳功能，心跳重置策略、双向确认（Ping-Pong） 以及 指数退避算法（Exponential Backoff）
前端·websocket·算法
海砥装备HardAus2 小时前
飞控算法中双环串级PID深度解析：角度环与角速度环的协同机制
stm32·算法·无人机·飞控·串级pid
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南05【STM32】HAL库 CubeMX 教程 --- 通用定时器 TIM2 定时06VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）07实测！Gemma 4 成功跑在安卓手机上：离线 AI 助手终于来了08Oh My Codex 快速使用指南09CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南10MySQL表约束详解：8大核心约束实战指南