Flutter 框架跨平台鸿蒙开发 - 眼保健操提醒应用开发文档
本文介绍了一款基于Flutter框架开发的眼保健操提醒应用，采用Material Design 3设计规范，支持鸿蒙OS平台。该应用主要功能包括： 定时提醒功能：可自定义设置护眼提醒间隔时间 标准眼保健操指导：提供6节眼保健操的详细动作说明和穴位图示 计时训练：实时显示做操进度和剩余时间 记录统计：保存完成情况，计算连续打卡天数 护眼知识：包含科学用眼建议 技术实现上使用Dart语言开发，采用Ti
·
眼保健操提醒应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
眼保健操提醒是一款专注于视力保护的健康管理应用，旨在帮助长期使用电子设备的用户养成良好的护眼习惯。应用采用清新的青色主题设计，象征健康与活力。无论是定时提醒、动作指导，还是完成记录，用户都能在简洁直观的界面中轻松完成。
从经典的六节眼保健操到科学的用眼建议，本应用全方位呵护用户的视力健康。特别值得一提的是智能提醒功能，用户可根据自身情况设置提醒间隔，应用会在适当时候弹出温馨提醒，引导用户进行眼保健操。配合详细的动作指导和动画演示，让每一次眼保健操都标准到位。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 定时提醒 | 可设置提醒间隔 | Timer定时器 |
| 动作指导 | 六节眼保健操详解 | ExpansionTile展开 |
| 计时做操 | 实时显示进度 | AnimationController |
| 历史记录 | 完成情况统计 | 日期分组列表 |
| 连续天数 | 打卡连续统计 | 日期差值计算 |
| 护眼贴士 | 科学用眼建议 | 设置页展示 |
1.3 眼保健操步骤概览
| 节次 | 名称 | 穴位位置 | 功效 |
|---|---|---|---|
| 第一节 | 按揉攒竹穴 | 眉头内侧凹陷处 | 缓解眼疲劳 |
| 第二节 | 按压睛明穴 | 内眼角上方凹陷 | 明目醒脑 |
| 第三节 | 按揉四白穴 | 鼻翼两侧一横指 | 改善视力 |
| 第四节 | 按揉太阳穴刮上眼眶 | 太阳穴及眉骨 | 放松眼肌 |
| 第五节 | 按揉风池穴 | 后脑勺下方凹陷 | 缓解头痛 |
| 第六节 | 揉捏耳垂脚趾抓地 | 耳垂 | 全身调节 |
1.4 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState + Timer | - |
| 目标平台 | 鸿蒙OS | API 21+ |
1.5 项目结构
lib/
└── main_eye_exercise.dart
├── EyeExerciseApp # 应用入口
├── ExerciseStep # 眼保健操步骤枚举
├── ExerciseAction # 动作详情模型
├── ExerciseRecord # 完成记录模型
├── HomePage # 主页面
│ ├── _buildHomePage() # 首页
│ ├── _buildExercisePage() # 做操页
│ ├── _buildRecordsPage() # 记录页
│ └── _buildSettingsPage() # 设置页
└── 动画控制器 # 脉冲动画效果
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 数据流程图
2.4 做操流程
三、核心模块设计
3.1 数据模型设计
3.1.1 动作详情模型 (ExerciseAction)
class ExerciseAction {
final String name; // 动作名称
final String description; // 动作描述
final String instruction; // 操作说明
final int duration; // 持续时间（秒）
final IconData icon; // 图标
final List<String> steps; // 步骤列表
}
3.1.2 完成记录模型 (ExerciseRecord)
class ExerciseRecord {
final String id; // 唯一标识
final DateTime date; // 完成日期
final int duration; // 总时长
final int stepsCompleted; // 完成节数
}
3.1.3 眼保健操步骤枚举 (ExerciseStep)
3.2 眼保健操详解
3.2.1 按揉攒竹穴
穴位位置：眉头内侧凹陷处，眶上切迹处。
动作要领：
- 双手大拇指螺纹面分别按在两侧穴位上
- 其余手指自然放松，指尖抵在前额上
- 随音乐口令有节奏地按揉穴位
- 每拍一圈，做四个八拍
功效：缓解眼疲劳，改善眼睑下垂。
3.2.2 按压睛明穴
穴位位置：内眼角上方，眶内侧壁凹陷处。
动作要领：
- 双手食指螺纹面分别按在两侧穴位上
- 其余手指自然握拳
- 上下方向按压穴位
- 每拍一次，做四个八拍
功效：明目醒脑，改善视力模糊。
3.2.3 按揉四白穴
穴位位置：面部，眶下孔处。
动作要领：
- 双手食指螺纹面分别按在两侧穴位上
- 画圈按揉穴位
- 动作轻柔，节奏均匀
- 每拍一圈，做四个八拍
功效：改善视力，缓解眼干涩。
3.3 页面结构设计
3.3.1 首页模块
3.3.2 做操页面
3.4 状态管理
3.4.1 核心状态变量
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
int _currentIndex = 0; // 当前页面索引
final List<ExerciseRecord> _records = []; // 完成记录
int _reminderInterval = 45; // 提醒间隔（分钟）
bool _reminderEnabled = true; // 是否启用提醒
Timer? _reminderTimer; // 提醒定时器
Timer? _exerciseTimer; // 做操计时器
bool _isExercising = false; // 是否正在做操
int _currentStepIndex = 0; // 当前步骤索引
int _currentBeat = 0; // 当前节拍
int _totalSeconds = 0; // 总秒数
late AnimationController _pulseController; // 脉冲动画控制器
}
3.4.2 计时器实现
void _startExerciseTimer() {
_exerciseTimer?.cancel();
_exerciseTimer = Timer.periodic(const Duration(seconds: 1), (timer) {
setState(() {
_totalSeconds++;
final steps = ExerciseStep.values;
final currentStep = steps[_currentStepIndex];
final action = exerciseActions[currentStep]!;
_currentBeat = _totalSeconds % action.duration;
if (_currentBeat == 0 && _totalSeconds > 0) {
if (_currentStepIndex < steps.length - 1) {
_currentStepIndex++;
} else {
_completeExercise();
}
}
});
});
}
四、UI设计规范
4.1 配色方案
应用采用清新的青色主题，象征健康与活力：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | Teal (Material) | AppBar、按钮、强调元素 |
| 背景色 | #F0F4F8 | 页面背景 |
| 卡片背景 | #FFFFFF | 卡片、弹窗 |
| 渐变起始 | Teal.shade400 | 做操页渐变 |
| 渐变结束 | Teal.shade800 | 做操页渐变 |
4.2 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 动作名称 | 28px | Bold | #FFFFFF |
| 节次标题 | 16px | Bold | #000000 |
| 动作描述 | 14px | Regular | #FFFFFF(0.9) |
| 时间显示 | 16px | Regular | #FFFFFF |
| 步骤编号 | 14px | Bold | #FFFFFF |
4.3 组件规范
4.3.1 头部卡片
┌─────────────────────────────────────────────────┐
│ 保护视力 👁️ │
│ 从眼保健操开始 │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ ⏰ 每隔 45 分钟提醒一次 │ │
│ └─────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘
4.3.2 做操界面
┌─────────────────────────────────────────────────┐
│ ✕ 第 1/6 节 0:32 │
│ │
│ │
│ ┌───────┐ │
│ │ 👁️ │ (脉冲动画) │
│ └───────┘ │
│ │
│ 按揉攒竹穴 │
│ │
│ 用双手大拇指螺纹面分别按在两侧穴位上... │
│ │
│ ████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│ 15 / 32 秒 │
│ │
│ ⏸ 暂停 ⏹ 结束 │
└─────────────────────────────────────────────────┘
4.3.3 步骤卡片
┌─────────────────────────────────────────────────┐
│ ① 按揉攒竹穴 8拍 │
│ 👁️ 用双手大拇指螺纹面分别按在... │
└─────────────────────────────────────────────────┘
4.4 动画效果
4.4.1 脉冲动画
_pulseController = AnimationController(
duration: const Duration(milliseconds: 1000),
vsync: this,
)..repeat(reverse: true);
_pulseAnimation = Tween<double>(begin: 0.95, end: 1.05).animate(
CurvedAnimation(parent: _pulseController, curve: Curves.easeInOut),
);
4.4.2 动画时序图
五、核心功能实现
5.1 定时提醒功能
void _startReminderTimer() {
_reminderTimer?.cancel();
if (_reminderEnabled) {
_reminderTimer = Timer.periodic(
Duration(minutes: _reminderInterval),
(timer) {
_showReminderNotification();
},
);
}
}
void _showReminderNotification() {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Row(
children: [
Icon(Icons.remove_red_eye, color: Colors.teal.shade700),
const SizedBox(width: 8),
const Text('护眼提醒'),
],
),
content: const Text('您已经连续用眼较长时间了，建议休息一下，做一套眼保健操'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('稍后再说'),
),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
_startExercise();
},
child: const Text('开始做操'),
),
],
),
);
}
5.2 做操计时功能
void _startExercise() {
setState(() {
_isExercising = true;
_currentStepIndex = 0;
_currentBeat = 0;
_totalSeconds = 0;
});
_startExerciseTimer();
}
void _completeExercise() {
_exerciseTimer?.cancel();
final record = ExerciseRecord(
id: DateTime.now().millisecondsSinceEpoch.toString(),
date: DateTime.now(),
duration: _totalSeconds,
stepsCompleted: _currentStepIndex + 1,
);
setState(() {
_records.insert(0, record);
_isExercising = false;
});
_showCompletionDialog();
}
5.3 连续天数计算
int _calculateStreak() {
if (_records.isEmpty) return 0;
int streak = 0;
DateTime? lastDate;
for (var record in _records) {
final recordDate = DateTime(
record.date.year,
record.date.month,
record.date.day
);
if (lastDate == null) {
streak = 1;
} else {
final diff = lastDate.difference(recordDate).inDays;
if (diff == 1) {
streak++;
} else if (diff > 1) {
break;
}
}
lastDate = recordDate;
}
return streak;
}
5.4 日期分组显示
Map<DateTime, List<ExerciseRecord>> _groupRecordsByDate() {
final map = <DateTime, List<ExerciseRecord>>{};
for (var record in _records) {
final date = DateTime(
record.date.year,
record.date.month,
record.date.day
);
map[date] = (map[date] ?? [])..add(record);
}
return map;
}
六、护眼知识拓展
6.1 眼保健操科学原理
6.1.1 穴位按摩原理
眼保健操通过按摩眼周穴位，达到疏通经络、调和气血的目的。
经络理论：
6.1.2 中医理论
| 穴位 | 所属经络 | 主治功效 |
|---|---|---|
| 攒竹穴 | 足太阳膀胱经 | 头痛、目视不明 |
| 睛明穴 | 足太阳膀胱经 | 目赤肿痛、近视 |
| 四白穴 | 足阳明胃经 | 目翳、眼睑痉挛 |
| 太阳穴 | 经外奇穴 | 头痛、目疾 |
| 风池穴 | 足少阳胆经 | 头痛、眩晕 |
6.2 科学用眼建议
6.2.1 20-20-20法则
6.2.2 用眼环境建议
| 因素 | 建议标准 | 说明 |
|---|---|---|
| 屏幕距离 | 50-70厘米 | 约一臂距离 |
| 屏幕位置 | 略低于视线 | 减少眼球暴露 |
| 环境光线 | 柔和均匀 | 避免强光直射 |
| 屏幕亮度 | 与环境相当 | 避免过亮过暗 |
6.3 护眼营养素
6.3.1 维生素A
功效：维持正常视觉功能，预防夜盲症。
食物来源：
- 动物肝脏
- 胡萝卜
- 菠菜
- 南瓜
6.3.2 叶黄素
功效：过滤蓝光，保护视网膜。
食物来源：
- 玉米
- 蛋黄
- 猕猴桃
- 西兰花
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 语音指导
为每个动作添加语音讲解：
- 动作要领说明
- 节拍口令提示
- 完成鼓励语音
7.2.2 视频演示
class ExerciseVideo {
final String url; // 视频地址
final String thumbnail; // 缩略图
final int duration; // 时长
final ExerciseStep step; // 对应步骤
}
7.2.3 社区功能
| 功能 | 说明 |
|---|---|
| 打卡分享 | 每日完成打卡 |
| 排行榜 | 连续天数排名 |
| 成就系统 | 完成里程碑奖励 |
八、注意事项
8.1 开发注意事项
-
计时精度：使用Timer.periodic实现计时，注意精度问题
-
生命周期：页面切换时正确处理Timer，避免内存泄漏
-
后台运行：应用进入后台时暂停计时器
-
用户体验：提供清晰的进度反馈和操作引导
8.2 健康提示
👁️ 护眼小贴士 👁️
- 眼保健操前请洗净双手
- 按摩力度适中，以有酸胀感为宜
- 保持正确坐姿，头部正直不动
- 如有眼部疾病，请遵医嘱进行
8.3 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 提醒不生效 | Timer未启动 | 检查_reminderEnabled状态 |
| 计时不准确 | Timer精度问题 | 使用Stopwatch校准 |
| 动画卡顿 | 帧率过低 | 优化动画复杂度 |
| 记录丢失 | 数据未持久化 | 添加本地存储 |
九、运行说明
9.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 鸿蒙OS | API 21+ |
9.2 运行命令
# 查看可用设备
flutter devices
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_eye_exercise.dart
# 运行到Windows
flutter run -d windows -t lib/main_eye_exercise.dart
# 代码分析
flutter analyze lib/main_eye_exercise.dart
十、总结
眼保健操提醒应用通过科学的穴位按摩指导和智能的定时提醒功能，帮助用户养成良好的护眼习惯。应用采用清新的青色主题，象征健康与活力；代码结构清晰，遵循Flutter最佳实践；数据模型设计合理，便于后续扩展更多功能。
核心功能涵盖定时提醒、动作指导、计时做操、历史记录和连续天数统计，全方位满足用户的护眼需求。特别值得一提的是智能提醒功能，用户可根据自身情况设置提醒间隔，应用会在适当时候弹出温馨提醒，引导用户进行眼保健操。
六节眼保健操涵盖攒竹穴、睛明穴、四白穴、太阳穴、风池穴和耳垂六大穴位，每个动作都配有详细的步骤说明和计时进度，确保用户能够标准到位地完成每一节。通过本应用，希望能够帮助更多长期使用电子设备的用户保护视力健康，让眼睛得到应有的休息和呵护。
**保护视力，从眼保健操开始**
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
23
0- 0
已为社区贡献8条内容
所有评论(0)