智能窗帘场景化应用

---

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

一、项目概述

运行效果图

1.1 应用简介

智能窗帘场景化是一款智能家居类应用，为用户提供便捷的窗帘控制与场景化管理服务。应用以蓝紫色为主色调，象征科技与舒适的生活方式。界面设计采用卡片式布局，让用户能够轻松掌控家中所有窗帘设备。

应用支持日出日落自动调节、多种场景模式一键切换、定时任务管理等功能，帮助用户营造舒适的居家环境。无论是睡眠休息、观影娱乐还是工作学习，都能找到最适合的光线环境。智能窗帘，让生活更舒适。

1.2 核心功能

功能模块	功能描述	实现方式
窗帘控制	开合度调节与状态显示	Slider+CustomPaint
场景模式	6种预设场景一键切换	枚举类型定义
日出日落	根据时段自动调节	Timer定时检测
定时任务	自定义定时开关	任务调度系统
设备管理	多设备统一管理	设备列表展示
操作记录	历史操作追踪	记录列表展示

1.3 场景模式体系

应用支持6种预设场景模式：

场景模式	图标	颜色	描述	开合度
睡眠模式	bedtime	#3F51B5	遮光助眠，营造安静环境	0%
观影模式	movie	#E91E63	柔和光线，沉浸观影体验	20%
工作模式	work	#4CAF50	明亮环境，提升工作效率	80%
休闲模式	weekend	#FF9800	自然光线，舒适放松	60%
晨起模式	wb_sunny	#FFEB3B	阳光唤醒，美好一天	100%
离家模式	home_outlined	#9E9E9E	关闭窗帘，保护隐私	0%

1.4 窗帘状态体系

状态	名称	图标	颜色	说明
Closed	已关闭	close_fullscreen	#424242	完全关闭
Opening	正在打开	unfold_more	#5C6BC0	动作中
Open	已打开	open_in_full	#8BC34A	完全打开
Closing	正在关闭	unfold_less	#FF9800	动作中
Partial	部分打开	filter_none	#607D8B	中间状态

1.5 日出日落时段体系

时段	名称	图标	颜色	时间范围
Sunrise	日出	wb_twilight	#FF8A65	6:00-7:00
Morning	上午	wb_sunny	#FFD54F	7:00-12:00
Afternoon	下午	wb_sunny_outlined	#FFCC80	12:00-17:00
Sunset	日落	nights_stay	#7E57C2	17:00-19:00
Evening	傍晚	nightlight	#5C6BC0	19:00-21:00
Night	夜间	bedtime	#303F9F	21:00-6:00

1.6 技术栈

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

1.7 项目结构

lib/
└── main_smart_curtain.dart
    ├── SmartCurtainApp              # 应用入口
    ├── CurtainScene                 # 场景模式枚举
    ├── CurtainState                 # 窗帘状态枚举
    ├── SunPhase                     # 日出日落时段枚举
    ├── WeekDay                      # 星期枚举
    ├── CurtainDevice                # 窗帘设备模型
    ├── ScheduleTask                 # 定时任务模型
    ├── OperationRecord              # 操作记录模型
    ├── SmartCurtainHomePage         # 主页面（底部导航）
    ├── _buildControlPage            # 控制页面
    ├── _buildScenePage              # 场景页面
    ├── _buildSchedulePage           # 定时页面
    ├── _buildRecordsPage            # 记录页面
    └── CurtainPainter               # 窗帘绘制器

---

二、设计理念

2.1 智能窗帘可视化

2.2 场景切换流程

2.3 色彩体系

应用采用蓝紫色为主色调：

颜色类型	色值	RGB	用途
主色	#5C6BC0	92,107,192	导航、按钮、强调
辅助色	#7986CB	121,134,203	渐变、背景
睡眠色	#3F51B5	63,81,181	睡眠模式
观影色	#E91E63	233,30,99	观影模式
工作色	#4CAF50	76,175,80	工作模式

2.4 场景切换流程

---

三、系统架构

3.1 整体架构图

3.2 类图设计

3.3 窗帘控制流程

---

四、核心功能实现

4.1 场景模式枚举

定义6种预设场景：

