Flutter 框架跨平台鸿蒙开发 - 社交关系星图

一直在想名2026-04-08 22:07

社交关系星图应用

欢迎加入开源鸿蒙跨平台社区：

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 整体架构图

Data Layer
Presentation Layer
主页面

SocialStarMapHomePage
星图页面
关系列表
统计页面
星空背景
动态星图
中心节点
关系节点
分类列表
人物卡片
概览卡片
分布图表
社交洞察
SocialPerson

社交人物
RelationType

关系类型
InteractionLevel

互动频率

2.2 类图设计

has
has
manages
uses
SocialStarMapApp
+Widget build()
<<enumeration>>
RelationType
+String label
+String emoji
+Color color
+String description
+family()
+lover()
+bestFriend()
+friend()
+colleague()
+classmate()
+acquaintance()
<<enumeration>>
InteractionLevel
+String label
+String emoji
+Color color
+String description
+frequent()
+regular()
+occasional()
+rare()
SocialPerson
+String id
+String name
+String? avatar
+RelationType relationType
+InteractionLevel interactionLevel
+DateTime metDate
+String? notes
+List<String> tags
+double angle
+double distance
SocialStarMapHomePage
-int _selectedIndex
-List<SocialPerson> _persons
-AnimationController _rotationController
-AnimationController _pulseController
+Widget build()
-_addPerson()
-_getStatistics()
StarMapPainter
+List<SocialPerson> persons
+double rotation
+double pulseValue
+void paint()
+bool shouldRepaint()

2.3 页面导航流程

星图
关系
统计
应用启动
星图页面
底部导航
动态星图
关系列表
统计页面
点击节点
人物详情
添加关系
表单弹窗
创建人物
分类浏览
查看人物
查看概览
查看分布
查看洞察

2.4 星图绘制流程

Canvas StarMapPainter 星图页面 用户 Canvas StarMapPainter 星图页面 用户 loop [每帧动画] 进入页面 创建绘制器 绘制背景星空 绘制中心节点 绘制关系连线 绘制人物节点 点击节点 显示人物详情

三、核心模块设计

3.1 数据模型设计

3.1.1 关系类型枚举 (RelationType)
dart 复制代码 
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)
dart 复制代码 
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)
dart 复制代码 
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 关系类型分布

14% 14% 14% 14% 14% 14% 14% 关系类型分布 家人 恋人 挚友 朋友 同事 同学 熟人

3.2 页面结构设计

3.2.1 主页面布局

SocialStarMapHomePage
IndexedStack
星图页面
关系列表
统计页面
NavigationBar
星图 Tab
关系 Tab
统计 Tab

3.2.2 星图页面结构

星图页面
SliverAppBar
内容区域
渐变背景
背景星星
动态星图
中心节点
关系连线
人物节点
快速统计
关系图例

3.2.3 星图节点布局

星图中心
人物节点
角度计算
距离计算
angle = (index / total) * 2π
distance = 0.4 + random * 0.4
节点大小
频繁互动 → 更大节点
节点颜色
关系类型 → 对应颜色

3.2.4 统计页面结构

统计页面
概览卡片
关系分布
频率分布
社交洞察
总人数
亲密关系
活跃关系
类型分布图
频率分布图
智能分析
建议提示

3.3 星图绘制算法

是
否
开始绘制
绘制中心节点
遍历人物列表
计算节点位置
x = centerX + cos(angle + rotation) * distance
y = centerY + sin(angle + rotation) * distance
绘制连线
绘制节点光晕
绘制节点圆形
绘制姓名首字
还有人物?
结束绘制

3.4 统计计算流程

亲密>=30%
活跃>=50%
其他
获取人物列表
统计关系类型
统计互动频率
计算亲密关系数
计算活跃关系数
亲密 = 家人 + 恋人 + 挚友
活跃 = 频繁 + 经常
生成洞察
关系分析
关系质量高
社交活跃
建议多互动

四、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 星图绘制实现

dart 复制代码 
class StarMapPainter extends CustomPainter {
  final List<SocialPerson> persons;
  final double rotation;
  final double pulseValue;

