Flutter 框架跨平台鸿蒙开发 - 宠物远程互动

宠物远程互动应用

---

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

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 远程互动流程

激光器 喂食器 摄像头 APP 用户 激光器 喂食器 摄像头 APP 用户 打开监控页面 请求实时画面 返回视频流 显示宠物状态 点击喂食按钮 发送喂食指令 投放食物 返回执行结果 显示喂食成功 开启激光逗宠 启动激光 拖动控制位置 移动激光点 返回位置确认

---

三、系统架构

3.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

PetRemoteInteractionHomePage
监控页
互动页
设备页
记录页
宠物选择器
摄像头画面
快捷操作
激光控制区
互动按钮组
设备状态卡片
喂食器列表
统计卡片
记录列表
喂食控制器

投喂逻辑
激光控制器

位置移动
互动记录器

历史管理
设备监控器

状态更新
Pet

宠物数据
FeederDevice

设备数据
InteractionRecord

记录数据
LaserPosition

激光位置

3.2 类图设计

manages
manages
manages
controls
uses
uses
uses
uses
has
has
has
PetRemoteInteractionApp
+Widget build()
<<enumeration>>
PetType
+cat 猫咪
+dog 狗狗
+bird 小鸟
+fish 鱼儿
+hamster 仓鼠
+String label
+IconData icon
+Color color
+String nickname
<<enumeration>>
FeederStatus
+full 满仓
+normal 正常
+low 低量
+empty 空仓
+String label
+Color color
+int percentage
<<enumeration>>
InteractionType
+feeding 喂食
+laser 激光
+voice 语音
+treat 零食
+water 喂水
+String label
+IconData icon
+Color color
+String description
<<enumeration>>
CameraAngle
+front 正面
+left 左侧
+right 右侧
+top 俯视
+String label
+IconData icon
+int angle
Pet
+String id
+String name
+PetType type
+String avatar
+int age
+double weight
FeederDevice
+String id
+String name
+FeederStatus status
+int foodLevel
+bool isConnected
+DateTime lastFeeding
InteractionRecord
+String id
+InteractionType type
+DateTime time
+String petName
+String note
+bool success
LaserPosition
+double x
+double y
+bool isActive
PetRemoteInteractionHomePage
-int _currentIndex
-List<Pet> _pets
-List<FeederDevice> _feeders
-List<InteractionRecord> _records
-LaserPosition _laserPosition
-bool _isLaserActive
-CameraAngle _currentAngle
-AnimationController _laserController
-AnimationController _pulseController
+void _feedPet()
+void _toggleLaser()
+void _sendVoice()
+void _giveTreat()
+void _giveWater()

3.3 激光控制流程

界面 激光位置 Timer 开关 用户 界面 激光位置 Timer 开关 用户 loop [每50ms] 开启激光 启动定时器 随机移动位置 更新激光点显示 更新位置 刷新显示 关闭激光 取消定时器 停止激光点

---

四、核心功能实现

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 激光逗宠流程

画面显示 激光位置 定时器 激光开关 用户 画面显示 激光位置 定时器 激光开关 用户 开启激光 启动50ms定时器 随机更新位置 显示红色激光点 拖动控制 更新到指定位置 关闭激光 取消定时器 隐藏激光点

6.3 页面切换状态

点击互动Tab
点击设备Tab
点击记录Tab
点击监控Tab
点击设备Tab
点击记录Tab
点击监控Tab
点击互动Tab
点击记录Tab
点击监控Tab
点击互动Tab
点击设备Tab
监控页
互动页
设备页
记录页

---

七、数据分析

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 后续版本规划

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 摄像监控 远程喂食 激光逗宠 设备管理 真实摄像头 语音通话 定时喂食 AI行为分析 健康监测 社区分享 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 宠物远程互动开发计划

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实现激光位置的手动控制。

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

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

不在家也能陪毛孩子

---