enum CurtainScene {
  sleep('睡眠模式', Icons.bedtime, Color(0xFF3F51B5), '遮光助眠，营造安静环境', 0),
  movie('观影模式', Icons.movie, Color(0xFFE91E63), '柔和光线，沉浸观影体验', 20),
  work('工作模式', Icons.work, Color(0xFF4CAF50), '明亮环境，提升工作效率', 80),
  relax('休闲模式', Icons.weekend, Color(0xFFFF9800), '自然光线，舒适放松', 60),
  morning('晨起模式', Icons.wb_sunny, Color(0xFFFFEB3B), '阳光唤醒，美好一天', 100),
  away('离家模式', Icons.home_outlined, Color(0xFF9E9E9E), '关闭窗帘，保护隐私', 0);

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

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

4.2 日出日落时段枚举

定义6个时段：

enum SunPhase {
  sunrise('日出', Icons.wb_twilight, Color(0xFFFF8A65), 6, 7),
  morning('上午', Icons.wb_sunny, Color(0xFFFFD54F), 7, 12),
  afternoon('下午', Icons.wb_sunny_outlined, Color(0xFFFFCC80), 12, 17),
  sunset('日落', Icons.nights_stay, Color(0xFF7E57C2), 17, 19),
  evening('傍晚', Icons.nightlight, Color(0xFF5C6BC0), 19, 21),
  night('夜间', Icons.bedtime, Color(0xFF303F9F), 21, 6);

  final String label;
  final IconData icon;
  final Color color;
  final int startHour;
  final int endHour;

  const SunPhase(this.label, this.icon, this.color, this.startHour, this.endHour);

  static SunPhase fromHour(int hour) {
    for (var phase in SunPhase.values) {
      if (phase.startHour <= phase.endHour) {
        if (hour >= phase.startHour && hour < phase.endHour) return phase;
      } else {
        if (hour >= phase.startHour || hour < phase.endHour) return phase;
      }
    }
    return SunPhase.night;
  }
}

4.3 窗帘开合度控制

实现窗帘开合度调节：

void _setCurtainPercent(CurtainDevice device, int percent) {
  final index = _devices.indexOf(device);
  if (index == -1) return;

  setState(() {
    final oldPercent = device.openPercent;
    _devices[index] = CurtainDevice(
      id: device.id,
      name: device.name,
      room: device.room,
      openPercent: percent,
      state: _getStateFromPercent(percent),
      isConnected: device.isConnected,
      autoMode: device.autoMode,
      lastUpdate: DateTime.now(),
    );
    _selectedDevice = _devices[index];

    _records.insert(
      0,
      OperationRecord(
        id: 'r${DateTime.now().millisecondsSinceEpoch}',
        deviceName: device.name,
        fromPercent: oldPercent,
        toPercent: percent,
        time: DateTime.now(),
        isAuto: false,
      ),
    );
  });
}

CurtainState _getStateFromPercent(int percent) {
  if (percent == 0) return CurtainState.closed;
  if (percent == 100) return CurtainState.open;
  return CurtainState.partial;
}

4.4 场景应用功能

实现场景一键切换：

void _applyScene(CurtainScene scene) {
  if (_selectedDevice == null) return;

  setState(() {
    _activeScene = scene;
    _targetPercent = scene.openPercent;
  });

  _setCurtainPercent(_selectedDevice!, scene.openPercent);

  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text('已切换至${scene.label}'),
      backgroundColor: scene.color,
    ),
  );
}

4.5 窗帘可视化绘制

使用CustomPaint绘制窗帘状态：

class CurtainPainter extends CustomPainter {
  final int openPercent;

  @override
  void paint(Canvas canvas, Size size) {
    final windowWidth = size.width * 0.8;
    final windowHeight = size.height * 0.9;
    final left = (size.width - windowWidth) / 2;
    final top = size.height * 0.05;

    final windowPaint = Paint()
      ..color = Colors.grey[200]!
      ..style = PaintingStyle.fill;
    canvas.drawRect(
      Rect.fromLTWH(left, top, windowWidth, windowHeight),
      windowPaint,
    );

    final closedWidth = windowWidth * (1 - openPercent / 100) / 2;
    final curtainPaint = Paint()
      ..color = const Color(0xFF5C6BC0)
      ..style = PaintingStyle.fill;

    if (closedWidth > 0) {
      canvas.drawRect(
        Rect.fromLTWH(left, top, closedWidth, windowHeight),
        curtainPaint,
      );
      canvas.drawRect(
        Rect.fromLTWH(left + windowWidth - closedWidth, top, closedWidth, windowHeight),
        curtainPaint,
      );
    }

    final lightPaint = Paint()
      ..color = Colors.yellow.withOpacity(0.3)
      ..style = PaintingStyle.fill;
    canvas.drawRect(
      Rect.fromLTWH(left + closedWidth, top, windowWidth - closedWidth * 2, windowHeight),
      lightPaint,
    );
  }
}

4.6 时段自动检测

定时更新当前时段：

void _updateSunPhase() {
  setState(() {
    _currentSunPhase = SunPhase.fromHour(DateTime.now().hour);
  });
}

void _startTimeUpdate() {
  _timeTimer = Timer.periodic(const Duration(minutes: 1), (timer) {
    _updateSunPhase();
  });
}

---

五、UI设计规范

5.1 配色方案

应用采用蓝紫色为主色调：