  @override
  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 动态旋转实现

dart 复制代码 
@override
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 添加关系实现

dart 复制代码 
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 统计计算实现

dart 复制代码 
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 背景星星实现

dart 复制代码 
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 添加关系流程

表单弹窗 星图页面 用户 表单弹窗 星图页面 用户 点击添加按钮 显示表单 展示输入项 输入姓名 选择关系类型 选择互动频率 添加备注 点击添加 创建SocialPerson 计算位置 显示新节点

6.2 查看详情流程

点击节点
显示详情弹窗
展示基本信息
展示关系类型
展示互动频率
展示认识时间
展示标签列表

6.3 星图交互流程

自动播放
节点呼吸
用户交互
显示信息
关闭弹窗
点击按钮
输入信息
创建节点
星图展示
旋转动画
脉冲动画
点击节点
详情弹窗
添加关系
表单填写

七、扩展功能规划

7.1 后续版本规划

2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 2024-02-25 2024-03-03 2024-03-10 2024-03-17 2024-03-24 星图可视化 关系管理 统计分析 数据持久化 头像上传 关系网络图 社交提醒 关系演变追踪 云端同步 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 社交关系星图应用开发计划

7.2 功能扩展建议

7.2.1 数据持久化

本地数据存储：

  • 使用SQLite存储关系数据
  • 支持数据导出功能
  • 支持备份恢复
7.2.2 关系网络图

增强可视化：

  • 显示人物之间的关系
  • 群体聚类分析
  • 社交圈子划分
7.2.3 社交提醒

智能提醒功能：

  • 定期联系提醒
  • 特殊日期提醒
  • 关系维护建议

八、注意事项

8.1 开发注意事项

  1. 动画性能：星图旋转使用60秒周期，避免过快刷新

  2. 位置计算：使用极坐标计算节点位置，便于旋转

  3. 动画释放：AnimationController需要在dispose中释放

  4. 状态更新：添加人物后需要重新计算位置

8.2 常见问题

问题 原因 解决方案
星图不显示 人物列表为空 检查数据加载
节点重叠 位置计算错误 调整距离随机值
动画卡顿 未释放Controller 在dispose中释放
颜色不对 枚举值错误 检查RelationType

8.3 星图寄语

🌟 社交星图寄语 🌟

每个人都是一颗独特的星星，

在我们的生命中闪耀。

有的近在咫尺，有的遥不可及，

但都在我们的星图中留下轨迹。

珍惜每一份关系，

让社交星图更加璀璨。

愿你的星图永远闪耀 ✨

九、运行说明

9.1 环境要求

环境 版本要求
Flutter SDK >= 3.0.0
Dart SDK >= 2.17.0
鸿蒙OS API 21+

9.2 运行命令

bash 复制代码 
# 查看可用设备
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设计规范，以深紫色为主色调，配合星空背景和动态效果，营造浪漫神秘的氛围。通过本应用，希望能够帮助用户更好地了解和管理自己的社交网络，珍惜每一份关系。

可视化你的社交网络，让关系更加清晰

相关推荐
AI_零食3 小时前
开源鸿蒙跨平台Flutter开发：昼夜节律与睡眠相位-脑电波周期与最佳苏醒测绘架构
flutter·ui·华为·架构·开源·harmonyos·鸿蒙
李李李勃谦3 小时前
Flutter 框架跨平台鸿蒙开发 - 问题漂流瓶
flutter·华为·harmonyos
AI_零食4 小时前
Flutter 框架跨平台鸿蒙开发 - 自定义式按钮设计应用
学习·flutter·ui·华为·harmonyos·鸿蒙
攻城狮在此5 小时前
华为交换机Console口密码如何清除
运维·网络·华为
一直在想名5 小时前
Flutter 框架跨平台鸿蒙开发 - 步数换算器
flutter·华为·harmonyos
程序员老刘7 小时前
Trae 按照Token计费，我的Flutter项目每个月要花多少钱？
flutter·ai编程·trae
chenyingjian7 小时前
鸿蒙｜能力特性-统一文件预览
前端·harmonyos
Utopia^8 小时前
Flutter 框架跨平台鸿蒙开发 - 起床战争
flutter·华为·harmonyos
autumn20058 小时前
Flutter 框架跨平台鸿蒙开发 - 习惯养成塔
flutter·华为·harmonyos
热门推荐
01GitHub 镜像站点02OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程03AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南04Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）05【Vulhub】Fastjson 1.2.24_rce复现06VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）07Claude Code 未登录 使用第三方模型08UV安装并设置国内源09Oh My Codex 快速使用指南10“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）