宠物远程互动应用

---

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

一、项目概述

运行效果图

1.1 应用简介

宠物远程互动是一款智能家居类应用，为宠物主人提供远程关爱毛孩子的贴心服务。应用以温暖的橙色为主色调，象征对宠物的爱与关怀。界面设计采用卡片式布局，让用户能够轻松掌握宠物的在家状态。

应用通过模拟摄像头监控、远程喂食器控制、激光逗宠等功能，让用户即使不在家也能陪伴宠物。无论是出差旅行还是日常上班，都能随时查看宠物动态、投喂食物、互动玩耍。不在家也能陪毛孩子，让爱不再有距离。

1.2 核心功能

功能模块	功能描述	实现方式
摄像监控	模拟实时摄像头画面	CustomPaint绘制
远程喂食	控制喂食器投喂	状态管理+定时
激光逗宠	控制激光点移动	GestureDetector+Timer
语音呼唤	发送语音互动	模拟语音功能
零食奖励	远程投喂零食	互动记录
设备管理	管理智能设备	设备状态监控

1.3 宠物类型体系

应用支持5种常见宠物类型：

宠物类型	图标	颜色	昵称	特点
猫咪	pets	#FF9800	喵星人	高冷可爱
狗狗	cruelty_free	#4CAF50	汪星人	忠诚活泼
小鸟	flutter_dash	#2196F3	羽星人	灵动歌唱
鱼儿	pool	#00BCD4	水星人	悠游自在
仓鼠	circle	#FFC107	萌星人	小巧可爱

1.4 互动类型体系

互动类型	图标	颜色	描述
喂食	restaurant	#FF9800	投喂美食
激光	flash_on	#FF5722	激光逗宠
语音	mic	#2196F3	语音呼唤
零食	cookie	#9C27B0	奖励零食
喂水	water_drop	#00BCD4	补充水分

1.5 喂食器状态体系

状态	名称	颜色	食物余量
Full	满仓	#4CAF50	80-100%
Normal	正常	#8BC34A	40-79%
Low	低量	#FFC107	10-39%
Empty	空仓	#F44336	0-9%

1.6 摄像头角度体系

角度	名称	图标	视角描述
Front	正面	front_hand	正面视角
Left	左侧	rotate_90_degrees_ccw	左侧视角
Right	右侧	rotate_90_degrees_cw	右侧视角
Top	俯视	vertical_align_top	俯视视角

1.7 技术栈

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

1.8 项目结构

lib/
└── main_pet_interaction.dart
    ├── PetRemoteInteractionApp     # 应用入口
    ├── PetType                     # 宠物类型枚举
    ├── FeederStatus                # 喂食器状态枚举
    ├── InteractionType             # 互动类型枚举
    ├── CameraAngle                 # 摄像头角度枚举
    ├── Pet                         # 宠物模型
    ├── FeederDevice                # 喂食器设备模型
    ├── InteractionRecord           # 互动记录模型
    ├── LaserPosition               # 激光位置模型
    ├── PetRemoteInteractionHomePage # 主页面（底部导航）
    ├── _buildMonitorPage           # 监控页面
    ├── _buildInteractionPage       # 互动页面
    ├── _buildDevicesPage           # 设备页面
    ├── _buildRecordsPage           # 记录页面
    ├── CameraViewPainter           # 摄像头画面绘制器
    └── RoomPainter                 # 房间绘制器

---

二、设计理念

2.1 远程互动可视化

2.2 互动流程模型

2.3 色彩体系

应用采用橙色为主色调：

颜色类型	色值	RGB	用途
主色	#FF7043	255,112,67	导航、按钮、强调
辅助色	#FFAB91	255,171,145	渐变、背景
猫咪色	#FF9800	255,152,0	猫咪标识
狗狗色	#4CAF50	76,175,80	狗狗标识
激光色	#FF5722	255,87,34	激光点颜色

2.4 远程互动流程

---

三、系统架构

3.1 整体架构图

3.2 类图设计

3.3 激光控制流程

---

四、核心功能实现

4.1 宠物类型枚举

定义5种宠物类型：

enum PetType {
  cat('猫咪', Icons.pets, Color(0xFFFF9800), '喵星人'),
  dog('狗狗', Icons.cruelty_free, Color(0xFF4CAF50), '汪星人'),
  bird('小鸟', Icons.flutter_dash, Color(0xFF2196F3), '羽星人'),
  fish('鱼儿', Icons.pool, Color(0xFF00BCD4), '水星人'),
  hamster('仓鼠', Icons.circle, Color(0xFFFFC107), '萌星人');

  final String label;
  final IconData icon;
  final Color color;
  final String nickname;

  const PetType(this.label, this.icon, this.color, this.nickname);
}

4.2 互动类型枚举

定义5种互动类型：

enum InteractionType {
  feeding('喂食', Icons.restaurant, Color(0xFFFF9800), '投喂美食'),
  laser('激光', Icons.flash_on, Color(0xFFFF5722), '激光逗宠'),
  voice('语音', Icons.mic, Color(0xFF2196F3), '语音呼唤'),
  treat('零食', Icons.cookie, Color(0xFF9C27B0), '奖励零食'),
  water('喂水', Icons.water_drop, Color(0xFF00BCD4), '补充水分');

