Flutter 框架跨平台鸿蒙开发 - 社交断舍离应用

欢迎加入开源鸿蒙跨平台社区:
https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图

1.1 应用简介

社交断舍离是一款帮助用户评估和清理无效社交关系的智能应用。在这个信息爆炸的时代,我们被无数"朋友"包围,却常常感到孤独。本应用通过科学的评估体系,帮助用户识别那些消耗能量、毫无价值的社交关系,勇敢地做出断舍离的决定。

应用以深灰色为主色调,象征断舍离过程中的理性与冷静。涵盖社交评估、关系分析、断舍离管理、个人成长四大模块。用户可以通过多维度的评分系统,清晰地看到每段关系的价值,做出明智的社交决策。

1.2 核心功能

功能模块 功能描述 实现方式
社交评估 多维度评估社交关系质量 评分算法
关系分析 可视化社交关系分布 CustomPainter
断舍离管理 管理已断舍离的关系 列表管理
评分系统 能量值、价值度、时间投入、成长性 加权计算
原因标记 标记断舍离原因 多选标签
恢复功能 恢复误删的社交关系 状态切换

1.3 关系类型定义

序号 类型名称 Emoji 主题色 等级 描述
1 家人 👨‍👩‍👧‍👦 #E74C3C 6 血缘亲情,无条件的爱
2 挚友 💎 #3498DB 5 志同道合,灵魂契合
3 好友 #2ECC71 4 经常互动,值得深交
4 朋友 🤝 #F39C12 3 偶尔联系,关系一般
5 熟人 👋 #9B59B6 2 点头之交,无深交
6 陌生人 👤 #95A5A6 1 毫无交集的路人

1.4 互动类型分类

序号 互动类型 Emoji 主题色 描述
1 有意义 #2ECC71 带来积极能量和成长
2 中性 #F39C12 无明显正面或负面影响
3 消耗 🔋 #E74C3C 消耗精力,感到疲惫
4 有毒 ☠️ #8E44AD 带来负面情绪和伤害

1.5 断舍离原因分类

序号 原因类型 Emoji 描述
1 负能量 总是抱怨,消耗能量
2 单向付出 💔 只有你在维系关系
3 无成长 🚫 相处无法带来成长
4 浪费时间 无效社交,虚度光阴
5 情感负担 😓 相处感到压力
6 三观不合 🔀 价值观冲突严重
7 虚伪 🎭 表里不一,难以信任
8 利益至上 💰 只在有利可图时出现

1.6 评分维度定义

维度 权重 评估标准
能量值 30% 相处是否带来正向能量
价值度 25% 互动是否带来实际价值
时间投入 25% 付出与回报是否成正比
成长性 20% 是否能从关系中获得成长

1.7 技术栈

技术领域 技术选型 版本要求
开发框架 Flutter >= 3.0.0
编程语言 Dart >= 2.17.0
设计规范 Material Design 3 -
动画控制 AnimationController -
图表绘制 CustomPainter -
状态管理 setState -
目标平台 鸿蒙OS / Web API 21+

1.8 项目结构

复制代码
lib/
└── main_social_declutter.dart
    ├── SocialDeclutterApp           # 应用入口
    ├── RelationType                 # 关系类型枚举
    ├── InteractionType              # 互动类型枚举
    ├── DeclutterReason              # 断舍离原因枚举
    ├── SocialRelation               # 社交关系模型
    ├── InteractionRecord            # 互动记录模型
    ├── SocialDeclutterHomePage      # 主页面(底部导航)
    ├── _buildRelationsPage          # 社交列表页面
    ├── _buildAnalysisPage           # 社交分析页面
    ├── _buildDeclutteredPage        # 断舍离名单页面
    ├── _buildProfilePage            # 个人中心页面
    └── RelationTypeChartPainter     # 关系类型分布图绘制器

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

SocialDeclutterHomePage
社交列表页
社交分析页
断舍离名单
个人中心页
关系列表
关系详情
断舍离确认
评分统计
类型分布
建议列表
已断舍离列表
恢复功能
成就展示
社交洞察
理念说明
评分计算器

ScoreCalculator
断舍离管理器

DeclutterManager
分析引擎

AnalysisEngine
SocialRelation

社交关系
InteractionRecord

互动记录
RelationType

关系类型
DeclutterReason

断舍离原因

2.2 类图设计

