Flutter 框架跨平台鸿蒙开发 - 社交关系星图
运行效果图社交关系星图应用是一款创新的社交网络可视化工具，将人际关系以星空图的形式呈现。用户处于星图的中心，周围环绕着不同关系类型的朋友，通过连线、颜色、大小等视觉元素直观展示社交网络的结构和亲密度。应用以深紫色为主色调，营造神秘、浪漫的星空氛围。应用涵盖了星图可视化、关系管理、统计分析三大模块，支持7种关系类型和4种互动频率，每种类型对应特定的颜色和图标。通过动态星图、关系详情、数据统计等功能，
·
社交关系星图应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
社交关系星图应用是一款创新的社交网络可视化工具，将人际关系以星空图的形式呈现。用户处于星图的中心，周围环绕着不同关系类型的朋友，通过连线、颜色、大小等视觉元素直观展示社交网络的结构和亲密度。应用以深紫色为主色调，营造神秘、浪漫的星空氛围。
应用涵盖了星图可视化、关系管理、统计分析三大模块，支持7种关系类型和4种互动频率，每种类型对应特定的颜色和图标。通过动态星图、关系详情、数据统计等功能，帮助用户更好地了解和管理自己的社交网络。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 星图可视化 | 动态旋转星空图 | CustomPainter |
| 关系管理 | 添加/查看关系 | 表单弹窗 |
| 关系分类 | 7种关系类型 | 枚举定义 |
| 互动频率 | 4种频率等级 | 枚举定义 |
| 统计分析 | 关系分布统计 | 图表展示 |
| 社交洞察 | 智能分析建议 | 算法判断 |
1.3 关系类型定义
| 序号 | 类型名称 | Emoji | 主题色 | 描述 |
|---|---|---|---|---|
| 1 | 家人 | 👨👩👧👦 | #E91E63 | 血缘亲情 |
| 2 | 恋人 | 💕 | #F06292 | 甜蜜爱情 |
| 3 | 挚友 | 🌟 | #9C27B0 | 知心好友 |
| 4 | 朋友 | 🤝 | #2196F3 | 普通朋友 |
| 5 | 同事 | 💼 | #00BCD4 | 工作伙伴 |
| 6 | 同学 | 📚 | #4CAF50 | 同窗情谊 |
| 7 | 熟人 | 👋 | #FF9800 | 点头之交 |
1.4 互动频率定义
| 序号 | 频率名称 | Emoji | 主题色 | 描述 |
|---|---|---|---|---|
| 1 | 频繁 | 🔥 | #FF5722 | 每天互动 |
| 2 | 经常 | ✨ | #8BC34A | 每周互动 |
| 3 | 偶尔 | 💫 | #03A9F4 | 每月互动 |
| 4 | 稀少 | 💤 | #9E9E9E | 很少互动 |
1.5 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 动画控制 | AnimationController | - |
| 图表绘制 | CustomPainter | - |
| 状态管理 | setState | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.6 项目结构
lib/
└── main_social_star_map.dart
├── SocialStarMapApp # 应用入口
├── RelationType # 关系类型枚举
├── InteractionLevel # 互动频率枚举
├── SocialPerson # 社交人物模型
├── SocialStarMapHomePage # 主页面（底部导航）
├── _buildStarMapPage # 星图页面
├── _buildRelationsPage # 关系列表页面
├── _buildStatsPage # 统计页面
└── StarMapPainter # 星图绘制器
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 星图绘制流程
三、核心模块设计
3.1 数据模型设计
3.1.1 关系类型枚举 (RelationType)
enum RelationType {
family('家人', '👨👩👧👦', Color(0xFFE91E63), '血缘亲情'),
lover('恋人', '💕', Color(0xFFF06292), '甜蜜爱情'),
bestFriend('挚友', '🌟', Color(0xFF9C27B0), '知心好友'),
friend('朋友', '🤝', Color(0xFF2196F3), '普通朋友'),
colleague('同事', '💼', Color(0xFF00BCD4), '工作伙伴'),
classmate('同学', '📚', Color(0xFF4CAF50), '同窗情谊'),
acquaintance('熟人', '👋', Color(0xFFFF9800), '点头之交');
final String label; // 类型名称
final String emoji; // 代表图标
final Color color; // 主题颜色
final String description; // 类型描述
}
3.1.2 互动频率枚举 (InteractionLevel)
enum InteractionLevel {
frequent('频繁', '🔥', Color(0xFFFF5722), '每天互动'),
regular('经常', '✨', Color(0xFF8BC34A), '每周互动'),
occasional('偶尔', '💫', Color(0xFF03A9F4), '每月互动'),
rare('稀少', '💤', Color(0xFF9E9E9E), '很少互动');
final String label; // 频率名称
final String emoji; // 代表图标
final Color color; // 主题颜色
final String description; // 频率描述
}
3.1.3 社交人物模型 (SocialPerson)
class SocialPerson {
final String id; // 唯一标识
final String name; // 姓名
final String? avatar; // 头像（可选）
final RelationType relationType; // 关系类型
final InteractionLevel interactionLevel; // 互动频率
final DateTime metDate; // 认识日期
final String? notes; // 备注（可选）
final List<String> tags; // 标签列表
final double angle; // 星图角度
final double distance; // 星图距离
}
3.1.4 关系类型分布
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 星图页面结构
3.2.3 星图节点布局
3.2.4 统计页面结构
3.3 星图绘制算法
3.4 统计计算流程
四、UI设计规范
4.1 配色方案
应用以深紫色为主色调，营造神秘、浪漫的星空氛围：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #673AB7 (Deep Purple) | 导航、强调元素 |
| 星空背景 | #1A237E | 深蓝色 |
| 星空渐变 | #311B92 | 紫色过渡 |
| 家人 | #E91E63 | 粉红色 |
| 恋人 | #F06292 | 浅粉色 |
| 挚友 | #9C27B0 | 紫色 |
| 朋友 | #2196F3 | 蓝色 |
| 同事 | #00BCD4 | 青色 |
| 同学 | #4CAF50 | 绿色 |
| 熟人 | #FF9800 | 橙色 |
4.2 星空渐变
| 位置 | 颜色 | 透明度 |
|---|---|---|
| 中心 | #1A237E | 80% |
| 中间 | #311B92 | 60% |
| 外围 | #4A148C | 40% |
| 边缘 | Surface | 0% |
4.3 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 应用标题 | 24px | Bold | 白色 |
| 人物姓名 | 24px | Bold | 黑色 |
| 节点文字 | 10px | Bold | 白色 |
| 分类标签 | 12px | Regular | 分类色 |
| 统计数值 | 24px | Bold | 黑色 |
4.4 组件规范
4.4.1 星图布局
┌─────────────────────────────────────┐
│ 背景星空 │
│ ✦ ✦ ✦ │
│ ✦ ┌─────────┐ ✦ │
│ ╱ ● ╲ │
│ ╱ 🤝 │ 💕 ╲ │
│ │ ● │ │
│ │ ● 我 🌟 │ │
│ │ │ │ │
│ ╲ 💼 │ 👨👩👧👦 ╱ │
│ ╲ ● ╱ │
│ └─────────┘ │
│ ✦ ✦ ✦ ✦ │
└─────────────────────────────────────┘
● = 人物节点（颜色表示关系类型）
我 = 中心节点
4.4.2 人物卡片
┌─────────────────────────────────────────────┐
│ ┌────┐ ┌────┐ │
│ │ 小 │ 小明 │ 🤝 │ │
│ │ 明 │ ✨ 经常 │ │ │
│ └────┘ └────┘ │
└─────────────────────────────────────────────┘
4.4.3 关系分类
┌──────────────────────────────────────┐
│ ┌────┐ 家人 ┌────┐ │
│ │ 👨👩👧👦 │ 3人 │ ❤️ │ │
│ └────┘ └────┘ │
│ │
│ ┌────────────────────────────────┐ │
│ │ 小明 ✨经常 │ │
│ └────────────────────────────────┘ │
│ ┌────────────────────────────────┐ │
│ │ 小红 🔥频繁 │ │
│ └────────────────────────────────┘ │
└──────────────────────────────────────┘
4.4.4 统计卡片
┌────────────────────────────────────────────┐
│ 社交网络概览 │
│ │
│ 👥 ❤️ 🔥 │
│ 15 5 8 │
│ 总人数 亲密关系 活跃关系 │
└────────────────────────────────────────────┘
五、核心功能实现
5.1 星图绘制实现
class StarMapPainter extends CustomPainter {
final List<SocialPerson> persons;
final double rotation;
final double pulseValue;
void paint(Canvas canvas, Size size) {
final center = Offset(size.width / 2, size.height / 2);
final baseRadius = min(size.width, size.height) / 2 - 30;
// 绘制中心节点
final centerPaint = Paint()
..color = Colors.white
..style = PaintingStyle.fill;
canvas.drawCircle(center, 20, centerPaint);
// 绘制人物节点
for (var person in persons) {
final angle = person.angle + rotation;
final distance = person.distance * baseRadius;
final x = center.dx + cos(angle) * distance;
final y = center.dy + sin(angle) * distance;
// 绘制连线
final linePaint = Paint()
..color = person.relationType.color.withValues(alpha: 0.3)
..strokeWidth = 1.5;
canvas.drawLine(center, Offset(x, y), linePaint);
// 绘制节点
final nodePaint = Paint()
..color = person.relationType.color
..style = PaintingStyle.fill;
canvas.drawCircle(Offset(x, y), 12, nodePaint);
}
}
}
5.2 动态旋转实现
void initState() {
super.initState();
_rotationController = AnimationController(
vsync: this,
duration: const Duration(seconds: 60),
)..repeat();
_pulseController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1500),
)..repeat(reverse: true);
}
AnimatedBuilder(
animation: _rotationController,
builder: (context, child) {
return CustomPaint(
painter: StarMapPainter(
persons: _persons,
rotation: _rotationController.value * 2 * pi,
pulseValue: _pulseController.value,
),
);
},
)
5.3 添加关系实现
void _addPerson(SocialPerson person) {
final angle = (_persons.length / max(_persons.length + 1, 1)) * 2 * pi;
final random = Random();
final distance = 0.4 + random.nextDouble() * 0.4;
setState(() {
_persons.add(person.copyWith(angle: angle, distance: distance));
});
}
5.4 统计计算实现
Map<String, dynamic> _getStatistics() {
final relationCounts = <RelationType, int>{};
for (var type in RelationType.values) {
relationCounts[type] = _persons.where((p) => p.relationType == type).length;
}
final levelCounts = <InteractionLevel, int>{};
for (var level in InteractionLevel.values) {
levelCounts[level] = _persons.where((p) => p.interactionLevel == level).length;
}
final closeRelations = [RelationType.family, RelationType.lover, RelationType.bestFriend];
final closeCount = _persons.where((p) => closeRelations.contains(p.relationType)).length;
final frequentLevels = [InteractionLevel.frequent, InteractionLevel.regular];
final activeCount = _persons.where((p) => frequentLevels.contains(p.interactionLevel)).length;
return {
'totalCount': _persons.length,
'relationCounts': relationCounts,
'levelCounts': levelCounts,
'closeCount': closeCount,
'activeCount': activeCount,
};
}
5.5 背景星星实现
List<Widget> _buildBackgroundStars() {
final random = Random(42);
return List.generate(50, (index) {
final x = random.nextDouble();
final y = random.nextDouble();
final size = 1.0 + random.nextDouble() * 2;
return Positioned(
left: x * 400,
top: y * 500,
child: Container(
width: size,
height: size,
decoration: BoxDecoration(
color: Colors.white.withValues(alpha: 0.3 + random.nextDouble() * 0.5),
shape: BoxShape.circle,
),
),
);
});
}
六、交互设计
6.1 添加关系流程
6.2 查看详情流程
6.3 星图交互流程
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 数据持久化
本地数据存储：
- 使用SQLite存储关系数据
- 支持数据导出功能
- 支持备份恢复
7.2.2 关系网络图
增强可视化：
- 显示人物之间的关系
- 群体聚类分析
- 社交圈子划分
7.2.3 社交提醒
智能提醒功能：
- 定期联系提醒
- 特殊日期提醒
- 关系维护建议
八、注意事项
8.1 开发注意事项
-
动画性能：星图旋转使用60秒周期，避免过快刷新
-
位置计算：使用极坐标计算节点位置，便于旋转
-
动画释放：AnimationController需要在dispose中释放
-
状态更新：添加人物后需要重新计算位置
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 星图不显示 | 人物列表为空 | 检查数据加载 |
| 节点重叠 | 位置计算错误 | 调整距离随机值 |
| 动画卡顿 | 未释放Controller | 在dispose中释放 |
| 颜色不对 | 枚举值错误 | 检查RelationType |
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_social_star_map.dart --web-port 8118
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_social_star_map.dart
# 运行到Windows
flutter run -d windows -t lib/main_social_star_map.dart
# 代码分析
flutter analyze lib/main_social_star_map.dart
十、总结
社交关系星图应用通过星图可视化、关系管理、统计分析三大模块，为用户提供了一个直观的社交网络管理工具。应用支持7种关系类型和4种互动频率，通过动态旋转的星空图直观展示社交网络结构。
核心功能涵盖星图可视化、关系管理、数据统计三大模块。星图可视化以动态旋转的星空图呈现社交网络；关系管理支持添加和查看关系详情；数据统计提供关系分布和社交洞察分析。
应用采用Material Design 3设计规范，以深紫色为主色调，配合星空背景和动态效果，营造浪漫神秘的氛围。通过本应用，希望能够帮助用户更好地了解和管理自己的社交网络，珍惜每一份关系。
可视化你的社交网络，让关系更加清晰
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
0
0- 0
已为社区贡献10条内容
所有评论(0)