Flutter 框架跨平台鸿蒙开发 - 家庭能源可视化
·
家庭能源可视化应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
家庭能源可视化是一款智能家居类应用，为家庭用户提供直观的用电监测与节能管理服务。应用以绿色为主色调，象征节能环保的理念。界面设计采用卡片式布局，让用户一目了然地掌握家庭用电情况。
应用实时显示各电器的用电状态，通过热力图直观展示用电规律，提供个性化的节能建议。用户可以在不知不觉中养成节能习惯，有效降低电费支出。智能管理家庭能源，从了解开始，从改变做起。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 实时监测 | 实时功率显示 | Timer定时刷新 |
| 电器管理 | 各电器用电统计 | 列表卡片展示 |
| 热力图 | 用电规律可视化 | CustomPaint绘制 |
| 节能建议 | 个性化节能方案 | 智能推荐系统 |
| 用电统计 | 日/月用电分析 | 数据聚合计算 |
| 电费计算 | 自动电费估算 | 阶梯电价模型 |
1.3 电器分类体系
应用支持10种常见家用电器：
| 电器类型 | 图标 | 颜色 | 额定功率 | 运行特点 |
|---|---|---|---|---|
| 空调 | ac_unit | #2196F3 | 1500W | 制冷制热 |
| 冰箱 | kitchen | #4CAF50 | 150W | 24小时运行 |
| 洗衣机 | local_laundry_service | #9C27B0 | 500W | 间歇运行 |
| 电视 | tv | #FF5722 | 120W | 娱乐设备 |
| 照明 | lightbulb | #FFC107 | 60W | 日常照明 |
| 电脑 | computer | #607D8B | 200W | 办公娱乐 |
| 热水器 | water_drop | #00BCD4 | 2000W | 加热耗能 |
| 微波炉 | microwave | #E91E63 | 1000W | 短时高功率 |
| 电饭煲 | rice_bowl | #795548 | 800W | 烹饪设备 |
| 电风扇 | toys | #03A9F4 | 50W | 夏季降温 |
1.4 能耗等级体系
| 等级 | 名称 | 颜色 | 功率范围 | 状态说明 |
|---|---|---|---|---|
| 低能耗 | Low | #4CAF50 | 0-30% | 节能状态 |
| 中等 | Medium | #FFC107 | 30-60% | 正常用电 |
| 高能耗 | High | #FF9800 | 60-80% | 需要关注 |
| 超高 | Critical | #F44336 | 80-100% | 建议节能 |
1.5 时段电价体系
| 时段 | 时间范围 | 电价倍率 | 说明 |
|---|---|---|---|
| 凌晨 | 0:00-6:00 | 0.5 | 低谷电价 |
| 早晨 | 6:00-9:00 | 1.0 | 平时电价 |
| 上午 | 9:00-12:00 | 1.0 | 平时电价 |
| 中午 | 12:00-14:00 | 1.2 | 峰时电价 |
| 下午 | 14:00-18:00 | 1.0 | 平时电价 |
| 傍晚 | 18:00-21:00 | 1.5 | 高峰电价 |
| 夜间 | 21:00-24:00 | 0.8 | 低谷电价 |
1.6 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState | - |
| 定时任务 | Timer | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.7 项目结构
lib/
└── main_home_energy.dart
├── HomeEnergyApp # 应用入口
├── ApplianceType # 电器类型枚举
├── EnergyLevel # 能耗等级枚举
├── TimeSlot # 时段枚举
├── ApplianceUsage # 电器用电模型
├── HourlyUsage # 小时用电模型
├── DailyUsage # 日用电模型
├── EnergySavingTip # 节能建议模型
├── HomeEnergyHomePage # 主页面（底部导航）
├── _buildDashboardPage # 总览页面
├── _buildAppliancesPage # 电器页面
├── _buildHeatmapPage # 热力图页面
├── _buildTipsPage # 节能页面
└── HourlyChartPainter # 用电曲线绘制器
二、设计理念
2.1 能源管理可视化
2.2 节能管理流程
2.3 色彩体系
应用采用绿色为主色调：
| 颜色类型 | 色值 | RGB | 用途 |
|---|---|---|---|
| 主色 | #4CAF50 | 76,175,80 | 导航、按钮、强调 |
| 辅助色 | #8BC34A | 139,195,74 | 渐变、背景 |
| 低能耗色 | #4CAF50 | 76,175,80 | 低能耗标识 |
| 中等色 | #FFC107 | 255,193,7 | 中等能耗 |
| 高能耗色 | #FF9800 | 255,152,0 | 高能耗警告 |
| 超高色 | #F44336 | 244,67,54 | 超高能耗警示 |
2.4 用电数据流程
三、系统架构
3.1 整体架构图
3.2 类图设计
3.3 实时数据更新流程
四、核心功能实现
4.1 电器类型枚举
定义10种家用电器：
enum ApplianceType {
airConditioner('空调', Icons.ac_unit, Color(0xFF2196F3), 1500, '制冷制热'),
refrigerator('冰箱', Icons.kitchen, Color(0xFF4CAF50), 150, '24小时运行'),
washingMachine('洗衣机', Icons.local_laundry_service, Color(0xFF9C27B0), 500, '间歇运行'),
television('电视', Icons.tv, Color(0xFFFF5722), 120, '娱乐设备'),
lighting('照明', Icons.lightbulb, Color(0xFFFFC107), 60, '日常照明'),
computer('电脑', Icons.computer, Color(0xFF607D8B), 200, '办公娱乐'),
waterHeater('热水器', Icons.water_drop, Color(0xFF00BCD4), 2000, '加热耗能'),
microwave('微波炉', Icons.microwave, Color(0xFFE91E63), 1000, '短时高功率'),
riceCooker('电饭煲', Icons.rice_bowl, Color(0xFF795548), 800, '烹饪设备'),
electricFan('电风扇', Icons.toys, Color(0xFF03A9F4), 50, '夏季降温');
final String label;
final IconData icon;
final Color color;
final int defaultPower;
final String description;
const ApplianceType(this.label, this.icon, this.color, this.defaultPower, this.description);
}
4.2 能耗等级枚举
定义四级能耗体系：
enum EnergyLevel {
low('低能耗', Color(0xFF4CAF50), 0, 30),
medium('中等', Color(0xFFFFC107), 30, 60),
high('高能耗', Color(0xFFFF9800), 60, 80),
critical('超高', Color(0xFFF44336), 80, 100);
final String label;
final Color color;
final int minPercent;
final int maxPercent;
const EnergyLevel(this.label, this.color, this.minPercent, this.maxPercent);
static EnergyLevel fromPercent(double percent) {
for (var level in EnergyLevel.values) {
if (percent >= level.minPercent && percent < level.maxPercent) {
return level;
}
}
return EnergyLevel.critical;
}
}
4.3 实时数据更新
定时刷新电器数据：
void _startRealTimeUpdate() {
_updateTimer = Timer.periodic(const Duration(seconds: 3), (timer) {
_updateRealTimeData();
});
}
void _updateRealTimeData() {
final random = Random();
setState(() {
for (var usage in _applianceUsages) {
if (usage.isRunning) {
final fluctuation = 0.9 + random.nextDouble() * 0.2;
_applianceUsages[_applianceUsages.indexOf(usage)] = ApplianceUsage(
id: usage.id,
type: usage.type,
currentPower: usage.type.defaultPower * fluctuation,
todayUsage: usage.todayUsage + usage.type.defaultPower * 0.001,
monthUsage: usage.monthUsage,
isRunning: usage.isRunning,
lastActive: DateTime.now(),
);
}
}
_calculateTotals();
});
}
4.4 热力图颜色计算
根据用电强度返回对应颜色：
Color _getHeatmapColor(double intensity) {
if (intensity < 0.2) return const Color(0xFFE8F5E9);
if (intensity < 0.4) return const Color(0xFFC8E6C9);
if (intensity < 0.6) return const Color(0xFFFFEB3B);
if (intensity < 0.8) return const Color(0xFFFF9800);
return const Color(0xFFF44336);
}
4.5 用电曲线绘制
使用CustomPaint绘制24小时用电曲线：
class HourlyChartPainter extends CustomPainter {
final List<HourlyUsage> usages;
void paint(Canvas canvas, Size size) {
final maxUsage = usages.map((u) => u.usage).reduce(max);
final barWidth = size.width / 24;
final paint = Paint()..style = PaintingStyle.fill;
for (int i = 0; i < usages.length; i++) {
final usage = usages[i];
final barHeight = (usage.usage / maxUsage) * size.height;
final x = i * barWidth;
final y = size.height - barHeight;
final intensity = usage.usage / maxUsage;
paint.color = _getBarColor(intensity);
final rect = RRect.fromRectAndRadius(
Rect.fromLTWH(x + 1, y, barWidth - 2, barHeight),
const Radius.circular(2),
);
canvas.drawRRect(rect, paint);
}
}
}
4.6 节能建议系统
提供个性化节能建议：
List<EnergySavingTip> _savingTips = [
EnergySavingTip(
id: 't1',
title: '空调温度优化',
content: '将空调温度调高1°C，可节省约10%的空调用电。建议夏季设置26°C，冬季设置20°C。',
category: '温控',
potentialSaving: 15.0,
icon: Icons.thermostat,
color: const Color(0xFF2196F3),
),
EnergySavingTip(
id: 't3',
title: '热水器定时',
content: '热水器是家庭耗电大户。建议设置定时加热，避开用电高峰期，仅在需要时加热。',
category: '热水',
potentialSaving: 25.0,
icon: Icons.timer,
color: const Color(0xFF00BCD4),
),
];
五、UI设计规范
5.1 配色方案
应用采用绿色为主色调：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #4CAF50 | 导航、按钮、强调 |
| 辅助色 | #8BC34A | 渐变、背景 |
| 低能耗色 | #4CAF50 | 低能耗标识 |
| 中等色 | #FFC107 | 中等能耗 |
| 高能耗色 | #FF9800 | 高能耗警告 |
| 超高色 | #F44336 | 超高能耗警示 |
5.2 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 20px | Bold | #000000 |
| 实时功率 | 48px | Bold | 能耗等级颜色 |
| 电器名称 | 15px | SemiBold | #000000 |
| 用电数据 | 12px | Regular | #757575 |
| 节省金额 | 36px | Bold | #FFFFFF |
5.3 组件规范
5.3.1 实时功率卡片
┌─────────────────────────────────────────┐
│ ⚡ 实时功率 │
│ │
│ 1234 W │
│ │
│ [中等能耗] │
└─────────────────────────────────────────┘
5.3.2 电器卡片
┌─────────────────────────────────────────┐
│ [❄️] 空调 [运行中] [○] │
│ 当前功率: 1520W │
│ 今日: 3.25 kWh │
└─────────────────────────────────────────┘
5.3.3 热力图单元格
┌───┬───┬───┬───┬───┬───┬───┐
│ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │ ← 周日-周六
├───┼───┼───┼───┼───┼───┼───┤
│🟢│🟢│🟡│🟡│🟠│🟢│🟢│ ← 颜色深浅表示用电强度
├───┼───┼───┼───┼───┼───┼───┤
│🟢│🟡│🟠│🔴│🟠│🟡│🟢│
└───┴───┴───┴───┴───┴───┴───┘
六、交互设计
6.1 总览页面交互
6.2 电器管理流程
6.3 页面切换状态
七、数据分析
7.1 统计指标
| 统计项 | 计算方式 | 说明 |
|---|---|---|
| 实时功率 | 运行中电器功率之和 | 当前用电状态 |
| 今日用电 | 各电器今日用电累加 | 日用电量 |
| 今日费用 | 今日用电 × 0.5元/kWh | 日电费估算 |
| 本月用电 | 各电器月用电累加 | 月用电量 |
| 本月费用 | 本月用电 × 0.5元/kWh | 月电费估算 |
7.2 能耗分析
void _calculateTotals() {
_totalCurrentPower = _applianceUsages.fold(0, (sum, u) => sum + u.currentPower);
_todayTotalUsage = _applianceUsages.fold(0, (sum, u) => sum + u.todayUsage);
_todayTotalCost = _applianceUsages.fold(0, (sum, u) => sum + u.todayCost);
_monthTotalUsage = _applianceUsages.fold(0, (sum, u) => sum + u.monthUsage);
_monthTotalCost = _applianceUsages.fold(0, (sum, u) => sum + u.monthCost);
}
7.3 节能潜力分析
| 建议类型 | 潜在节省 | 实施难度 |
|---|---|---|
| 空调温度优化 | ¥15/月 | 简单 |
| 热水器定时 | ¥25/月 | 中等 |
| 待机设备断电 | ¥8/月 | 简单 |
| LED照明替换 | ¥12/月 | 中等 |
| 错峰用电 | ¥10/月 | 简单 |
| 冰箱合理使用 | ¥5/月 | 简单 |
八、扩展功能规划
8.1 后续版本规划
8.2 功能扩展建议
8.2.1 智能插座对接
接入智能插座实现真实数据采集：
- WiFi/蓝牙插座协议
- 实时功率读取
- 远程开关控制
- 定时任务设置
8.2.2 AI节能推荐
基于用电数据的智能推荐：
- 用电习惯分析
- 异常用电预警
- 个性化节能方案
- 电费预测
8.2.3 家庭能源报告
生成详细的能源报告：
- 周报/月报生成
- 用电趋势分析
- 节能效果追踪
- 分享与对比
九、注意事项
9.1 开发注意事项
-
定时器管理：Timer需要在dispose时取消，避免内存泄漏
-
状态更新：使用setState刷新UI，注意性能优化
-
数据精度：用电数据保留适当小数位，避免精度问题
-
动画控制：AnimationController需要正确初始化和释放
9.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 功率不更新 | Timer未启动 | 检查_startRealTimeUpdate |
| 热力图颜色异常 | 强度计算错误 | 检查intensity范围 |
| 费用计算不准 | 电价模型错误 | 验证阶梯电价 |
| 动画卡顿 | 刷新频率过高 | 降低刷新频率 |
9.3 使用提示
💡 家庭能源可视化使用小贴士 💡
关注实时功率，了解当前用电状态。
查看热力图，发现用电规律。
采纳节能建议，不知不觉省电费。
定期查看统计，追踪节能效果。
提示：养成随手关灯、合理使用空调的好习惯，节能从点滴做起。
十、运行说明
10.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 鸿蒙OS | API 21+ |
10.2 运行命令
# 查看可用设备
flutter devices
# 运行到Web服务器
flutter run -d web-server -t lib/main_home_energy.dart --web-port 8137
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_home_energy.dart
# 运行到Windows
flutter run -d windows -t lib/main_home_energy.dart
# 代码分析
flutter analyze lib/main_home_energy.dart
十一、总结
家庭能源可视化是一款智能家居类应用，为家庭用户提供直观的用电监测与节能管理服务。应用以绿色为主色调，采用卡片式布局，让用户一目了然地掌握家庭用电情况。
从技术实现来看，应用使用枚举类型定义10种家用电器、4级能耗等级和7个时段电价，通过Timer实现每3秒的实时数据刷新，使用CustomPaint绘制用电曲线和热力图。节能建议系统提供6条个性化建议，累计潜在节省可达75元/月。
从用户体验来看，应用提供直观的实时功率显示，让用户了解当前用电状态。电器管理功能支持开关控制和用电统计，热力图功能直观展示用电规律，节能建议帮助用户养成节能习惯。
应用不仅是一个用电监测工具，更是一个节能管理助手。它提醒我们：关注实时功率，了解当前用电状态；查看热力图，发现用电规律；采纳节能建议，不知不觉省电费；定期查看统计，追踪节能效果。在家庭能源管理的道路上，家庭能源可视化为用户提供了全方位的辅助工具。
智能管理家庭能源，从了解开始
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
12
0- 0
已为社区贡献28条内容
所有评论(0)