has
has many
has many
has
manages
renders
SocialDeclutterApp
+Widget build()
<<enumeration>>
RelationType
+String label
+String emoji
+Color color
+int level
+family()
+closeFriend()
+goodFriend()
+friend()
+acquaintance()
+stranger()
<<enumeration>>
InteractionType
+String label
+String emoji
+Color color
+meaningful()
+neutral()
+draining()
+toxic()
<<enumeration>>
DeclutterReason
+String label
+String emoji
+String description
+negativeEnergy()
+oneSided()
+noGrowth()
+timeWaste()
+emotionalBurden()
+valuesClash()
+fake()
+profitOnly()
SocialRelation
+String id
+String name
+RelationType relationType
+double energyScore
+double valueScore
+double timeScore
+double growthScore
+List<InteractionRecord> interactions
+List<DeclutterReason> declutterReasons
+DateTime metDate
+bool isDecluttered
+double get overallScore
+String get scoreLabel
+Color get scoreColor
InteractionRecord
+DateTime date
+InteractionType type
+String? description
+int durationMinutes
+double energyChange
SocialDeclutterHomePage
-int _selectedIndex
-List<SocialRelation> _relations
-List<SocialRelation> _declutteredRelations
+Widget build()
-_declutterRelation()
-_restoreRelation()
-_showDeclutterDialog()
RelationTypeChartPainter
+Map<RelationType,int> typeCounts
+void paint()
+bool shouldRepaint()

2.3 页面导航流程

社交列表
社交分析
断舍离
我的
断舍离
恢复
查看详情
应用启动
社交列表页
底部导航
关系列表
数据分析
断舍离名单
个人中心
点击关系卡片
显示关系详情
用户操作
选择原因
确认断舍离
移入断舍离名单
查看评分统计
查看类型分布
查看建议列表
查看已断舍离
用户操作
恢复到社交列表
显示详情
查看成就
查看洞察
查看理念

2.4 断舍离决策流程

数据层 断舍离弹窗 关系详情 关系列表 用户 数据层 断舍离弹窗 关系详情 关系列表 用户 查看关系评分 显示评分排序 点击关系卡片 展示详细评分 点击断舍离按钮 显示原因选择 选择断舍离原因 更新关系状态 移入断舍离名单 刷新列表 显示成功提示


三、核心模块设计

3.1 数据模型设计

3.1.1 关系类型枚举 (RelationType)
dart 复制代码
enum RelationType {
  family(label: '家人', emoji: '👨‍👩‍👧‍👦', color: Color(0xFFE74C3C), level: 6),
  closeFriend(label: '挚友', emoji: '💎', color: Color(0xFF3498DB), level: 5),
  goodFriend(label: '好友', emoji: '⭐', color: Color(0xFF2ECC71), level: 4),
  friend(label: '朋友', emoji: '🤝', color: Color(0xFFF39C12), level: 3),
  acquaintance(label: '熟人', emoji: '👋', color: Color(0xFF9B59B6), level: 2),
  stranger(label: '陌生人', emoji: '👤', color: Color(0xFF95A5A6), level: 1);

  final String label;
  final String emoji;
  final Color color;
  final int level;
}
3.1.2 互动类型枚举 (InteractionType)
dart 复制代码
enum InteractionType {
  meaningful(label: '有意义', emoji: '✨', color: Color(0xFF2ECC71)),
  neutral(label: '中性', emoji: '➖', color: Color(0xFFF39C12)),
  draining(label: '消耗', emoji: '🔋', color: Color(0xFFE74C3C)),
  toxic(label: '有毒', emoji: '☠️', color: Color(0xFF8E44AD));

  final String label;
  final String emoji;
  final Color color;
}
3.1.3 社交关系模型 (SocialRelation)
dart 复制代码
class SocialRelation {
  final String id;
  final String name;
  final RelationType relationType;
  final double energyScore;      // 能量值 0-1
  final double valueScore;       // 价值度 0-1
  final double timeScore;        // 时间投入 0-1
  final double growthScore;      // 成长性 0-1
  final List<InteractionRecord> interactions;
  final List<DeclutterReason> declutterReasons;
  final DateTime metDate;
  final bool isDecluttered;
  
  double get overallScore =>
      (energyScore * 0.3 + valueScore * 0.25 + 
       timeScore * 0.25 + growthScore * 0.2);
  
