Flutter 框架跨平台鸿蒙开发 - 时间沙漏
运行效果图时间沙漏是一款独特的时间管理应用，灵感来源于沙漏这一古老而优雅的时间计量工具。应用将时间具象化为沙子，通过可视化的方式展示时间的流逝，帮助用户直观感受时间的珍贵与不可逆。沙漏中的每一粒沙子都代表时间的流逝，当沙子从上层流向下层，我们看到的不仅是时间的消耗，更是生命的流逝。通过记录和分析时间的使用情况，用户可以清晰地看到哪些时间被高效利用，哪些时间像沙子一样白白流走。序号类型名称Emoji
·
时间沙漏应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
时间沙漏是一款独特的时间管理应用，灵感来源于沙漏这一古老而优雅的时间计量工具。应用将时间具象化为沙子，通过可视化的方式展示时间的流逝，帮助用户直观感受时间的珍贵与不可逆。
沙漏中的每一粒沙子都代表时间的流逝，当沙子从上层流向下层，我们看到的不仅是时间的消耗，更是生命的流逝。通过记录和分析时间的使用情况，用户可以清晰地看到哪些时间被高效利用，哪些时间像沙子一样白白流走。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 沙漏计时 | 可视化时间流逝 | 动画 + Timer |
| 时间记录 | 记录时间使用情况 | 表单 + 分类 |
| 时间分类 | 6种时间类型 | 枚举定义 |
| 流逝速度 | 4种感知速度 | 枚举定义 |
| 翻转沙漏 | 重置计时 | 动画效果 |
| 统计分析 | 分析时间使用 | 图表可视化 |
1.3 时间类型定义
| 序号 | 类型名称 | Emoji | 主题色 | 描述 |
|---|---|---|---|---|
| 1 | 高效时间 | ✨ | #66BB6A | 高效利用的时间 |
| 2 | 中性时间 | ⏱️ | #FFB74D | 一般性时间 |
| 3 | 浪费时间 | 💨 | #E57373 | 白白流逝的时间 |
| 4 | 休息时间 | 😴 | #64B5F6 | 恢复精力的时间 |
| 5 | 学习时间 | 📚 | #AB47BC | 提升自我的时间 |
| 6 | 创造时间 | 🎨 | #FF6B9D | 创造价值的时间 |
1.4 时间流逝速度定义
| 序号 | 速度名称 | 速度值 | 主题色 | 描述 |
|---|---|---|---|---|
| 1 | 缓慢 | 1 | #81C784 | 时间过得很慢 |
| 2 | 正常 | 2 | #FFB74D | 时间正常流逝 |
| 3 | 快速 | 3 | #FF8A65 | 时间过得很快 |
| 4 | 极快 | 4 | #E57373 | 时间飞逝 |
1.5 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 动画控制 | AnimationController | - |
| 定时器 | Timer | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.6 项目结构
lib/
└── main_time_hourglass.dart
├── TimeHourglassApp # 应用入口
├── TimeCategory # 时间类型枚举
├── SandSpeed # 流逝速度枚举
├── TimeSession # 时间会话模型
├── TimeHourglassHomePage # 主页面（底部导航）
├── _buildHourglassPage # 沙漏页面
├── _buildSessionsPage # 记录页面
├── _buildStatsPage # 统计页面
└── HourglassPainter # 沙漏绘制器
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 计时流程
三、核心模块设计
3.1 数据模型设计
3.1.1 时间类型枚举 (TimeCategory)
enum TimeCategory {
productive('高效时间', '✨', Color(0xFF66BB6A)),
neutral('中性时间', '⏱️', Color(0xFFFFB74D)),
wasted('浪费时间', '💨', Color(0xFFE57373)),
rest('休息时间', '😴', Color(0xFF64B5F6)),
learning('学习时间', '📚', Color(0xFFAB47BC)),
creative('创造时间', '🎨', Color(0xFFFF6B9D));
final String label;
final String emoji;
final Color color;
const TimeCategory(this.label, this.emoji, this.color);
}
3.1.2 流逝速度枚举 (SandSpeed)
enum SandSpeed {
slow('缓慢', 1, Color(0xFF81C784)),
normal('正常', 2, Color(0xFFFFB74D)),
fast('快速', 3, Color(0xFFFF8A65)),
veryFast('极快', 4, Color(0xFFE57373));
final String label;
final int speed;
final Color color;
const SandSpeed(this.label, this.speed, this.color);
}
3.1.3 时间会话模型 (TimeSession)
class TimeSession {
final String id; // 唯一标识
final DateTime startTime; // 开始时间
final DateTime endTime; // 结束时间
final Duration duration; // 持续时长
final TimeCategory category; // 时间类型
final String? activity; // 活动内容
final String? notes; // 备注
final SandSpeed perceivedSpeed; // 感知速度
}
3.1.4 时间类型分布
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 沙漏页面结构
3.2.3 沙漏绘制结构
3.2.4 统计页面结构
3.3 计时逻辑
3.4 沙漏动画逻辑
四、UI设计规范
4.1 配色方案
应用以沙漏色为主色调，象征时间的流逝：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #D4A574 (Sand) | 导航、强调元素 |
| 高效色 | #66BB6A | 高效时间标识 |
| 中性色 | #FFB74D | 中性时间标识 |
| 浪费色 | #E57373 | 浪费时间标识 |
| 休息色 | #64B5F6 | 休息时间标识 |
| 学习色 | #AB47BC | 学习时间标识 |
| 创造色 | #FF6B9D | 创造时间标识 |
4.2 速度配色
| 速度 | 色值 | 视觉效果 |
|---|---|---|
| 缓慢 | #81C784 | 绿色 |
| 正常 | #FFB74D | 橙色 |
| 快速 | #FF8A65 | 深橙色 |
| 极快 | #E57373 | 红色 |
4.3 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 24px | Bold | 主色 |
| 计时数字 | 48px | Bold | 黑色 |
| 卡片标题 | 18px | Bold | 黑色 |
| 时间显示 | 16px | Bold | 黑色 |
| 类型标签 | 12px | Regular | 类型色 |
4.4 组件规范
4.4.1 计时卡片
┌─────────────────────────────────────┐
│ │
│ 00:05:32 │
│ │
│ [▶ 开始计时] [🔄 翻转沙漏] │
│ │
└─────────────────────────────────────┘
4.4.2 沙漏绘制
┌─────┐
│░░░░░│ ← 上层沙子
│░░░░░│
└─────┘
│
│ ← 沙子流
│
┌─────┐
│▓▓▓▓▓│ ← 下层沙子
│▓▓▓▓▓│
└─────┘
4.4.3 记录卡片
┌─────────────────────────────────────┐
│ ┌────┐ 浪费时间 [快速] │
│ │ 💨 │ 4/8 14:30 │
│ └────┘ 00:45 │
└─────────────────────────────────────┘
4.4.4 统计卡片
┌─────────────────────────────────────┐
│ ┌────┐ 浪费的时间 │
│ │ ⚠️ │ 02:30:00 │
│ └────┘ 像沙子一样流走... │
│ │
│ ▓▓▓▓▓▓▓▓░░░░░░░░░░░░ 15% │
└─────────────────────────────────────┘
五、核心功能实现
5.1 计时功能
void _startTimer() {
setState(() {
_isTimerRunning = true;
_timerStartTime = DateTime.now();
_elapsedTime = Duration.zero;
});
_timer = Timer.periodic(const Duration(seconds: 1), (timer) {
if (mounted) {
setState(() {
_elapsedTime = DateTime.now().difference(_timerStartTime!);
});
}
});
}
void _stopTimer() {
_timer?.cancel();
final session = TimeSession(
id: DateTime.now().millisecondsSinceEpoch.toString(),
startTime: _timerStartTime!,
endTime: DateTime.now(),
duration: _elapsedTime,
category: _selectedCategory,
perceivedSpeed: _selectedSpeed,
);
setState(() {
_sessions.insert(0, session);
_isTimerRunning = false;
});
}
5.2 沙漏绘制
class HourglassPainter extends CustomPainter {
final double sandProgress;
final Color color;
void paint(Canvas canvas, Size size) {
// 绘制玻璃外框
final glassPaint = Paint()
..color = Colors.brown.withValues(alpha: 0.3)
..style = PaintingStyle.stroke
..strokeWidth = 3;
final path = Path();
path.moveTo(0, 0);
path.lineTo(size.width, 0);
path.lineTo(size.width / 2, size.height / 2);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.lineTo(size.width / 2, size.height / 2);
path.close();
canvas.drawPath(path, glassPaint);
// 绘制上层沙子（递减）
final topSandHeight = (size.height / 2) * (1 - sandProgress);
// 绘制下层沙子（递增）
final bottomSandHeight = (size.height / 2) * sandProgress;
// 绘制沙子流
canvas.drawLine(
Offset(size.width / 2, size.height / 2 - 10),
Offset(size.width / 2, size.height / 2 + 10),
sandStreamPaint,
);
}
}
5.3 翻转沙漏
void _flipHourglass() {
_hourglassRotationController.forward().then((_) {
_hourglassRotationController.reset();
});
setState(() {
_elapsedTime = Duration.zero;
});
}
5.4 统计计算
Widget _buildWastedTimeCard() {
var totalDuration = Duration.zero;
var wastedDuration = Duration.zero;
for (var session in _sessions) {
totalDuration += session.duration;
if (session.category == TimeCategory.wasted) {
wastedDuration += session.duration;
}
}
final wastedPercentage = totalDuration.inSeconds > 0
? (wastedDuration.inSeconds / totalDuration.inSeconds * 100)
: 0.0;
return Card(
child: Column(
children: [
Text('浪费的时间'),
Text(_formatDuration(wastedDuration)),
Text('像沙子一样流走...'),
LinearProgressIndicator(value: wastedPercentage / 100),
],
),
);
}
六、交互设计
6.1 计时流程
6.2 翻转流程
6.3 统计流程
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 多沙漏支持
多任务管理：
- 同时运行多个沙漏
- 任务切换
- 时间分配
- 效率对比
7.2.2 提醒功能
智能提醒：
- 时间提醒
- 效率提醒
- 休息提醒
- 自定义提醒
7.2.3 社交功能
分享交流：
- 时间分享
- 效率挑战
- 社区展示
- 排行榜
八、注意事项
8.1 开发注意事项
-
Timer管理：Timer需要在dispose时取消，避免内存泄漏
-
动画释放：AnimationController需要在dispose时释放
-
数据持久化：记录数据需要本地存储
-
性能优化：沙漏动画需要优化性能
-
用户体验：计时流程要简洁流畅
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 计时不准确 | Timer精度问题 | 使用DateTime计算 |
| 动画卡顿 | Controller未释放 | 在dispose中释放 |
| 沙漏显示错误 | 进度计算错误 | 检查进度范围0-1 |
| 统计不准确 | 数据未更新 | 刷新统计数据 |
8.3 设计理念
⏳ 时间沙漏理念 ⏳
时间像沙子一样，
从指缝间悄然流逝。
沙漏中的每一粒沙子，
都代表时间的流逝。
当沙子从上层流向下层，
我们看到的不仅是时间的消耗，
更是生命的流逝。
通过记录和分析，
我们清晰地看到：
哪些时间被高效利用，
哪些时间像沙子一样白白流走。
珍惜时间，
就是珍惜生命。
时间像沙子一样流走，可视化浪费的时间
九、运行说明
9.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 鸿蒙OS | API 21+ |
9.2 运行命令
# 查看可用设备
flutter devices
# 运行到Web服务器
flutter run -d web-server -t lib/main_time_hourglass.dart --web-port 8127
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_time_hourglass.dart
# 运行到Windows
flutter run -d windows -t lib/main_time_hourglass.dart
# 代码分析
flutter analyze lib/main_time_hourglass.dart
十、总结
时间沙漏通过沙漏计时、时间记录、统计分析三大模块，为用户提供了一个独特的时间管理平台。应用将时间具象化为沙子，通过可视化的方式展示时间的流逝，帮助用户直观感受时间的珍贵与不可逆。
核心功能涵盖沙漏计时、时间分类、流逝速度、时间记录、统计分析五大模块。沙漏计时通过动画和Timer实现可视化时间流逝；时间分类提供6种时间类型供选择；流逝速度支持4种感知速度；时间记录完整保存每次计时；统计分析通过图表展示时间使用情况。
应用采用Material Design 3设计规范，以沙漏色为主色调，象征时间的流逝。通过本应用，希望能够帮助用户珍惜时间，高效利用每一分每一秒。
**时间像沙子一样流走，可视化浪费的时间
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
7
0- 0
已为社区贡献20条内容
所有评论(0)