  final String label;
  final IconData icon;
  final Color color;
  final String description;

  const InteractionType(this.label, this.icon, this.color, this.description);
}

4.3 远程喂食功能

实现远程喂食逻辑：

void _feedPet() {
  if (_selectedFeeder == null || _selectedPet == null) return;

  setState(() {
    _records.insert(
      0,
      InteractionRecord(
        id: 'r${DateTime.now().millisecondsSinceEpoch}',
        type: InteractionType.feeding,
        time: DateTime.now(),
        petName: _selectedPet!.name,
        success: true,
      ),
    );

    final index = _feeders.indexOf(_selectedFeeder!);
    if (index != -1) {
      final newLevel = (_feeders[index].foodLevel - 10).clamp(0, 100);
      _feeders[index] = FeederDevice(
        id: _feeders[index].id,
        name: _feeders[index].name,
        status: _getFeederStatus(newLevel),
        foodLevel: newLevel,
        isConnected: _feeders[index].isConnected,
        lastFeeding: DateTime.now(),
      );
      _selectedFeeder = _feeders[index];
    }
  });

  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text('已为${_selectedPet!.name}投喂食物'),
      backgroundColor: InteractionType.feeding.color,
    ),
  );
}

4.4 激光逗宠功能

实现激光控制逻辑：

void _toggleLaser() {
  setState(() {
    _isLaserActive = !_isLaserActive;
  });

  if (_isLaserActive) {
    _startLaserMovement();
  } else {
    _laserTimer?.cancel();
  }
}

void _startLaserMovement() {
  _laserTimer = Timer.periodic(const Duration(milliseconds: 50), (timer) {
    if (!_isLaserActive) {
      timer.cancel();
      return;
    }
    setState(() {
      _laserPosition.x += (Random().nextDouble() - 0.5) * 0.1;
      _laserPosition.y += (Random().nextDouble() - 0.5) * 0.1;
      _laserPosition.x = _laserPosition.x.clamp(0.1, 0.9);
      _laserPosition.y = _laserPosition.y.clamp(0.1, 0.9);
    });
  });
}

void _onLaserPanUpdate(DragUpdateDetails details) {
  if (!_isLaserActive) return;
  final RenderBox box = context.findRenderObject() as RenderBox;
  final size = box.size;
  setState(() {
    _laserPosition.x = (details.localPosition.dx / size.width).clamp(0.1, 0.9);
    _laserPosition.y = (details.localPosition.dy / size.height).clamp(0.1, 0.9);
  });
}

4.5 摄像头画面绘制

使用CustomPaint绘制模拟摄像头画面：

class CameraViewPainter extends CustomPainter {
  final int angle;
  final Pet? pet;

  @override
  void paint(Canvas canvas, Size size) {
    final random = Random(42);

    for (int i = 0; i < 50; i++) {
      final x = random.nextDouble() * size.width;
      final y = random.nextDouble() * size.height;
      final radius = 1.0 + random.nextDouble() * 2;
      final paint = Paint()
        ..color = Colors.white.withOpacity(0.1 + random.nextDouble() * 0.1);
      canvas.drawCircle(Offset(x, y), radius, paint);
    }

    final floorPaint = Paint()
      ..color = const Color(0xFF5D4037).withOpacity(0.3)
      ..style = PaintingStyle.fill;
    canvas.drawRect(
      Rect.fromLTWH(0, size.height * 0.7, size.width, size.height * 0.3),
      floorPaint,
    );

    if (pet != null) {
      final petX = size.width * 0.5 + sin(angle * pi / 180) * 30;
      final petY = size.height * 0.65;

      final bodyPaint = Paint()
        ..color = pet!.type.color.withOpacity(0.8)
        ..style = PaintingStyle.fill;
      canvas.drawOval(
        Rect.fromCenter(center: Offset(petX, petY), width: 40, height: 30),
        bodyPaint,
      );
    }
  }
}

4.6 设备状态计算

根据食物余量计算设备状态：

FeederStatus _getFeederStatus(int level) {
  if (level >= 80) return FeederStatus.full;
  if (level >= 40) return FeederStatus.normal;
  if (level >= 10) return FeederStatus.low;
  return FeederStatus.empty;
}

---

五、UI设计规范

5.1 配色方案

应用采用橙色为主色调：

颜色类型	色值	用途
主色	#FF7043	导航、按钮、强调
辅助色	#FFAB91	渐变、背景
猫咪色	#FF9800	猫咪标识
狗狗色	#4CAF50	狗狗标识
激光色	#FF5722	激光点颜色

5.2 字体规范

元素	字号	字重	颜色
页面标题	20px	Bold	#000000
宠物名称	15px	SemiBold	#000000
设备名称	15px	SemiBold	#000000
状态标签	12px	Regular	#757575
互动类型	14px	SemiBold	类型颜色

5.3 组件规范

5.3.1 摄像头监控界面