  String get scoreLabel {
    if (overallScore >= 0.8) return '优质关系';
    if (overallScore >= 0.6) return '值得维系';
    if (overallScore >= 0.4) return '需要评估';
    if (overallScore >= 0.2) return '建议断舍离';
    return '无效社交';
  }
}
3.1.4 互动记录模型 (InteractionRecord)
dart 复制代码
class InteractionRecord {
  final DateTime date;
  final InteractionType type;
  final String? description;
  final int durationMinutes;
  final double energyChange;
}
3.1.5 关系类型分布

35% 25% 20% 12% 5% 3% 关系类型分布示例 家人 挚友 好友 朋友 熟人 陌生人

3.2 页面结构设计

3.2.1 主页面布局

SocialDeclutterHomePage
IndexedStack
社交列表页
社交分析页
断舍离名单页
个人中心页
NavigationBar
社交列表 Tab
社交分析 Tab
断舍离 Tab
我的 Tab

3.2.2 社交列表页结构

社交列表页
SliverAppBar
快速统计
关系列表
标题
渐变背景
社交关系数
待评估数
已断舍离数
关系卡片
类型图标
姓名
评分标签
状态指示

3.2.3 关系详情弹窗结构

关系详情弹窗
关系头部
评分详情
综合评分
评分说明
操作按钮
类型图标
姓名
类型标签
评分标签
能量值进度条
价值度进度条
时间投入进度条
成长性进度条
综合评分卡片
互动次数卡片
断舍离按钮

3.2.4 社交分析页结构

社交分析页
平均评分展示
统计卡片
类型分布图
建议断舍离列表
平均评分
评分说明
总关系数
优质关系数
待评估数
已断舍离数
环形图
图例说明
低评分关系列表

3.3 评分计算算法

>=0.8
>=0.6
>=0.4
>=0.2
<0.2
获取关系数据
计算各维度分数
能量值 30%
价值度 25%
时间投入 25%
成长性 20%
加权求和
归一化到0-1
生成综合评分
评分等级
优质关系
值得维系
需要评估
建议断舍离
无效社交

3.4 断舍离决策流程





查看关系详情
综合评分判断
评分 < 0.4?
显示警告标识
正常显示
点击断舍离按钮
弹出原因选择
选择断舍离原因
确认断舍离?
更新关系状态
移入断舍离名单
显示成功提示
返回详情页


四、UI设计规范

4.1 配色方案

应用以深灰色为主色调,象征断舍离过程中的理性与冷静:

颜色类型 色值 用途
主色 #5D6D7E (Grey Blue) 导航、主题元素
背景色 #ECEFF1 页面背景
卡片背景 #FFFFFF 关系卡片
家人 #E74C3C 家人类型标识
挚友 #3498DB 挚友类型标识
好友 #2ECC71 好友类型标识
朋友 #F39C12 朋友类型标识
熟人 #9B59B6 熟人类型标识
陌生人 #95A5A6 陌生人类型标识

4.2 评分配色

评分等级 色值 视觉效果
优质关系 #2ECC71 生机绿色
值得维系 #27AE60 明亮绿色
需要评估 #F39C12 警示橙色
建议断舍离 #E74C3C 警告红色
无效社交 #C0392B 危险红色

4.3 字体规范

元素 字号 字重 颜色
页面标题 24px Bold 主色
关系姓名 16px Bold #000000
关系类型 12px Regular 类型色
评分显示 14px Bold 评分色
标签文字 10px Bold 标签色
时间显示 12px Regular #9E9E9E

4.4 组件规范

