Flutter 框架跨平台鸿蒙开发 - 时间银行应用
·
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
时间银行是一款创新的时间管理应用，核心理念是"把时间当货币，存取时间"。在这个快节奏的时代，时间是最宝贵的资源。本应用将时间货币化，让用户能够直观地管理和规划自己的时间资产，培养珍惜时间、高效利用时间的良好习惯。
传统的时间管理工具往往只是记录和提醒，而时间银行创造性地引入了"银行"的概念，让用户可以像管理金钱一样管理时间。通过存入时间（完成有价值的事情）和取出时间（用于休息和娱乐），用户可以清晰地看到自己的时间流向，从而更好地平衡工作与生活。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 时间账户 | 显示时间余额 | 状态管理 + 实时计算 |
| 存入时间 | 记录有价值的时间投入 | 表单输入 + 余额增加 |
| 取出时间 | 记录时间的消耗使用 | 表单输入 + 余额减少 |
| 交易记录 | 查看历史时间交易 | 列表展示 + 时间格式化 |
| 统计分析 | 统计今日时间流向 | 数据聚合 + 可视化 |
| 分类管理 | 按类别管理时间 | 枚举分类 + 颜色标识 |
1.3 交易类型
| 序号 | 类型 | Emoji | 颜色 | 说明 |
|---|---|---|---|---|
| 1 | 存入 | ⏱️ | #4CAF50 | 完成有价值的事情，增加时间余额 |
| 2 | 取出 | ⏳ | #FF9800 | 消耗时间用于休息娱乐，减少余额 |
1.4 时间类别
| 序号 | 类别 | Emoji | 颜色 | 典型场景 |
|---|---|---|---|---|
| 1 | 工作 | 💼 | #2196F3 | 完成工作任务、项目开发 |
| 2 | 学习 | 📚 | #9C27B0 | 读书、上课、技能提升 |
| 3 | 运动 | 🏃 | #4CAF50 | 健身、跑步、游泳 |
| 4 | 休息 | 😴 | #607D8B | 睡眠、午休、放松 |
| 5 | 娱乐 | 🎮 | #E91E63 | 游戏、电影、音乐 |
| 6 | 社交 | 👥 | #FF5722 | 聚会、聊天、社交活动 |
| 7 | 志愿 | ❤️ | #F44336 | 公益活动、帮助他人 |
| 8 | 其他 | 📦 | #795548 | 其他时间使用 |
1.5 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState | - |
| 动画控制 | AnimationController | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
二、项目结构
lib/
├── main_time_bank.dart # 应用主入口
│ ├── TimeBankApp # 根应用组件
│ ├── TransactionType # 交易类型枚举
│ ├── TimeCategory # 时间类别枚举
│ ├── TimeTransaction # 时间交易模型
│ └── TimeBankHomePage # 主页面
三、数据模型
3.1 TransactionType 枚举
enum TransactionType {
deposit('存入', '⏱️', Color(0xFF4CAF50), Icons.arrow_downward),
withdraw('取出', '⏳', Color(0xFFFF9800), Icons.arrow_upward);
final String label;
final String emoji;
final Color color;
final IconData icon;
}
3.2 TimeCategory 枚举
enum TimeCategory {
work('工作', '💼', Color(0xFF2196F3)),
study('学习', '📚', Color(0xFF9C27B0)),
exercise('运动', '🏃', Color(0xFF4CAF50)),
rest('休息', '😴', Color(0xFF607D8B)),
entertainment('娱乐', '🎮', Color(0xFFE91E63)),
social('社交', '👥', Color(0xFFFF5722)),
volunteer('志愿', '❤️', Color(0xFFF44336)),
other('其他', '📦', Color(0xFF795548));
final String label;
final String emoji;
final Color color;
}
3.3 TimeTransaction 模型
class TimeTransaction {
final String id; // 交易唯一标识
final TransactionType type; // 交易类型
final TimeCategory category; // 时间类别
final int minutes; // 时间分钟数
final String description; // 交易说明
final DateTime createdAt; // 创建时间
final int? balanceAfter; // 交易后余额
}
四、核心功能实现
4.1 时间交易流程
4.2 余额计算逻辑
void _addTransaction(
TransactionType type,
TimeCategory category,
int minutes,
String description,
) {
if (type == TransactionType.withdraw && minutes > _timeBalance) {
// 余额不足提示
return;
}
setState(() {
if (type == TransactionType.deposit) {
_timeBalance += minutes;
} else {
_timeBalance -= minutes;
}
final transaction = TimeTransaction(
id: DateTime.now().millisecondsSinceEpoch.toString(),
type: type,
category: category,
minutes: minutes,
description: description,
createdAt: DateTime.now(),
balanceAfter: _timeBalance,
);
_transactions.insert(0, transaction);
});
}
4.3 今日统计计算
Widget _buildStatistics() {
final todayDeposits = _transactions
.where((t) =>
t.type == TransactionType.deposit &&
t.createdAt.day == DateTime.now().day)
.fold(0, (sum, t) => sum + t.minutes);
final todayWithdrawals = _transactions
.where((t) =>
t.type == TransactionType.withdraw &&
t.createdAt.day == DateTime.now().day)
.fold(0, (sum, t) => sum + t.minutes);
final netTime = todayDeposits - todayWithdrawals;
}
4.4 时间格式化
String _formatTime(DateTime time) {
final now = DateTime.now();
final diff = now.difference(time);
if (diff.inMinutes < 60) {
return '${diff.inMinutes}分钟前';
} else if (diff.inHours < 24) {
return '${diff.inHours}小时前';
} else {
return '${time.month}月${time.day}日 ${time.hour}:${time.minute}';
}
}
4.5 交易验证流程
五、界面设计
5.1 主页面布局
┌─────────────────────────────────────┐
│ 🏦 时间银行 │
│ 把时间当货币，存取时间 │
├─────────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ 时间余额 │ │
│ │ 8 小时 0 分钟 │ │
│ │ ⏱ 今日可用: 8小时 │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────────┤
│ ┌──────────┐ ┌──────────┐ │
│ │ ➕ │ │ ➖ │ │
│ │ 存入时间 │ │ 取出时间 │ │
│ └──────────┘ └──────────┘ │
├─────────────────────────────────────┤
│ 今日统计 │
│ ┌─────┐┌─────┐┌─────┐ │
│ │ 存入 ││ 取出 ││ 净额 │ │
│ │ 2h ││ 1h ││ +1h │ │
│ └─────┘└─────┘└─────┘ │
├─────────────────────────────────────┤
│ 交易记录 3条记录│
│ ┌─────────────────────────────┐ │
│ │ 💼 完成项目报告 +120分钟 │ │
│ │ 工作 · 存入 │ │
│ │ 2小时前 │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ 😴 午休时间 -60分钟 │ │
│ │ 休息 · 取出 │ │
│ │ 4小时前 │ │
│ └─────────────────────────────┘ │
│ │
│ [时间交易] │
└─────────────────────────────────────┘
5.2 交易弹窗
┌─────────────────────────────────────┐
│ ──── │
│ │
│ ⏰ 时间交易 │
│ │
│ 交易类型 │
│ ┌──────────┐┌──────────┐ │
│ │ ⏱️ ││ ⏳ │ │
│ │ 存入 ││ 取出 │ │
│ └──────────┘└──────────┘ │
│ │
│ 时间类别 │
│ [💼工作] [📚学习] [🏃运动] │
│ [😴休息] [🎮娱乐] [👥社交] │
│ [❤️志愿] [📦其他] │
│ │
│ 时间数量（分钟） │
│ ┌─────────────────────────────┐ │
│ │ 输入分钟数 分钟 │ │
│ └─────────────────────────────┘ │
│ │
│ 交易说明 │
│ ┌─────────────────────────────┐ │
│ │ 例如：完成工作任务 │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ 存入时间 │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
六、动画效果
6.1 图标脉冲动画
_pulseController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1500),
)..repeat(reverse: true);
AnimatedBuilder(
animation: _pulseController,
builder: (context, child) {
return Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.cyan.withValues(
alpha: 0.3 + _pulseController.value * 0.2
),
blurRadius: 10 + _pulseController.value * 5,
),
],
),
);
},
)
6.2 余额卡片渐变
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.cyan.shade400,
Colors.cyan.shade600,
],
),
),
)
七、运行与调试
7.1 运行命令
# 运行到鸿蒙设备
flutter run -d harmony lib/main_time_bank.dart
# 运行到Web服务器
flutter run -d web-server -t lib/main_time_bank.dart --web-port 8128
# 运行到Windows
flutter run -d windows -t lib/main_time_bank.dart
# 代码分析
flutter analyze lib/main_time_bank.dart
7.2 功能测试清单
| 测试项 | 测试内容 | 预期结果 |
|---|---|---|
| 存入时间 | 创建存入交易 | 余额正确增加 |
| 取出时间 | 创建取出交易 | 余额正确减少 |
| 余额检查 | 取出超过余额 | 提示余额不足 |
| 统计计算 | 查看今日统计 | 数据计算正确 |
| 交易记录 | 查看历史记录 | 记录正确显示 |
| 时间格式 | 查看时间显示 | 格式化正确 |
八、扩展方向
8.1 后端集成
┌─────────────┐ HTTPS ┌─────────────┐
│ 客户端 │ ←─────────────→ │ 服务器 │
└─────────────┘ └─────────────┘
│ │
│ 时间数据同步 │
│ 用户认证 │
│ 时间借贷 │
│ 数据分析 │
↓ ↓
┌─────────────┐ ┌─────────────┐
│ 本地存储 │ │ 云端数据库 │
└─────────────┘ └─────────────┘
8.2 功能扩展计划
| 版本 | 功能 | 描述 |
|---|---|---|
| v1.1 | 数据持久化 | 本地数据库存储 |
| v1.2 | 时间借贷 | 与朋友借贷时间 |
| v1.3 | 时间投资 | 投资时间获取回报 |
| v1.4 | 统计图表 | 可视化时间分析 |
| v1.5 | 社区分享 | 分享时间管理经验 |
8.3 高级功能
九、使用场景
9.1 典型使用场景
🏦 时间银行使用场景 🏦
| 场景 | 描述 | 操作方式 |
|---|---|---|
| 工作记录 | 记录工作时间投入 | 存入-工作类别 |
| 学习管理 | 追踪学习时间 | 存入-学习类别 |
| 休息规划 | 合理安排休息时间 | 取出-休息类别 |
| 娱乐控制 | 控制娱乐时间消耗 | 取出-娱乐类别 |
| 志愿服务 | 记录公益时间 | 存入-志愿类别 |
9.2 使用建议
┌─────────────────────────────────────────────────────────┐
│ 使用建议 │
├─────────────────────────────────────────────────────────┤
│ │
│ 💰 时间存入 │
│ • 完成有价值的事情后存入时间 │
│ • 工作、学习、运动等都是时间投资 │
│ • 志愿服务是高价值的时间存入 │
│ • 存入越多，时间资产越丰富 │
│ │
│ ⏳ 时间取出 │
│ • 休息和娱乐需要取出时间 │
│ • 合理取出，保持时间平衡 │
│ • 避免过度消耗时间余额 │
│ • 取出后记得补充存入 │
│ │
│ 📊 时间管理 │
│ • 定期查看时间余额 │
│ • 分析时间流向 │
│ • 保持存取平衡 │
│ • 培养高效习惯 │
│ │
└─────────────────────────────────────────────────────────┘
十、时间管理理论
10.1 时间价值理论
| 概念 | 说明 | 应用 |
|---|---|---|
| 时间货币化 | 将时间视为货币 | 存取时间机制 |
| 时间投资 | 投入时间获取回报 | 存入有价值时间 |
| 时间消费 | 消耗时间用于享受 | 取出时间休息 |
| 时间复利 | 时间投入产生累积效应 | 长期存入积累 |
10.2 时间管理原则
⏰ 时间管理原则 ⏰
艾森豪威尔矩阵
- 重要且紧急：立即执行
- 重要不紧急：计划执行
- 紧急不重要：委托他人
- 不重要不紧急：避免浪费
帕累托法则（80/20法则）
- 20%的时间投入产生80%的价值
- 识别高价值时间活动
- 专注核心任务
番茄工作法
- 25分钟专注工作
- 5分钟短暂休息
- 每4个番茄后长休息
十一、心理学原理
11.1 时间感知心理学
| 现象 | 描述 | 应用 |
|---|---|---|
| 时间膨胀 | 忙碌时感觉时间变快 | 记录时间防止流失 |
| 时间贴现 | 高估当下低估未来 | 时间银行平衡当下与未来 |
| 时间焦虑 | 担心时间不够用 | 可视化余额减少焦虑 |
| 时间满足 | 完成任务的满足感 | 存入时间获得成就感 |
11.2 行为经济学视角
┌─────────────────────────────────────────────────────────┐
│ 行为经济学视角 │
├─────────────────────────────────────────────────────────┤
│ │
│ 🧠 心理账户 │
│ • 时间银行创造时间心理账户 │
│ • 不同类别时间有不同价值感 │
│ • 帮助用户理性看待时间 │
│ │
│ 🎯 目标设定 │
│ • 设定时间余额目标 │
│ • 通过存取实现目标 │
│ • 获得成就感和满足感 │
│ │
│ 📈 反馈机制 │
│ • 实时余额反馈 │
│ • 交易记录回顾 │
│ • 统计数据可视化 │
│ │
└─────────────────────────────────────────────────────────┘
十二、总结
时间银行应用通过"把时间当货币，存取时间"的核心理念，为用户提供了一种创新的时间管理方式。应用涵盖时间账户、存入时间、取出时间、交易记录、统计分析、分类管理六大核心功能，让用户能够像管理金钱一样管理时间。
应用采用青色主题，象征时间的流动与珍贵。主页面清晰展示时间余额卡片、快捷操作按钮、今日统计和交易记录列表。时间余额以小时和分钟的形式直观展示，让用户对自己的时间资产一目了然。
存入时间功能鼓励用户记录有价值的活动，如工作、学习、运动、志愿服务等，这些活动会增加时间余额。取出时间功能用于记录休息、娱乐等时间消耗，帮助用户控制时间的使用。余额检查机制防止用户过度消耗时间，培养合理规划的习惯。
应用采用Material Design 3设计规范，遵循Flutter最佳实践，代码结构清晰，易于维护和扩展。后续版本计划增加数据持久化、时间借贷、时间投资、统计图表、社区分享等功能，为用户提供更完整的时间管理体验。
通过时间银行应用，用户可以培养珍惜时间的意识，学会合理规划和分配时间，在忙碌的生活中找到工作与生活的平衡点。
时间就是金钱，珍惜每一分钟 🏦
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
9
0- 0
已为社区贡献20条内容
所有评论(0)