Flutter 框架跨平台鸿蒙开发 - 孤独指数应用
·
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
孤独指数是一款独特的心理健康评估应用，通过多维度因素分析来量化用户的孤独程度。应用以蓝紫色为主色调，象征内省与平静。界面设计采用仪表盘风格，将抽象的孤独感受转化为直观的数值指标。
应用通过六个核心维度来评估孤独程度：社交频率、独处时长、情感状态、连接质量、归属感和自我价值。每个维度都有独立的权重系数，最终计算出综合的孤独指数。用户可以调整各因素的评分，实时查看指数变化，并获得个性化的改善建议。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 孤独仪表盘 | 实时显示孤独指数 | CustomPaint仪表盘 |
| 因素调节 | 调整各维度评分 | Slider滑块 |
| 趋势分析 | 历史数据趋势图 | CustomPaint折线图 |
| 雷达图分析 | 多维度可视化 | CustomPaint雷达图 |
| 改善建议 | 个性化建议推荐 | 智能算法 |
| 记录保存 | 保存评估记录 | 本地存储 |
1.3 孤独等级划分
应用定义了五级孤独程度：
| 等级 | 名称 | 颜色 | 分数范围 | 说明 |
|---|---|---|---|---|
| 1 | 无孤独 | #4CAF50 | 0-20 | 社交状态健康 |
| 2 | 轻微孤独 | #8BC34A | 21-40 | 正常范围内的孤独感 |
| 3 | 中度孤独 | #FFEB3B | 41-60 | 需要适度关注 |
| 4 | 高度孤独 | #FF9800 | 61-80 | 建议采取行动改善 |
| 5 | 严重孤独 | #F44336 | 81-100 | 建议寻求专业帮助 |
1.4 影响因素体系
| 因素 | 权重 | 描述 |
|---|---|---|
| 社交频率 | 25% | 与他人互动的频率 |
| 独处时长 | 20% | 每天独处的时间比例 |
| 情感状态 | 20% | 内心的情感满足程度 |
| 连接质量 | 15% | 人际关系的深度和质量 |
| 归属感 | 10% | 对群体的归属感受 |
| 自我价值 | 10% | 对自我价值的认同感 |
1.5 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState | - |
| 动画系统 | AnimationController | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.6 项目结构
lib/
└── main_loneliness_index.dart
├── LonelinessIndexApp # 应用入口
├── LonelinessLevel # 孤独等级枚举
├── LonelinessFactor # 影响因素模型
├── LonelinessRecord # 记录模型
├── LonelinessIndexHomePage # 主页面（底部导航）
├── _buildIndexPage # 指数页面
├── _buildTrendPage # 趋势页面
├── _buildAnalysisPage # 分析页面
├── GaugePainter # 仪表盘绘制器
├── TrendChartPainter # 趋势图绘制器
└── RadarChartPainter # 雷达图绘制器
二、设计理念
2.1 孤独指数可视化
2.2 孤独等级模型
2.3 色彩体系
应用采用蓝紫色为主色调：
| 颜色类型 | 色值 | RGB | 用途 |
|---|---|---|---|
| 主色 | #5C6BC0 | 92,107,192 | 导航、按钮、强调 |
| 辅助色 | #7986CB | 121,134,203 | 渐变、次要元素 |
| 无孤独 | #4CAF50 | 76,175,80 | 一级孤独 |
| 轻微孤独 | #8BC34A | 139,195,74 | 二级孤独 |
| 中度孤独 | #FFEB3B | 255,235,59 | 三级孤独 |
| 高度孤独 | #FF9800 | 255,152,0 | 四级孤独 |
| 严重孤独 | #F44336 | 244,67,54 | 五级孤独 |
2.4 指数计算流程
三、系统架构
3.1 整体架构图
3.2 类图设计
3.3 指数计算流程
四、核心功能实现
4.1 孤独等级枚举
定义五级孤独程度：
enum LonelinessLevel {
none('无孤独', Color(0xFF4CAF50), 0, 20),
mild('轻微孤独', Color(0xFF8BC34A), 21, 40),
moderate('中度孤独', Color(0xFFFFEB3B), 41, 60),
high('高度孤独', Color(0xFFFF9800), 61, 80),
severe('严重孤独', Color(0xFFF44336), 81, 100);
final String label;
final Color color;
final int minScore;
final int maxScore;
const LonelinessLevel(this.label, this.color, this.minScore, this.maxScore);
static LonelinessLevel fromScore(int score) {
for (var level in LonelinessLevel.values) {
if (score >= level.minScore && score <= level.maxScore) {
return level;
}
}
return LonelinessLevel.severe;
}
}
4.2 影响因素模型
定义六个核心影响因素：
class LonelinessFactor {
final String id;
final String name;
final String description;
final IconData icon;
final int weight;
int score;
LonelinessFactor({
required this.id,
required this.name,
required this.description,
required this.icon,
required this.weight,
this.score = 50,
});
}
4.3 加权计算算法
孤独指数的加权计算逻辑：
int _calculateWeightedScore(Map<String, int> scores) {
int totalWeight = 0;
int weightedSum = 0;
for (var factor in _factors) {
final score = scores[factor.id] ?? factor.score;
weightedSum += score * factor.weight;
totalWeight += factor.weight;
}
return (weightedSum / totalWeight).round().clamp(0, 100);
}
int get _currentScore {
return _calculateWeightedScore(
{for (var f in _factors) f.id: f.score}
);
}
4.4 仪表盘绘制
仪表盘的核心绘制逻辑：
class GaugePainter extends CustomPainter {
final int score;
final LonelinessLevel level;
final double animation;
void paint(Canvas canvas, Size size) {
final center = Offset(size.width / 2, size.height);
final radius = size.width / 2 - 10;
// 绘制背景弧
final bgPaint = Paint()
..color = Colors.grey[200]!
..style = PaintingStyle.stroke
..strokeWidth = 20
..strokeCap = StrokeCap.round;
canvas.drawArc(
Rect.fromCircle(center: center, radius: radius),
pi, pi, false, bgPaint,
);
// 绘制渐变进度弧
final gradient = SweepGradient(
center: Alignment.bottomCenter,
startAngle: pi,
endAngle: 2 * pi,
colors: [
LonelinessLevel.none.color,
LonelinessLevel.mild.color,
LonelinessLevel.moderate.color,
LonelinessLevel.high.color,
LonelinessLevel.severe.color,
],
);
// 绘制指针和数值
final animatedScore = score * animation;
final needleAngle = pi + (animatedScore / 100) * pi;
// ... 绘制指针逻辑
}
}
4.5 趋势图绘制
趋势折线图的绘制逻辑：
class TrendChartPainter extends CustomPainter {
final List<LonelinessRecord> records;
void paint(Canvas canvas, Size size) {
// 绘制网格线
for (int i = 0; i <= 4; i++) {
final y = padding + (chartHeight / 4) * i;
canvas.drawLine(
Offset(padding, y),
Offset(size.width - padding, y),
gridPaint,
);
}
// 绘制折线
final path = Path();
for (int i = 0; i < points.length; i++) {
if (i == 0) {
path.moveTo(points[i].dx, points[i].dy);
} else {
path.lineTo(points[i].dx, points[i].dy);
}
}
canvas.drawPath(path, linePaint);
// 绘制数据点
for (int i = 0; i < points.length; i++) {
final pointPaint = Paint()
..color = LonelinessLevel.fromScore(records[i].score).color
..style = PaintingStyle.fill;
canvas.drawCircle(points[i], 4, pointPaint);
}
}
}
4.6 雷达图绘制
多维度雷达图的绘制逻辑：
class RadarChartPainter extends CustomPainter {
final List<LonelinessFactor> factors;
void paint(Canvas canvas, Size size) {
final center = Offset(size.width / 2, size.height / 2);
final radius = min(size.width, size.height) / 2 - 40;
// 绘制同心多边形网格
for (int level = 1; level <= 5; level++) {
final levelRadius = radius * level / 5;
final path = Path();
for (int i = 0; i < factors.length; i++) {
final angle = (2 * pi * i / factors.length) - pi / 2;
final x = center.dx + levelRadius * cos(angle);
final y = center.dy + levelRadius * sin(angle);
if (i == 0) path.moveTo(x, y);
else path.lineTo(x, y);
}
path.close();
canvas.drawPath(path, gridPaint);
}
// 绘制数据区域
final dataPath = Path();
for (int i = 0; i < factors.length; i++) {
final angle = (2 * pi * i / factors.length) - pi / 2;
final value = factors[i].score / 100;
final x = center.dx + radius * value * cos(angle);
final y = center.dy + radius * value * sin(angle);
if (i == 0) dataPath.moveTo(x, y);
else dataPath.lineTo(x, y);
}
dataPath.close();
canvas.drawPath(dataPath, dataPaint);
}
}
五、UI设计规范
5.1 配色方案
应用采用蓝紫色为主色调：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #5C6BC0 | 导航、按钮、强调 |
| 辅助色 | #7986CB | 渐变、次要元素 |
| 无孤独 | #4CAF50 | 一级孤独标识 |
| 轻微孤独 | #8BC34A | 二级孤独标识 |
| 中度孤独 | #FFEB3B | 三级孤独标识 |
| 高度孤独 | #FF9800 | 四级孤独标识 |
| 严重孤独 | #F44336 | 五级孤独标识 |
5.2 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 20px | Bold | #000000 |
| 指数数值 | 36px | Bold | 等级颜色 |
| 等级标签 | 18px | Bold | 等级颜色 |
| 因素名称 | 14px | Medium | #000000 |
| 因素描述 | 12px | Regular | #666666 |
5.3 组件规范
5.3.1 仪表盘
100
╱╲
╱ ╲
╱ ╲
╱ 指针 ╲
╱ ● ╲
╱ 65 ╲
╱ ╲
╱______________╲
0 100
高度孤独
孤独指数：65
5.3.2 因素调节卡片
┌─────────────────────────────────────────┐
│ 👥 社交频率 40 │
│ 与他人互动的频率 │
│ ├─────────●──────────┤ │
│ │
│ 👤 独处时长 60 │
│ 每天独处的时间比例 │
│ ├───────────────●────┤ │
└─────────────────────────────────────────┘
5.3.3 趋势图
┌─────────────────────────────────────────┐
│ 100 ───────────────────────────────── │
│ 75 ────────●───────────●─────────── │
│ 50 ───●───────────●─────────────── │
│ 25 ─────────────────────────────●── │
│ 0 ──────────────────────────────── │
│ 1日 7日 14日 21日 30日 │
└─────────────────────────────────────────┘
六、交互设计
6.1 指数页面交互
6.2 因素调节流程
6.3 页面切换状态
七、数据分析
7.1 统计指标
| 统计项 | 计算方式 | 说明 |
|---|---|---|
| 当前指数 | 加权平均分 | 实时孤独程度 |
| 平均指数 | 历史记录平均值 | 整体孤独水平 |
| 等级分布 | 各等级记录占比 | 孤独程度分布 |
| 周度趋势 | 按周统计平均值 | 周期性变化 |
7.2 趋势分析
List<String> _generateInsights() {
final insights = <String>[];
if (_records.length >= 7) {
final recentWeek = _records.sublist(_records.length - 7);
final previousWeek = _records.length >= 14
? _records.sublist(_records.length - 14, _records.length - 7)
: _records.sublist(0, _records.length - 7);
final recentAvg = recentWeek.map((r) => r.score).reduce((a, b) => a + b) / 7;
final previousAvg = previousWeek.map((r) => r.score).reduce((a, b) => a + b) /
previousWeek.length;
if (recentAvg > previousAvg + 5) {
insights.add('近一周孤独指数上升了${(recentAvg - previousAvg).toStringAsFixed(1)}点');
}
}
return insights;
}
7.3 建议生成
| 孤独等级 | 建议类型 | 具体建议 |
|---|---|---|
| 无孤独 | 维持建议 | 继续保持、帮助他人 |
| 轻微孤独 | 自我关怀 | 享受独处、培养兴趣 |
| 中度孤独 | 适度改善 | 规律社交、志愿者活动 |
| 高度孤独 | 积极行动 | 主动联系、培养爱好 |
| 严重孤独 | 专业帮助 | 心理咨询、社区支持 |
7.4 时间分布分析
| 时间段 | 分析维度 | 应用价值 |
|---|---|---|
| 按日 | 日指数变化 | 了解日常波动 |
| 按周 | 周度趋势 | 发现周期规律 |
| 按月 | 月度变化 | 追踪长期趋势 |
| 按年 | 年度总结 | 整体健康评估 |
八、扩展功能规划
8.1 后续版本规划
8.2 功能扩展建议
8.2.1 数据导出
支持数据导出功能：
- 导出为CSV格式
- 生成PDF报告
- 分享给心理咨询师
- 数据备份恢复
8.2.2 提醒功能
定期评估提醒：
- 每日评估提醒
- 每周趋势报告
- 异常波动预警
- 改善建议推送
8.2.3 社区支持
社区互助功能：
- 匿名分享感受
- 互助小组
- 专业资源推荐
- 心理健康知识
九、注意事项
9.1 开发注意事项
-
动画控制：AnimationController需要在dispose时释放
-
状态管理：使用setState管理本地状态，注意刷新时机
-
性能优化：CustomPaint绘制时避免重复创建对象
-
用户体验：指数变化要有过渡动画，避免突变
9.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 仪表盘不显示 | 动画未启动 | 检查forward调用 |
| 指数计算错误 | 权重配置问题 | 检查weight总和 |
| 趋势图为空 | 记录为空 | 检查_records |
| 颜色不正确 | 等级映射错误 | 检查fromScore |
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_loneliness_index.dart --web-port 8130
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_loneliness_index.dart
# 运行到Windows
flutter run -d windows -t lib/main_loneliness_index.dart
# 代码分析
flutter analyze lib/main_loneliness_index.dart
十一、总结
孤独指数是一款独特的心理健康评估应用，通过多维度因素分析来量化用户的孤独程度。应用以蓝紫色为主色调，采用仪表盘风格，将抽象的孤独感受转化为直观的数值指标。
从技术实现来看，应用使用CustomPaint绘制仪表盘、趋势图和雷达图，通过加权算法计算综合指数，使用AnimationController实现流畅的动画效果。六个核心维度（社交频率、独处时长、情感状态、连接质量、归属感、自我价值）全面评估孤独程度。
从用户体验来看，应用提供直观的仪表盘展示，让用户能够实时了解自己的孤独状态。通过滑块调节各因素评分，操作简单直观。趋势分析功能让用户追踪长期变化，深度分析功能提供多维度洞察。个性化的改善建议帮助用户采取积极行动。
应用不仅是一个评估工具，更是一个自我认知的平台。它提醒我们：孤独是一种正常的情感体验；定期评估有助于了解自己的状态；指数仅供参考，如有需要请寻求专业帮助；独处不等于孤独，享受独处时光。在快节奏的现代生活中，孤独指数为我们提供了一种关注内心状态的方式。
量化孤独，理解自我
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
11
0- 0
已为社区贡献42条内容
所有评论(0)