4.4.1 关系卡片布局
复制代码
┌──────────────────────────────────────────────────────┐
│  ┌────┐                              ┌──────────┐   │
│  │ 👨‍👩‍👧‍👦 │  张三                        │ 65分    │   │
│  │    │  家人 #同事 #朋友              │ 值得维系 │   │
│  └────┘                              │    👍    │   │
│                                      └──────────┘   │
└──────────────────────────────────────────────────────┘
4.4.2 关系详情弹窗
复制代码
┌─────────────────────────────────────────────────────┐
│                    ─────                            │
│                                                     │
│  ┌────────┐                                         │
│  │   👨‍👩‍👧‍👦   │  张三                                │
│  └────────┘  家人 · 值得维系                        │
│                                                     │
│  ┌─────────────────────────────────────────────┐   │
│  │ 能量值 ████████░░ 80%    价值度 ██████░░░░ 60%│   │
│  │ 时间投入 ███████░░░ 70%  成长性 ██████░░░░ 60%│   │
│  └─────────────────────────────────────────────┘   │
│                                                     │
│  ┌────────────────┐  ┌────────────────┐            │
│  │     65         │  │      12        │            │
│  │   综合评分     │  │   互动次数     │            │
│  └────────────────┘  └────────────────┘            │
│                                                     │
│  评分说明                                           │
│  • ✨ 这段关系各项指标良好,值得维系               │
│                                                     │
│       [🗑️ 断舍离此关系]                            │
└─────────────────────────────────────────────────────┘
4.4.3 断舍离确认弹窗
复制代码
┌─────────────────────────────────────────────────────┐
│  👨‍👩‍👧‍👦  社交断舍离                                    │
├─────────────────────────────────────────────────────┤
│                                                     │
│  张三                                               │
│  综合评分: 25分                                     │
│                                                     │
│  选择断舍离原因:                                   │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐              │
│  │ ⚡    │ │ 💔    │ │ 🚫    │ │ ⏰    │              │
│  │负能量│ │单向付出│ │无成长 │ │浪费时间│              │
│  └──────┘ └──────┘ └──────┘ └──────┘              │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐              │
│  │ 😓    │ │ 🔀    │ │ 🎭    │ │ 💰    │              │
│  │情感负担│ │三观不合│ │ 虚伪  │ │利益至上│              │
│  └──────┘ └──────┘ └──────┘ └──────┘              │
│                                                     │
│         [取消]        [确认断舍离]                  │
└─────────────────────────────────────────────────────┘
4.4.4 统计卡片
复制代码
┌─────────────────────────────────────────────────────┐
│                                                     │
│    👥        ✅        ⚠️        🗑️                  │
│    10        5          3          2                 │
│  总关系    优质关系   待评估    已断舍离             │
│                                                     │
└─────────────────────────────────────────────────────┘

五、核心功能实现

5.1 评分计算实现

dart 复制代码
double get overallScore =>
    (energyScore * 0.3 + valueScore * 0.25 + 
     timeScore * 0.25 + growthScore * 0.2);

String get scoreLabel {
  if (overallScore >= 0.8) return '优质关系';
  if (overallScore >= 0.6) return '值得维系';
  if (overallScore >= 0.4) return '需要评估';
  if (overallScore >= 0.2) return '建议断舍离';
  return '无效社交';
}

Color get scoreColor {
  if (overallScore >= 0.6) return Color(0xFF2ECC71);
  if (overallScore >= 0.4) return Color(0xFFF39C12);
  return Color(0xFFE74C3C);
}

5.2 断舍离功能实现

dart 复制代码
void _declutterRelation(SocialRelation relation, List<DeclutterReason> reasons) {
  setState(() {
    _relations.removeWhere((r) => r.id == relation.id);
    _declutteredRelations.insert(
      0,
      relation.copyWith(
        isDecluttered: true,
        declutterReasons: reasons,
      ),
    );
  });

  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text('已将 ${relation.name} 移入断舍离名单'),
      backgroundColor: Color(0xFF5D6D7E),
    ),
  );
}

5.3 恢复功能实现

dart 复制代码
void _restoreRelation(SocialRelation relation) {
  setState(() {
    _declutteredRelations.removeWhere((r) => r.id == relation.id);
    _relations.insert(
      0,
      relation.copyWith(
        isDecluttered: false,
        declutterReasons: [],
      ),
    );
  });

  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text('已将 ${relation.name} 恢复到社交列表'),
      backgroundColor: Color(0xFF2ECC71),
    ),
  );
}

5.4 关系列表排序

dart 复制代码
final sortedRelations = List<SocialRelation>.from(_relations)
  ..sort((a, b) => a.overallScore.compareTo(b.overallScore));

5.5 类型分布图绘制

dart 复制代码
class RelationTypeChartPainter extends CustomPainter {
  final Map<RelationType, int> typeCounts;

  RelationTypeChartPainter({required this.typeCounts});

  @override
  void paint(Canvas canvas, Size size) {
    final total = typeCounts.values.fold<int>(0, (sum, v) => sum + v);
    if (total == 0) return;

    final center = Offset(size.width / 2, size.height / 2);
    final radius = size.height / 2 - 20;
    var startAngle = -pi / 2;

    typeCounts.forEach((type, count) {
      if (count == 0) return;

      final sweepAngle = (count / total) * 2 * pi;
      final paint = Paint()
        ..color = type.color
        ..style = PaintingStyle.fill;

      canvas.drawArc(
        Rect.fromCircle(center: center, radius: radius),
        startAngle,
        sweepAngle,
        true,
        paint,
      );

      startAngle += sweepAngle;
    });

    final innerPaint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.fill;
    canvas.drawCircle(center, radius * 0.5, innerPaint);
  }
}