颜色类型	色值	用途
主色	#5C6BC0	导航、按钮、强调
辅助色	#7986CB	渐变、背景
睡眠色	#3F51B5	睡眠模式
观影色	#E91E63	观影模式
工作色	#4CAF50	工作模式

5.2 字体规范

元素	字号	字重	颜色
页面标题	20px	Bold	#000000
设备名称	18px	Bold	#000000
场景名称	16px	SemiBold	#000000
开合度数值	32px	Bold	#5C6BC0
状态标签	11px	Regular	#757575

5.3 组件规范

5.3.1 窗帘控制面板

┌─────────────────────────────────────────┐
│ 客厅窗帘              [在线] [自动]     │
├─────────────────────────────────────────┤
│                                         │
│   ┌─────────────────────────────┐      │
│   │█│                       │█│      │
│   │█│                       │█│      │
│   │█│         ☀️            │█│      │
│   │█│                       │█│      │
│   │█│                       │█│      │
│   └─────────────────────────────┘      │
│                                         │
│          开合度  60%                    │
│                                         │
│  ├───────────●────────────┤            │
│                                         │
│    [关闭]    [一半]    [全开]           │
└─────────────────────────────────────────┘

5.3.2 场景卡片

┌─────────────────────────────────────────┐
│ [🌙] 睡眠模式                      [▶] │
│      遮光助眠，营造安静环境             │
│      开合度：0%                         │
└─────────────────────────────────────────┘

5.3.3 定时任务卡片

┌─────────────────────────────────────────┐
│ [☀️] 晨起开帘  [晨起模式]        [开关] │
│      07:00 · 开合度100%                 │
│      [周一][周二][周三][周四][周五]     │
│      [周六][周日]                       │
└─────────────────────────────────────────┘

---

六、交互设计

6.1 控制页面交互

6.2 场景切换流程

6.3 页面切换状态

---

七、数据分析

7.1 统计指标

统计项	计算方式	说明
今日操作	按日期筛选记录数	今日操作总次数
自动执行	isAuto为true的记录数	自动执行次数
手动操作	isAuto为false的记录数	手动操作次数
任务启用	enabled为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 getTodayOperationCount() {
  return _records.where((r) => _isToday(r.time)).length;
}

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

7.3 场景使用分析

场景	使用频率	适用时段
睡眠模式	高	夜间
工作模式	高	白天
观影模式	中	傍晚
晨起模式	高	早晨
休闲模式	中	周末
离家模式	中	外出时

---

八、扩展功能规划

8.1 后续版本规划

8.2 功能扩展建议

8.2.1 真实设备对接

接入真实智能窗帘设备：

• WiFi/蓝牙设备协议
• 实时状态同步
• 多品牌兼容
• 固件升级

8.2.2 联动场景

与其他智能设备联动：

• 灯光联动
• 空调联动
• 音乐联动
• 安防联动

8.2.3 AI场景推荐

基于用户习惯的智能推荐：

• 作息时间学习
• 天气数据接入
• 个性化场景
• 自动优化

---

九、注意事项

9.1 开发注意事项

1. 定时器管理：时段检测的Timer需要在dispose时取消

2. 状态同步：窗帘开合度变化需要同步更新设备和记录

3. 动画流畅：窗帘可视化绘制要注意性能优化

4. 权限处理：真实设备需要申请网络权限

9.2 常见问题

问题	原因	解决方案
时段不更新	Timer未启动	检查_startTimeUpdate
场景不生效	设备未选择	选择目标设备
绘制异常	openPercent越界	检查数值范围
任务不执行	任务未启用	检查enabled状态

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_smart_curtain.dart --web-port 8139

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

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

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

---

十一、总结

智能窗帘场景化是一款智能家居类应用，为用户提供便捷的窗帘控制与场景化管理服务。应用以蓝紫色为主色调，采用卡片式布局，让用户能够轻松掌控家中所有窗帘设备。

从技术实现来看，应用使用枚举类型定义6种场景模式、5种窗帘状态、6个日出日落时段和7个星期，通过Slider实现开合度调节，使用CustomPaint绘制窗帘可视化效果，通过Timer实现时段自动检测。

从用户体验来看，应用提供直观的窗帘控制面板，让用户能够轻松调节开合度。场景模式功能支持一键切换预设场景，定时任务功能实现自动化控制，日出日落功能让窗帘随时间自动调节。

应用不仅是一个窗帘控制工具，更是一个居家环境管理平台。它提醒我们：选择正确的设备，确保控制对象正确；根据时段选择合适的场景模式；设置定时任务，实现自动化控制；开启自动模式，让窗帘随日出日落调节。在营造舒适环境的道路上，智能窗帘场景化为用户提供了全方位的辅助工具。

智能窗帘，让生活更舒适

---