┌─────────────────────────────────────────┐
│ [REC 实时]                    [正面]    │
├─────────────────────────────────────────┤
│                                         │
│              🐱                         │
│            ╭───╮                        │
│           │小橘│                        │
│            ╰─┬─╯                        │
│         ┌────┴────┐                     │
│         │  沙发   │                     │
│         └─────────┘                     │
│                                         │
│    [🖐️] [↺] [↻] [↑]                    │
└─────────────────────────────────────────┘

5.3.2 激光控制区域

┌─────────────────────────────────────────┐
│ 激光逗宠                          [开关] │
├─────────────────────────────────────────┤
│ ┌───┬───┬───┬───┬───┬───┬───┬───┬───┐ │
│ │   │   │   │   │   │   │   │   │   │ │
│ ├───┼───┼───┼───┼───┼───┼───┼───┼───┤ │
│ │   │   │   │   │ 🔴│   │   │   │   │ │
│ ├───┼───┼───┼───┼───┼───┼───┼───┼───┤ │
│ │   │   │ ┌─────┐ │   │   │   │   │   │ │
│ │   │   │ │地毯 │ │   │   │   │   │   │ │
│ │   │   │ └─────┘ │   │   │   │   │   │ │
│ └───┴───┴───┴───┴───┴───┴───┴───┴───┘ │
│          拖动控制激光位置                │
└─────────────────────────────────────────┘

5.3.3 设备状态卡片

┌─────────────────────────────────────────┐
│ [🍽️] 客厅喂食器              [在线] 正常 │
│                                         │
│ 上次喂食: 3小时前                        │
│                                         │
│ ████████████░░░░░░░░  65%               │
└─────────────────────────────────────────┘

---

六、交互设计

6.1 监控页面交互

6.2 激光逗宠流程

6.3 页面切换状态

---

七、数据分析

7.1 统计指标

统计项	计算方式	说明
今日互动	按日期筛选记录数	今日互动总次数
喂食次数	喂食类型记录数	今日喂食次数
逗宠次数	激光类型记录数	今日逗宠次数
设备在线	isConnected为true	在线设备数量

7.2 互动记录分析

bool _isToday(DateTime time) {
  final now = DateTime.now();
  return time.year == now.year && time.month == now.month && time.day == now.day;
}

int getTodayInteractionCount() {
  return _records.where((r) => _isToday(r.time)).length;
}

int getFeedingCount() {
  return _records.where((r) => r.type == InteractionType.feeding && _isToday(r.time)).length;
}

7.3 设备状态分析

状态	设备数量	处理建议
满仓	-	正常使用
正常	-	正常使用
低量	-	及时补充
空仓	-	立即补充

---

八、扩展功能规划

8.1 后续版本规划

8.2 功能扩展建议

8.2.1 真实摄像头接入

接入真实摄像头设备：

• RTSP视频流接入
• WebRTC实时通信
• 云端存储回放
• 多摄像头切换

8.2.2 AI行为分析

基于AI的宠物行为分析：

• 活动量统计
• 异常行为预警
• 健康状况评估
• 个性化建议

8.2.3 社区分享

建立宠物主人社区：

• 宠物动态分享
• 养宠经验交流
• 宠物相册功能
• 互动排行榜

---

九、注意事项

9.1 开发注意事项

1. 定时器管理：激光移动的Timer需要在关闭时取消，避免内存泄漏

2. 状态同步：喂食后需要同步更新设备状态和互动记录

3. 动画控制：AnimationController需要正确初始化和释放

4. 权限处理：真实摄像头需要申请相机权限

9.2 常见问题

问题	原因	解决方案
激光不移动	Timer未启动	检查_toggleLaser
喂食无响应	设备未选择	选择宠物和喂食器
画面不刷新	CustomPaint未更新	检查shouldRepaint
设备离线	连接状态错误	检查isConnected

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_pet_interaction.dart --web-port 8138

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

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

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

---

十一、总结

宠物远程互动是一款智能家居类应用，为宠物主人提供远程关爱毛孩子的贴心服务。应用以温暖的橙色为主色调，采用卡片式布局，让用户能够轻松掌握宠物的在家状态。

从技术实现来看，应用使用枚举类型定义5种宠物类型、5种互动类型、4种喂食器状态和4种摄像头角度，通过CustomPaint绘制模拟摄像头画面，使用Timer实现激光点的随机移动，通过GestureDetector实现激光位置的手动控制。

从用户体验来看，应用提供直观的摄像头监控界面，让用户能够实时查看宠物状态。远程喂食功能支持快捷操作和设备管理，激光逗宠功能让用户能够远程与宠物互动，互动记录功能帮助用户追踪互动历史。

应用不仅是一个宠物监控工具，更是一个远程陪伴平台。它提醒我们：选择正确的宠物，确保互动对象正确；定期检查喂食器食物余量，及时补充；激光逗宠时间不宜过长，注意宠物休息；查看互动记录，了解宠物日常状态。在关爱宠物的道路上，宠物远程互动为宠物主人提供了全方位的辅助工具。

不在家也能陪毛孩子

---