Flutter 框架跨平台鸿蒙开发 - 社交电量
运行效果图社交电量是一款创新的个人能量管理应用，灵感来源于内向者的真实需求。应用将人的社交能量比作电池电量，帮助用户直观了解自己的社交状态。当电量充足时，可以尽情社交；当电量耗尽时，应用会提醒用户独处充电。通过记录社交活动和充电行为，帮助用户找到适合自己的社交节奏。应用以紫色为主色调，营造宁静舒适的视觉体验。涵盖电量监控、活动记录、统计分析、个性设置四大模块，支持8种社交活动和8种充电方式，通过智
·
社交电量应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
社交电量是一款创新的个人能量管理应用，灵感来源于内向者的真实需求。应用将人的社交能量比作电池电量，帮助用户直观了解自己的社交状态。当电量充足时，可以尽情社交；当电量耗尽时，应用会提醒用户独处充电。通过记录社交活动和充电行为，帮助用户找到适合自己的社交节奏。
应用以紫色为主色调，营造宁静舒适的视觉体验。涵盖电量监控、活动记录、统计分析、个性设置四大模块，支持8种社交活动和8种充电方式，通过智能建议帮助用户平衡社交与独处。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 电量监控 | 实时显示社交电量 | 动画电池组件 |
| 活动记录 | 记录社交/充电活动 | 底部弹窗表单 |
| 统计分析 | 周度数据可视化 | CustomPainter图表 |
| 智能建议 | 根据电量提供建议 | 状态判断逻辑 |
| 低电量提醒 | 电量过低时通知 | SnackBar提示 |
| 性格设置 | 选择性格类型 | Radio选择器 |
1.3 电量等级系统
| 序号 | 等级名称 | 阈值 | 颜色 | 状态描述 |
|---|---|---|---|---|
| 1 | 满电 | 100% | #00B894 | 精力充沛，可以尽情社交！ |
| 2 | 充足 | 75% | #00CEC9 | 状态良好，适合社交活动 |
| 3 | 正常 | 50% | #FDCB6E | 电量适中，注意节奏 |
| 4 | 低电量 | 25% | #E17055 | 需要休息，减少社交 |
| 5 | 耗尽 | 10% | #D63031 | 急需充电，请独处休息 |
1.4 社交活动类型
| 序号 | 活动名称 | Emoji | 电量消耗 | 场景描述 |
|---|---|---|---|---|
| 1 | 聚会派对 | 🎉 | -25% | 大型社交场合 |
| 2 | 工作会议 | 💼 | -15% | 正式工作场合 |
| 3 | 约会 | 💕 | -20% | 一对一社交 |
| 4 | 群聊 | 💬 | -10% | 多人在线交流 |
| 5 | 电话 | 📞 | -8% | 语音通话 |
| 6 | 闲聊 | 🗣️ | -5% | 简短交流 |
| 7 | 社交活动 | 🤝 | -18% | 拓展人脉 |
| 8 | 演讲展示 | 🎤 | -22% | 公开表达 |
1.5 充电活动类型
| 序号 | 活动名称 | Emoji | 电量恢复 | 场景描述 |
|---|---|---|---|---|
| 1 | 独处 | 🧘 | +20% | 享受独处时光 |
| 2 | 阅读 | 📚 | +15% | 沉浸书海 |
| 3 | 听音乐 | 🎵 | +12% | 放松心情 |
| 4 | 散步 | 🚶 | +10% | 户外漫步 |
| 5 | 小憩 | 😴 | +25% | 短暂休息 |
| 6 | 冥想 | 🧠 | +18% | 静心冥想 |
| 7 | 游戏 | 🎮 | +8% | 娱乐放松 |
| 8 | 看电影 | 🎬 | +10% | 观影放松 |
1.6 性格类型
| 类型 | Emoji | 特点描述 |
|---|---|---|
| 内向型 | 🔋 | 独处充电，社交消耗 |
| 中间型 | ⚡ | 平衡社交与独处 |
| 外向型 | ☀️ | 社交充电，独处消耗 |
1.7 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 动画控制 | AnimationController | - |
| 定时器 | Timer | - |
| 目标平台 | 鸆蒙OS / Web | API 21+ |
1.8 项目结构
lib/
└── main_social_battery.dart
├── SocialBatteryApp # 应用入口
├── BatteryLevel # 电量等级枚举
├── SocialActivity # 社交活动枚举
├── ChargingActivity # 充电活动枚举
├── PersonalityType # 性格类型枚举
├── SocialRecord # 社交记录数据模型
├── SocialBatteryHomePage # 主页面（底部导航）
├── _buildMainPage # 电量主页面
├── _buildHistoryPage # 记录页面
├── _buildStatsPage # 统计页面
├── _buildSettingsPage # 设置页面
└── WeeklyChartPainter # 周图表绘制器
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 电量变化流程
三、核心模块设计
3.1 数据模型设计
3.1.1 电量等级枚举 (BatteryLevel)
enum BatteryLevel {
full('满电', '精力充沛，可以尽情社交！', Color(0xFF00B894), 100),
high('充足', '状态良好，适合社交活动', Color(0xFF00CEC9), 75),
medium('正常', '电量适中，注意节奏', Color(0xFFFDCB6E), 50),
low('低电量', '需要休息，减少社交', Color(0xFFE17055), 25),
critical('耗尽', '急需充电，请独处休息', Color(0xFFD63031), 10);
final String label; // 等级名称
final String advice; // 建议文字
final Color color; // 主题颜色
final int threshold; // 阈值
}
3.1.2 社交活动枚举 (SocialActivity)
enum SocialActivity {
party('聚会派对', '🎉', -25, '大型社交场合'),
meeting('工作会议', '💼', -15, '正式工作场合'),
dating('约会', '💕', -20, '一对一社交'),
groupChat('群聊', '💬', -10, '多人在线交流'),
phoneCall('电话', '📞', -8, '语音通话'),
smallTalk('闲聊', '🗣️', -5, '简短交流'),
networking('社交活动', '🤝', -18, '拓展人脉'),
presentation('演讲展示', '🎤', -22, '公开表达');
final String label; // 活动名称
final String emoji; // 代表表情
final int batteryChange; // 电量变化（负数）
final String description; // 场景描述
}
3.1.3 充电活动枚举 (ChargingActivity)
enum ChargingActivity {
alone('独处', '🧘', 20, '享受独处时光'),
reading('阅读', '📚', 15, '沉浸书海'),
music('听音乐', '🎵', 12, '放松心情'),
walk('散步', '🚶', 10, '户外漫步'),
nap('小憩', '😴', 25, '短暂休息'),
meditation('冥想', '🧠', 18, '静心冥想'),
gaming('游戏', '🎮', 8, '娱乐放松'),
movie('看电影', '🎬', 10, '观影放松');
final String label; // 活动名称
final String emoji; // 代表表情
final int batteryChange; // 电量变化（正数）
final String description; // 场景描述
}
3.1.4 社交记录模型 (SocialRecord)
class SocialRecord {
final String id; // 唯一标识
final String activity; // 活动名称
final String emoji; // 活动表情
final int batteryChange; // 电量变化
final DateTime timestamp; // 时间戳
final String? note; // 备注信息
final bool isCharging; // 是否充电
}
3.1.5 电量等级分布
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 电量页面结构
3.2.3 活动选择弹窗结构
3.3 电量计算流程
四、UI设计规范
4.1 配色方案
应用以紫色为主色调，营造宁静舒适的视觉体验：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #6C5CE7 (Purple) | 导航、强调元素 |
| 满电色 | #00B894 | 高电量状态 |
| 充足色 | #00CEC9 | 良好状态 |
| 正常色 | #FDCB6E | 中等状态 |
| 低电色 | #E17055 | 警示状态 |
| 耗尽色 | #D63031 | 危险状态 |
4.2 状态配色
| 等级 | 色值 | 视觉效果 |
|---|---|---|
| 满电 | #00B894 | 清新绿色 |
| 充足 | #00CEC9 | 明亮青色 |
| 正常 | #FDCB6E | 温暖黄色 |
| 低电 | #E17055 | 警示橙色 |
| 耗尽 | #D63031 | 危险红色 |
4.3 活动配色
| 类型 | 色值 | 视觉效果 |
|---|---|---|
| 社交消耗 | #E17055 | 消耗警示 |
| 充电恢复 | #00B894 | 恢复生机 |
4.4 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 电量百分比 | 48px | Bold | 状态色 |
| 状态标签 | 18px | SemiBold | 状态色 |
| 页面标题 | 20px | Bold | #000000 |
| 活动名称 | 14px | Medium | #000000 |
| 电量变化 | 14px | Bold | 活动色 |
| 建议文字 | 14px | Regular | #666666 |
4.5 组件规范
4.5.1 电池可视化组件
┌─────────────────────────────────────┐
│ │
│ ┌──────────────┐ │
│ │██████████████│ ┃ │
│ │██████████████│ ┃ │
│ │██████████████│ │
│ └──────────────┘ │
│ │
│ 75% │
│ [ 充足 ] │
│ 状态良好，适合社交活动 │
│ │
└─────────────────────────────────────┘
4.5.2 状态卡片
┌─────────────────────────────────────┐
│ -32% +45% 🔋 │
│ 今日消耗 今日充电 性格类型 │
└─────────────────────────────────────┘
4.5.3 快捷操作按钮
┌──────────┐ ┌──────────┐ ┌──────────┐
│ ➖ │ │ ⚡ │ │ ➕ │
│ 消耗10% │ │ 充电 │ │ 充电10% │
└──────────┘ └──────────┘ └──────────┘
4.5.4 活动卡片
┌─────────────────┐ ┌─────────────────┐
│ 🎉 聚会派对 │ │ 🧘 独处 │
│ -25% │ │ +20% │
└─────────────────┘ └─────────────────┘
4.5.5 智能建议卡片
┌─────────────────────────────────────┐
│ ⚠️ 智能建议 │
│ │
│ 电量较低，建议减少社交活动， │
│ 找时间独处充电。 │
└─────────────────────────────────────┘
五、核心功能实现
5.1 电量等级计算
BatteryLevel get _currentLevel {
if (_batteryLevel >= BatteryLevel.full.threshold) return BatteryLevel.full;
if (_batteryLevel >= BatteryLevel.high.threshold) return BatteryLevel.high;
if (_batteryLevel >= BatteryLevel.medium.threshold) return BatteryLevel.medium;
if (_batteryLevel >= BatteryLevel.low.threshold) return BatteryLevel.low;
return BatteryLevel.critical;
}
5.2 活动记录实现
void _recordActivity(dynamic activity, {bool isCharging = false}) {
final record = SocialRecord(
id: DateTime.now().millisecondsSinceEpoch.toString(),
activity: activity.label,
emoji: activity.emoji,
batteryChange: activity.batteryChange,
timestamp: DateTime.now(),
isCharging: isCharging,
);
setState(() {
_records.insert(0, record);
_batteryLevel = (_batteryLevel + activity.batteryChange).clamp(0, 100);
_calculateTodayStats();
});
if (isCharging) {
_chargeController.forward(from: 0);
}
Navigator.pop(context);
}
5.3 自动消耗机制
void _startAutoDrain() {
_drainTimer = Timer.periodic(const Duration(minutes: 30), (timer) {
if (_batteryLevel > 0) {
setState(() {
_batteryLevel = (_batteryLevel - 1).clamp(0, 100);
});
_checkLowBattery();
}
});
}
5.4 低电量提醒
void _checkLowBattery() {
if (_batteryLevel <= BatteryLevel.critical.threshold) {
_showLowBatteryNotification();
}
}
void _showLowBatteryNotification() {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Row(
children: [
const Text('🔋 '),
Expanded(child: Text(BatteryLevel.critical.advice)),
],
),
backgroundColor: BatteryLevel.critical.color,
action: SnackBarAction(
label: '去充电',
textColor: Colors.white,
onPressed: () => _showChargingSheet(),
),
),
);
}
5.5 电池可视化实现
Widget _buildBatteryWidget() {
final level = _currentLevel;
final fillPercent = _batteryLevel / 100.0;
return Container(
width: 160,
height: 80,
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.grey[400]!, width: 3),
),
child: Stack(
children: [
// 电池正极凸起
Positioned(
right: -8,
top: 20,
child: Container(
width: 12,
height: 40,
decoration: BoxDecoration(
color: Colors.grey[400],
borderRadius: BorderRadius.circular(4),
),
),
),
// 电量填充
AnimatedBuilder(
animation: _chargeController,
builder: (context, child) {
return Container(
margin: const EdgeInsets.all(6),
width: 140 * fillPercent * (1 + _chargeController.value * 0.1),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [level.color, level.color.withValues(alpha: 0.7)],
),
borderRadius: BorderRadius.circular(6),
),
);
},
),
// 低电量警告图标
if (_batteryLevel <= BatteryLevel.low.threshold)
Positioned.fill(
child: Center(
child: Icon(Icons.warning, color: Colors.white, size: 32),
),
),
],
),
);
}
六、智能建议设计
6.1 建议逻辑流程
6.2 性格类型影响
七、交互设计
7.1 添加活动流程
7.2 充电流程
7.3 低电量处理流程
八、扩展功能规划
8.1 后续版本规划
8.2 功能扩展建议
8.2.1 本地通知
通知功能：
- 低电量推送提醒
- 充电时间建议
- 每日总结推送
- 社交活动提醒
8.2.2 日历视图
日历功能：
- 月度电量趋势
- 活动日历标记
- 最佳社交日推荐
- 充电日规划
8.2.3 AI智能建议
智能功能：
- 个性化充电建议
- 社交活动预测
- 最佳社交时机
- 能量管理报告
九、注意事项
9.1 开发注意事项
-
电量边界：电量值需要clamp到0-100范围
-
定时器管理：Timer需要在dispose时取消
-
动画释放：AnimationController需要在dispose时释放
-
状态更新：活动记录后需要更新电量和统计
-
低电量检测：每次电量变化后检查是否需要提醒
9.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 电量溢出 | 未做边界处理 | 使用clamp方法 |
| 动画卡顿 | Controller未释放 | 在dispose中释放 |
| 提醒不显示 | 阈值判断错误 | 检查critical阈值 |
| 统计不准确 | 时间过滤错误 | 使用完整日期比较 |
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_social_battery.dart --web-port 8113
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_social_battery.dart
# 运行到Edge浏览器
flutter run -d edge lib/main_social_battery.dart
# 代码分析
flutter analyze lib/main_social_battery.dart
十一、总结
社交电量应用通过电量监控、活动记录、统计分析、个性设置四大模块，为用户提供了一个直观管理社交能量的平台。应用支持8种社交活动和8种充电方式，通过电量等级系统和智能建议帮助用户平衡社交与独处。
核心功能涵盖电量可视化、活动记录、统计分析、智能建议、低电量提醒五大模块。电量系统通过电池组件直观展示当前状态；活动记录支持社交消耗和充电恢复两种类型；统计系统提供周度图表和数据概览；建议系统根据电量状态提供个性化建议；提醒系统在电量过低时及时通知用户。
应用采用Material Design 3设计规范，以紫色为主色调，营造宁静舒适的视觉体验。通过本应用，希望能够帮助用户了解自己的社交能量节奏，找到适合自己的社交与独处平衡点。
记录你的社交能量，提醒何时该独处充电
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)