Flutter 框架跨平台鸿蒙开发 - 温度日记
运行效果图温度日记是一款独特的情感记录应用，灵感来源于"温度"这一隐喻。不同于记录客观的气温数据，本应用专注于记录用户主观感受到的温度——情感温度、人际温度、环境温度、身体温度、心灵温度。温度是一个充满诗意的概念。我们说"温暖的笑容"、“冰冷的眼神”、“热情的拥抱”，温度承载着丰富的情感内涵。通过记录这些感受，用户可以更好地理解自己的情感状态，追踪情绪变化，发现生活中的温暖与寒冷。序号感受名称Em
·
温度日记应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
温度日记是一款独特的情感记录应用，灵感来源于"温度"这一隐喻。不同于记录客观的气温数据，本应用专注于记录用户主观感受到的温度——情感温度、人际温度、环境温度、身体温度、心灵温度。
温度是一个充满诗意的概念。我们说"温暖的笑容"、“冰冷的眼神”、“热情的拥抱”，温度承载着丰富的情感内涵。通过记录这些感受，用户可以更好地理解自己的情感状态，追踪情绪变化，发现生活中的温暖与寒冷。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 温度记录 | 记录感受到的温度 | 表单 + 选择器 |
| 温度类型 | 5种温度类型分类 | 枚举定义 |
| 温度感受 | 7种温度感受等级 | 枚举定义 |
| 温暖来源 | 8种温暖来源 | 枚举定义 |
| 日记浏览 | 查看历史记录 | 列表展示 |
| 统计分析 | 分析温度数据 | 图表可视化 |
| 温度刻度 | 直观展示温度分布 | 柱状图 |
1.3 温度感受定义
| 序号 | 感受名称 | Emoji | 数值 | 主题色 | 描述 |
|---|---|---|---|---|---|
| 1 | 冰冷 | ❄️ | -3 | #42A5F5 | 极度寒冷的感受 |
| 2 | 寒冷 | 🥶 | -2 | #64B5F6 | 明显的寒冷感 |
| 3 | 凉爽 | 🍃 | -1 | #81D4FA | 轻微的凉意 |
| 4 | 舒适 | 😊 | 0 | #66BB6A | 温度适宜 |
| 5 | 温暖 | ☀️ | 1 | #FFB74D | 温暖舒适 |
| 6 | 炎热 | 🔥 | 2 | #FF8A65 | 明显的热度 |
| 7 | 灼热 | 🌋 | 3 | #E53935 | 极度炽热 |
1.4 温度类型定义
| 序号 | 类型名称 | Emoji | 主题色 | 描述 |
|---|---|---|---|---|
| 1 | 情感温度 | 💕 | #EC407A | 情绪和情感状态 |
| 2 | 人际温度 | 👥 | #AB47BC | 人际关系感受 |
| 3 | 环境温度 | 🌍 | #42A5F5 | 周围环境感受 |
| 4 | 身体温度 | 💪 | #FF7043 | 身体状态感受 |
| 5 | 心灵温度 | ✨ | #7E57C2 | 精神状态感受 |
1.5 温暖来源定义
| 序号 | 来源名称 | Emoji | 主题色 | 描述 |
|---|---|---|---|---|
| 1 | 家人 | 👨👩👧👦 | #FFB74D | 来自家人的温暖 |
| 2 | 朋友 | 👫 | #4FC3F7 | 来自朋友的温暖 |
| 3 | 恋人 | 💕 | #F06292 | 来自恋人的温暖 |
| 4 | 陌生人 | 🧑 | #90A4AE | 来自陌生人的温暖 |
| 5 | 自然 | 🌿 | #66BB6A | 来自自然的温暖 |
| 6 | 工作 | 💼 | #5C6BC0 | 来自工作的温暖 |
| 7 | 爱好 | 🎨 | #AB47BC | 来自爱好的温暖 |
| 8 | 自己 | 🌟 | #FFCA28 | 来自自己的温暖 |
1.6 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState | - |
| 数据存储 | 内存列表 | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.7 项目结构
lib/
└── main_temperature_diary.dart
├── TemperatureDiaryApp # 应用入口
├── TemperatureFeeling # 温度感受枚举
├── TemperatureType # 温度类型枚举
├── WarmthSource # 温暖来源枚举
├── TemperatureRecord # 温度记录模型
├── TemperatureDiaryHomePage # 主页面（底部导航）
├── _buildHomePage # 首页
├── _buildDiaryPage # 日记页面
└── _buildStatsPage # 统计页面
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 数据流程
三、核心模块设计
3.1 数据模型设计
3.1.1 温度感受枚举 (TemperatureFeeling)
enum TemperatureFeeling {
freezing('冰冷', '❄️', -3, Color(0xFF42A5F5)),
cold('寒冷', '🥶', -2, Color(0xFF64B5F6)),
cool('凉爽', '🍃', -1, Color(0xFF81D4FA)),
neutral('舒适', '😊', 0, Color(0xFF66BB6A)),
warm('温暖', '☀️', 1, Color(0xFFFFB74D)),
hot('炎热', '🔥', 2, Color(0xFFFF8A65)),
burning('灼热', '🌋', 3, Color(0xFFE53935));
final String label;
final String emoji;
final int value;
final Color color;
const TemperatureFeeling(this.label, this.emoji, this.value, this.color);
}
3.1.2 温度类型枚举 (TemperatureType)
enum TemperatureType {
emotional('情感温度', '💕', Color(0xFFEC407A)),
social('人际温度', '👥', Color(0xFFAB47BC)),
environmental('环境温度', '🌍', Color(0xFF42A5F5)),
physical('身体温度', '💪', Color(0xFFFF7043)),
spiritual('心灵温度', '✨', Color(0xFF7E57C2));
final String label;
final String emoji;
final Color color;
const TemperatureType(this.label, this.emoji, this.color);
}
3.1.3 温暖来源枚举 (WarmthSource)
enum WarmthSource {
family('家人', '👨👩👧👦', Color(0xFFFFB74D)),
friends('朋友', '👫', Color(0xFF4FC3F7)),
lover('恋人', '💕', Color(0xFFF06292)),
stranger('陌生人', '🧑', Color(0xFF90A4AE)),
nature('自然', '🌿', Color(0xFF66BB6A)),
work('工作', '💼', Color(0xFF5C6BC0)),
hobby('爱好', '🎨', Color(0xFFAB47BC)),
self('自己', '🌟', Color(0xFFFFCA28));
final String label;
final String emoji;
final Color color;
const WarmthSource(this.label, this.emoji, this.color);
}
3.1.4 温度记录模型 (TemperatureRecord)
class TemperatureRecord {
final String id; // 唯一标识
final DateTime date; // 记录日期
final TemperatureFeeling feeling; // 温度感受
final TemperatureType type; // 温度类型
final WarmthSource? source; // 温暖来源
final String? description; // 描述
final String? location; // 地点
final List<String> tags; // 标签
}
3.1.5 温度感受分布
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 首页结构
3.2.3 日记页面结构
3.2.4 统计页面结构
3.3 温度计算逻辑
3.4 统计计算逻辑
四、UI设计规范
4.1 配色方案
应用以橙红色为主色调，象征温暖：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #FF7043 (Deep Orange) | 导航、强调元素 |
| 冰冷色 | #42A5F5 | 冰冷感受标识 |
| 寒冷色 | #64B5F6 | 寒冷感受标识 |
| 凉爽色 | #81D4FA | 凉爽感受标识 |
| 舒适色 | #66BB6A | 舒适感受标识 |
| 温暖色 | #FFB74D | 温暖感受标识 |
| 炎热色 | #FF8A65 | 炎热感受标识 |
| 灼热色 | #E53935 | 灼热感受标识 |
4.2 类型配色
| 类型 | 色值 | 视觉效果 |
|---|---|---|
| 情感温度 | #EC407A | 粉红色 |
| 人际温度 | #AB47BC | 紫色 |
| 环境温度 | #42A5F5 | 蓝色 |
| 身体温度 | #FF7043 | 橙色 |
| 心灵温度 | #7E57C2 | 深紫色 |
4.3 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 24px | Bold | 主色 |
| 温度Emoji | 64px | - | - |
| 温度名称 | 24px | Bold | 黑色 |
| 卡片标题 | 18px | Bold | 黑色 |
| 感受标签 | 16px | Bold | 黑色 |
| 日期信息 | 12px | Regular | 灰色 |
4.4 组件规范
4.4.1 今日卡片
┌─────────────────────────────────────┐
│ ┌────┐ 今日温度 │
│ │ 🌡️ │ 记录你此刻感受到的温度 │
│ └────┘ │
└─────────────────────────────────────┘
4.4.2 温度刻度
┌─────────────────────────────────────┐
│ 温度刻度 │
│ │
│ ❄️ 🥶 🍃 😊 ☀️ 🔥 🌋 │
│ │ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │ │
│ 3 5 8 12 15 4 3 │
└─────────────────────────────────────┘
4.4.3 日记卡片
┌─────────────────────────────────────┐
│ ┌────┐ 温暖 [💕 情感温度] │
│ │ ☀️ │ 2024/4/8 │
│ └────┘ │
│ │
│ 今天感觉很温暖，阳光明媚... │
│ │
│ [💕 恋人] 📍 家 │
└─────────────────────────────────────┘
4.4.4 统计卡片
┌─────────────────────────────────────┐
│ 温度概览 │
│ │
│ 🌡️ 温暖 📖 50 📅 167% │
│ 平均温度 记录总数 月度完成 │
└─────────────────────────────────────┘
五、核心功能实现
5.1 温度记录
void _showAddRecordDialog() {
TemperatureFeeling selectedFeeling = TemperatureFeeling.neutral;
TemperatureType selectedType = TemperatureType.emotional;
WarmthSource? selectedSource;
final descriptionController = TextEditingController();
final locationController = TextEditingController();
showDialog(
context: context,
builder: (context) => StatefulBuilder(
builder: (context, setState) => AlertDialog(
title: const Text('记录温度'),
content: Column(
children: [
// 温度感受选择
Wrap(
children: TemperatureFeeling.values.map((feeling) {
return ChoiceChip(
label: Text('${feeling.emoji} ${feeling.label}'),
selected: selectedFeeling == feeling,
onSelected: (selected) {
setState(() => selectedFeeling = feeling);
},
);
}).toList(),
),
// 温度类型、温暖来源等...
],
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('取消'),
),
FilledButton(
onPressed: () {
final record = TemperatureRecord(
id: DateTime.now().millisecondsSinceEpoch.toString(),
date: DateTime.now(),
feeling: selectedFeeling,
type: selectedType,
source: selectedSource,
description: descriptionController.text,
location: locationController.text,
);
setState(() => _records.insert(0, record));
Navigator.pop(context);
},
child: const Text('保存'),
),
],
),
),
);
}
5.2 平均温度计算
double _calculateAverageTemperature() {
if (_records.isEmpty) return 0.0;
final sum = _records.map((r) => r.feeling.value).reduce((a, b) => a + b);
return sum / _records.length;
}
String _getTemperatureLabel(double avgTemperature) {
if (avgTemperature >= 2) return '灼热';
if (avgTemperature >= 1) return '温暖';
if (avgTemperature >= 0) return '舒适';
if (avgTemperature >= -1) return '凉爽';
if (avgTemperature >= -2) return '寒冷';
return '冰冷';
}
5.3 统计计算
Map<TemperatureFeeling, int> _calculateFeelingStats() {
final stats = <TemperatureFeeling, int>{};
for (var record in _records) {
stats[record.feeling] = (stats[record.feeling] ?? 0) + 1;
}
return stats;
}
Map<TemperatureType, int> _calculateTypeStats() {
final stats = <TemperatureType, int>{};
for (var record in _records) {
stats[record.type] = (stats[record.type] ?? 0) + 1;
}
return stats;
}
5.4 温度刻度展示
Widget _buildTemperatureScale() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: TemperatureFeeling.values.map((feeling) {
final count = _records.where((r) => r.feeling == feeling).length;
return Column(
children: [
Text(feeling.emoji, style: const TextStyle(fontSize: 24)),
Container(
height: 60,
width: 4,
decoration: BoxDecoration(
color: feeling.color,
borderRadius: BorderRadius.circular(2),
),
),
Text('$count'),
],
);
}).toList(),
);
}
六、交互设计
6.1 记录流程
6.2 浏览流程
6.3 统计流程
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 温度曲线
可视化功能：
- 温度变化曲线图
- 时间轴展示
- 趋势分析
- 对比分析
7.2.2 提醒功能
定时提醒：
- 每日记录提醒
- 定时推送
- 个性化设置
- 智能建议
7.2.3 社交功能
分享交流：
- 温度分享
- 社区展示
- 点赞评论
- 温度挑战
八、注意事项
8.1 开发注意事项
-
数据持久化：记录数据需要本地存储
-
温度计算：平均温度计算需要考虑权重
-
用户体验：记录流程要简洁流畅
-
数据可视化：图表展示要清晰直观
-
隐私保护：用户数据需要加密存储
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 温度计算错误 | 数值范围错误 | 检查温度值范围 |
| 统计不准确 | 数据未更新 | 刷新统计数据 |
| 图表显示异常 | 数据为空 | 添加空数据处理 |
| 选择器失效 | 状态未更新 | 调用setState |
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_temperature_diary.dart --web-port 8126
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_temperature_diary.dart
# 运行到Windows
flutter run -d windows -t lib/main_temperature_diary.dart
# 代码分析
flutter analyze lib/main_temperature_diary.dart
十、总结
温度日记通过温度记录、日记浏览、统计分析三大模块，为用户提供了一个独特的情感记录平台。不同于记录客观的气温数据，本应用专注于记录用户主观感受到的温度——情感温度、人际温度、环境温度、身体温度、心灵温度。
核心功能涵盖温度记录、温度分类、温暖来源、日记浏览、统计分析五大模块。温度记录支持选择温度感受、温度类型、温暖来源等信息；温度分类提供5种温度类型供选择；温暖来源支持8种来源类型；日记浏览展示所有历史记录；统计分析通过图表展示温度数据。
应用采用Material Design 3设计规范，以橙红色为主色调，象征温暖。通过本应用，希望能够帮助用户更好地理解自己的情感状态，追踪情绪变化，发现生活中的温暖与寒冷。
感受温度，记录生活
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
8
0- 0
已为社区贡献11条内容
所有评论(0)