六、交互设计

6.1 断舍离决策流程

数据层 断舍离弹窗 关系详情 关系列表 用户 数据层 断舍离弹窗 关系详情 关系列表 用户 查看评分排序 显示低评分关系 点击关系卡片 展示详细评分 点击断舍离按钮 显示原因选择 选择原因并确认 更新关系状态 刷新列表 显示成功提示

6.2 评分预警流程



计算综合评分
评分 < 0.4?
显示警告标识
正常显示
卡片边框变红
显示警告图标
提示建议断舍离
显示正常状态
显示积极图标

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 社交评估系统 断舍离功能 统计分析 互动记录 智能建议 数据导出 社交日历 关系提醒 云端同步 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 社交断舍离应用开发计划

7.2 功能扩展建议

7.2.1 互动记录功能

记录功能:

  • 记录每次互动的时间和类型
  • 自动计算互动频率
  • 分析互动质量趋势
  • 生成互动报告
7.2.2 智能建议系统

智能分析功能:

  • 基于评分自动推荐断舍离
  • 识别潜在优质关系
  • 提供社交改善建议
  • 生成社交质量报告
7.2.3 社交日历

时间管理功能:

  • 记录重要互动时间
  • 提醒维护优质关系
  • 分析互动频率
  • 规划社交活动

八、注意事项

8.1 开发注意事项

  1. 评分算法:综合评分采用加权平均,权重可根据用户需求调整

  2. 数据持久化:关系数据需要本地存储,支持数据导出

  3. 断舍离确认:断舍离操作需要选择原因,避免误操作

  4. 恢复功能:支持恢复误删的关系,保留历史数据

  5. 排序逻辑:关系列表按评分升序排列,低评分关系优先展示

8.2 常见问题

问题 原因 解决方案
评分显示异常 评分维度数据错误 检查评分范围是否在0-1之间
断舍离后无法恢复 历史记录丢失 确保断舍离名单数据完整
统计数据不准 数据未及时更新 每次操作后刷新统计
环形图显示错误 数据为空或全零 添加空数据检查
排序不正确 评分计算错误 检查评分算法实现

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_declutter.dart --web-port 8129

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_social_declutter.dart

# 运行到Windows
flutter run -d windows -t lib/main_social_declutter.dart

# 代码分析
flutter analyze lib/main_social_declutter.dart

十、总结

社交断舍离应用通过社交评估、关系分析、断舍离管理、个人成长四大模块,为用户提供了一个科学的社交关系管理平台。应用采用多维度评分系统,帮助用户清晰地看到每段关系的价值,做出明智的社交决策。

核心功能涵盖评分计算、断舍离管理、统计分析、恢复功能四大模块。评分系统通过能量值、价值度、时间投入、成长性四个维度综合计算关系质量分;断舍离管理支持选择原因并移入断舍离名单;统计分析提供类型分布图和低评分关系列表;恢复功能支持将误删的关系恢复到社交列表。

应用采用 Material Design 3 设计规范,以深灰色为主色调,象征断舍离过程中的理性与冷静。通过本应用,希望能够帮助用户清理无效社交,拥抱真正有价值的友谊。

社交断舍离------放下无效社交,拥抱真正友谊


相关推荐
fengci.2 小时前
php反序列化(复习)(第二章)
android·开发语言·学习·php
世人万千丶2 小时前
Flutter 框架跨平台鸿蒙开发 - 感恩杀手应用
学习·flutter·开源·harmonyos·鸿蒙
管鲍考试学习系统2 小时前
以考促学、以练固基:一体化在线考试学习平台设计与实践
学习·在线考试·考试系统·线上考试
牛马1112 小时前
Flutter iOS 权限配置完整指南(定位权限)
flutter·ios
charlie1145141912 小时前
通用GUI编程技术——图形渲染实战(二十五)——Alpha混合与透明效果:分层窗口实战
c++·windows·学习·图形渲染·win32
charlie1145141912 小时前
通用GUI编程技术——图形渲染实战(二十四)——GDI Region与裁切:不规则窗口与可视化控制
c++·windows·学习·c·图形渲染·win32
起来改bug2 小时前
【AiAgent学习】状态管理与多步推理
学习·aiagent·aiagent入门
gwjcloud2 小时前
Ansible自动化运维工具
运维·自动化·ansible