Flutter 框架跨平台鸿蒙开发 - 智能灯光控制应用

智能灯光控制应用

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

https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图

1.1 应用简介

智能灯光控制是一款专注于智能家居灯光管理的移动应用，为用户提供便捷、直观的灯光控制体验。随着智能家居的普及，灯光控制已成为智能家居的核心功能之一。本应用帮助用户实现多房间灯光集中管理，支持亮度调节、色温控制、颜色选择等功能，让家居照明更加智能化、个性化。

应用支持多房间灯光管理，每个房间可独立控制开关、亮度和色温。预设场景模式让用户一键切换不同氛围，收藏功能让常用灯光触手可及。详情面板提供精细化的灯光参数调节，满足用户对光线的个性化需求。

1.2 核心功能

功能模块	功能描述	实现方式
灯光列表	展示所有灯光设备状态	ListView + Card
房间筛选	按房间快速筛选灯光	FilterChip
开关控制	一键开关灯光设备	Switch组件
亮度调节	0-100%亮度无级调节	Slider组件
色温调节	暖白到冷白色温选择	Slider + 渐变
颜色选择	RGB颜色自由选择	颜色网格
场景模式	预设场景一键应用	GridView展示
收藏功能	收藏常用灯光设备	本地状态
批量控制	全部开启/关闭	批量操作

1.3 灯光属性

属性	类型	说明
灯光ID	String	唯一标识
灯光名称	String	灯光设备名称
所属房间	String	灯光所在房间
图标	String	灯光图标emoji
开关状态	bool	是否开启
亮度	double	0-100%亮度值
色温	int	2200K-6500K色温值
颜色	Color	RGB颜色值
模式	LightMode	白光/暖光/彩色/场景
收藏状态	bool	是否收藏

1.4 场景模式

场景	图标	说明
阅读模式	📖	明亮光线，适合阅读
观影模式	🎬	柔和氛围，营造影院感
睡眠模式	😴	暖光助眠，保护眼睛
派对模式	🎉	多彩动感，活跃气氛
晚餐模式	🍽️	温馨氛围，增进食欲
工作模式	💼	专注光线，提高效率

1.5 技术栈

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

1.6 项目结构

复制代码

lib/
└── main_smart_light.dart
    ├── SmartLightApp           # 应用入口
    ├── LightMode                # 灯光模式枚举
    ├── SceneType                # 场景类型枚举
    ├── SmartLight               # 灯光数据模型
    ├── LightScene               # 场景数据模型
    └── SmartLightPage           # 主页面
        ├── _buildLightsPage()       # 灯光列表页
        ├── _buildScenesPage()       # 场景列表页
        ├── _buildFavoritesPage()    # 收藏列表页
        ├── _buildLightCard()        # 灯光卡片
        ├── _buildSceneCard()        # 场景卡片
        ├── _showLightDetail()       # 灯光详情弹窗
        └── _buildStatusCard()       # 状态统计卡片

二、系统架构

2.1 整体架构图

Business Logic
Presentation Layer
Data Layer
SmartLight

灯光模型
LightScene

场景模型
LightMode

模式枚举
SceneType

场景枚举
主页面
灯光列表Tab
场景模式Tab
收藏列表Tab
灯光详情弹窗
亮度控制
色温控制
颜色选择
快捷操作
灯光管理

开关/调节
场景应用

一键切换
收藏管理

添加/移除
批量控制

全部开关

2.2 类图设计

contains
manages
manages
has
has
SmartLightApp
+Widget build()
<<enumeration>>
LightMode
white
warm
color
scene
<<enumeration>>
SceneType
reading
movie
sleep
party
dinner
work
SmartLight
+String id
+String name
+String room
+String icon
+bool isOn
+double brightness
+int colorTemperature
+Color color
+LightMode mode
+bool isFavorite
+String colorTemperatureText
+Color colorTemperatureColor
LightScene
+String id
+String name
+SceneType type
+String emoji
+Color color
+String description
+Map<String,dynamic> settings
SmartLightPage
-List<SmartLight> _lights
-List<LightScene> _scenes
-String? _selectedRoom
-int _currentIndex
+Widget build()
-void _toggleLight()
-void _setBrightness()
-void _setColorTemperature()
-void _setColor()
-void _turnAllOn()
-void _turnAllOff()
-void _applyScene()
-void _showLightDetail()

2.3 数据流程图

开关灯光
调节亮度
调节色温
选择颜色
应用场景
全部开关
用户操作
操作类型
切换开关状态
更新亮度值
更新色温值
更新颜色值
批量更新灯光参数
批量切换状态
更新界面显示

2.4 场景应用流程

灯光列表场景模型场景页面用户灯光列表场景模型场景页面用户点击场景卡片获取场景设置返回亮度/色温参数遍历已开启的灯光更新亮度参数更新色温参数显示更新后的状态显示应用成功提示

三、核心模块设计

3.1 数据模型设计

3.1.1 灯光模式枚举 (LightMode)

dart 复制代码

enum LightMode {
  white,   // 白光模式
  warm,    // 暖光模式
  color,   // 彩色模式
  scene,   // 场景模式
}

3.1.2 场景类型枚举 (SceneType)

dart 复制代码

enum SceneType {
  reading,  // 阅读
  movie,    // 观影
  sleep,    // 睡眠
  party,    // 派对
  dinner,   // 晚餐
  work,     // 工作
}

3.1.3 灯光模型 (SmartLight)

dart 复制代码

class SmartLight {
  final String id;                  // 唯一标识
  final String name;                // 灯光名称
  final String room;                // 所属房间
  final String icon;                // 图标emoji
  bool isOn;                        // 开关状态
  double brightness;                // 亮度 (0-100)
  int colorTemperature;             // 色温 (2200-6500K)
  Color color;                      // 颜色
  LightMode mode;                   // 模式
  bool isFavorite;                  // 收藏状态

  String get colorTemperatureText;  // 色温文字描述
  Color get colorTemperatureColor;  // 色温对应颜色
}

3.1.4 场景模型 (LightScene)

dart 复制代码

class LightScene {
  final String id;                    // 场景ID
  final String name;                  // 场景名称
  final SceneType type;               // 场景类型
  final String emoji;                 // 表情符号
  final Color color;                  // 主题颜色
  final String description;           // 场景描述
  final Map<String, dynamic> settings;// 场景设置
}

3.2 灯光控制逻辑

3.2.1 开关控制流程

已开启
已关闭
点击开关
当前状态?
关闭灯光
开启灯光
更新isOn=false
更新isOn=true
刷新界面

3.2.2 亮度调节实现

dart 复制代码

void _setBrightness(SmartLight light, double value) {
  setState(() {
    light.brightness = value;
  });
}

3.2.3 色温调节实现

dart 复制代码

void _setColorTemperature(SmartLight light, int value) {
  setState(() {
    light.colorTemperature = value;
  });
}

String get colorTemperatureText {
  if (colorTemperature <= 3000) return '暖白';
  if (colorTemperature <= 4500) return '自然白';
  return '冷白';
}

3.3 场景应用逻辑

3.3.1 场景应用流程

是
否
是
否
选择场景
获取场景设置
遍历已开启灯光
是否有亮度设置?
更新灯光亮度
是否有色温设置?
更新灯光色温
完成应用
显示成功提示

3.3.2 场景应用实现

dart 复制代码

void _applyScene(LightScene scene) {
  setState(() {
    for (var light in _lights) {
      if (light.isOn) {
        if (scene.settings.containsKey('brightness')) {
          light.brightness = scene.settings['brightness'].toDouble();
        }
        if (scene.settings.containsKey('colorTemperature')) {
          light.colorTemperature = scene.settings['colorTemperature'];
        }
      }
    }
  });
}

3.4 页面结构设计

3.4.1 主页面布局

主页面
AppBar
房间筛选条
状态统计卡片
灯光列表
底部导航栏
标题: 智能灯光控制
全部开启按钮
全部关闭按钮
FilterChip: 全部
FilterChip: 客厅
FilterChip: 卧室
...
已开启数量
平均亮度
房间数量
灯光Tab
场景Tab
收藏Tab

3.5 状态管理

3.5.1 核心状态变量

dart 复制代码

class _SmartLightPageState extends State<SmartLightPage> {
  final List<SmartLight> _lights = [];       // 所有灯光
  final List<LightScene> _scenes = [];       // 所有场景
  String? _selectedRoom;                     // 选中的房间筛选
  int _currentIndex = 0;                     // 当前Tab索引
}

List<SmartLight> get _filteredLights {       // 筛选后的灯光列表
  if (_selectedRoom == null || _selectedRoom == '全部') {
    return _lights;
  }
  return _lights.where((l) => l.room == _selectedRoom).toList();
}

List<SmartLight> get _onLights =>            // 已开启的灯光
    _lights.where((l) => l.isOn).toList();

List<SmartLight> get _favoriteLights =>      // 收藏的灯光
    _lights.where((l) => l.isFavorite).toList();

四、UI设计规范

4.1 配色方案

应用采用琥珀色主题风格，体现灯光的温暖与明亮：

颜色类型	色值	用途
主色	Amber	AppBar、开关、强调
开启状态	Amber	灯光开启标识
关闭状态	Grey	灯光关闭标识
收藏	Red	收藏心形图标

4.2 色温颜色映射

色温范围	名称	颜色
≤3000K	暖白	橙色
3001-4500K	自然白	黄色
>4500K	冷白	蓝色

4.3 组件规范

4.3.1 灯光卡片

复制代码

┌─────────────────────────────────────────────────────────────┐
│  ┌────┐  客厅主灯 ❤️                              [开关]   │
│  │ 💡 │  客厅                                              │
│  └────┘  ████████████████████░░░░░░░░░░░░░░░░░░░░░░        │
│          80% · 自然白                                       │
└─────────────────────────────────────────────────────────────┘

4.3.2 状态统计卡片

复制代码

┌─────────────────────────────────────────────────────────────┐
│     💡           🔆           🏠                            │
│    5/10         65%           6                            │
│   已开启       平均亮度      房间数                         │
└─────────────────────────────────────────────────────────────┘

4.3.3 场景卡片

复制代码

┌─────────────────────────┐
│          📖             │
│        阅读模式         │
│   适合阅读的明亮光线    │
└─────────────────────────┘

4.3.4 灯光详情弹窗

复制代码

┌─────────────────────────────────────────────────────────────┐
│                        ───────                              │
│  ┌────┐  客厅主灯                              [开关]      │
│  │ 💡 │  客厅                                              │
│  └────┘  已开启 · 80%                                     │
├─────────────────────────────────────────────────────────────┤
│  亮度调节                                           80%    │
│  🔅 ───────────────●────────────────── 🔆                 │
│  [25%] [50%] [75%] [100%]                                 │
├─────────────────────────────────────────────────────────────┤
│  色温调节                                               自然白│
│  [════════════════════════════════════════]               │
│  [暖白] [自然白] [冷白]                                    │
├─────────────────────────────────────────────────────────────┤
│  颜色选择                                                  │
│  🔴 🟠 🟡 🟢 🔵 🟣 ⚪ ...                                  │
├─────────────────────────────────────────────────────────────┤
│  [☀️ 最亮]           [🌙 夜灯]                             │
│  [⏻ 关闭]           [❤️ 收藏]                             │
└─────────────────────────────────────────────────────────────┘

4.4 交互设计

4.4.1 操作方式

操作	手势	效果
开关灯光	点击开关	切换开关状态
查看详情	点击卡片	弹出详情面板
调节亮度	拖动滑块	调整亮度值
调节色温	拖动滑块	调整色温值
选择颜色	点击颜色球	更改灯光颜色
应用场景	点击场景卡片	应用场景设置
收藏灯光	点击收藏按钮	切换收藏状态

五、核心功能实现

5.1 主页面构建

dart 复制代码

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('智能灯光控制'),
      actions: [
        IconButton(icon: const Icon(Icons.lightbulb_outline), onPressed: _turnAllOn),
        IconButton(icon: const Icon(Icons.lightbulb), onPressed: _turnAllOff),
      ],
    ),
    body: _currentIndex == 0 ? _buildLightsPage()
        : _currentIndex == 1 ? _buildScenesPage()
        : _buildFavoritesPage(),
    bottomNavigationBar: BottomNavigationBar(
      currentIndex: _currentIndex,
      onTap: (index) => setState(() => _currentIndex = index),
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.lightbulb_outline), label: '灯光'),
        BottomNavigationBarItem(icon: Icon(Icons.palette), label: '场景'),
        BottomNavigationBarItem(icon: Icon(Icons.favorite), label: '收藏'),
      ],
    ),
  );
}

5.2 灯光卡片

dart 复制代码

Widget _buildLightCard(SmartLight light) {
  return Card(
    elevation: light.isOn ? 4 : 1,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(16),
      side: BorderSide(
        color: light.isOn ? Colors.amber.withValues(alpha: 0.5) : Colors.transparent,
      ),
    ),
    child: InkWell(
      onTap: () => _showLightDetail(light),
      child: Row(
        children: [
          // 灯光图标（带发光效果）
          // 灯光信息（名称、房间、亮度）
          // 开关按钮
        ],
      ),
    ),
  );
}

5.3 亮度控制

dart 复制代码

Widget _buildBrightnessControl(SmartLight light, StateSetter setModalState) {
  return Column(
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text('亮度调节', style: TextStyle(fontWeight: FontWeight.bold)),
          Text('${light.brightness.toInt()}%'),
        ],
      ),
      Slider(
        value: light.brightness,
        onChanged: light.isOn ? (value) {
          setState(() => light.brightness = value);
          setModalState(() {});
        } : null,
        activeColor: Colors.amber,
      ),
      Wrap(
        children: [25, 50, 75, 100].map((value) {
          return ActionChip(
            label: Text('$value%'),
            onPressed: light.isOn ? () {
              setState(() => light.brightness = value.toDouble());
              setModalState(() {});
            } : null,
          );
        }).toList(),
      ),
    ],
  );
}

5.4 色温控制

dart 复制代码

Widget _buildColorTemperatureControl(SmartLight light, StateSetter setModalState) {
  return Column(
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text('色温调节', style: TextStyle(fontWeight: FontWeight.bold)),
          Text(light.colorTemperatureText),
        ],
      ),
      Container(
        height: 40,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.orange, Colors.yellow, Colors.white, Colors.blue],
          ),
          borderRadius: BorderRadius.all(Radius.circular(20)),
        ),
        child: Slider(
          value: light.colorTemperature.toDouble(),
          min: 2200,
          max: 6500,
          onChanged: light.isOn ? (value) {
            setState(() => light.colorTemperature = value.toInt());
            setModalState(() {});
          } : null,
        ),
      ),
    ],
  );
}

5.5 颜色选择

dart 复制代码

Widget _buildColorPicker(SmartLight light, StateSetter setModalState) {
  final colors = [Colors.red, Colors.orange, Colors.amber, ...];
  
  return Wrap(
    spacing: 12,
    runSpacing: 12,
    children: colors.map((color) {
      final isSelected = light.color == color;
      return GestureDetector(
        onTap: light.isOn ? () {
          setState(() {
            light.color = color;
            light.mode = LightMode.color;
          });
          setModalState(() {});
        } : null,
        child: Container(
          width: 44,
          height: 44,
          decoration: BoxDecoration(
            color: color,
            shape: BoxShape.circle,
            border: Border.all(
              color: isSelected ? Colors.amber : Colors.grey.shade300,
              width: isSelected ? 3 : 1,
            ),
          ),
        ),
      );
    }).toList(),
  );
}

六、智能灯光知识拓展

6.1 色温与人体节律

色温影响
早晨

高色温5000K+
中午

自然光4000K
傍晚

暖光3000K
夜间

暖黄光2700K以下
提神醒脑
自然舒适
放松身心
促进睡眠

6.2 亮度与场景应用

场景	推荐亮度	色温建议	说明
阅读	80-100%	4500-5000K	明亮光线保护视力
观影	10-30%	2700K以下	柔和不刺眼
睡眠	5-20%	2200-2700K	暖光助眠
工作	80-100%	5000-6500K	专注高效
用餐	50-70%	3000K左右	温馨氛围

6.3 智能灯光发展趋势

智能灯光发展
语音控制
场景联动
健康照明
节能环保
智能音箱集成
语音指令控制
传感器联动
定时自动化
节律照明
护眼模式
能耗监测
智能调光

6.4 灯光与健康

光线类型	影响	建议
蓝光	抑制褪黑素分泌	睡前避免高色温光源
暖光	促进褪黑素分泌	睡前使用暖色光源
闪烁光	视疲劳、头痛	选择无频闪灯具
过亮光线	眼睛不适	根据场景调节亮度

七、扩展功能规划

7.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 2024-03-31 灯光管理功能场景模式功能收藏功能定时开关功能真实设备连接数据持久化语音控制集成场景编辑器多用户支持 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本智能灯光控制应用开发计划

7.2 功能扩展建议

7.2.1 设备连接

功能	说明
WiFi连接	连接智能灯泡设备
蓝牙连接	连接蓝牙灯光设备
网关集成	集成智能家居网关

7.2.2 自动化功能

功能	说明
定时开关	定时自动开关灯光
场景联动	与其他智能设备联动
感应控制	人体感应自动开关

7.2.3 数据分析

功能	说明
能耗统计	统计灯光能耗数据
使用报告	生成使用分析报告
节能建议	提供节能优化建议

八、注意事项

8.1 开发注意事项

颜色处理 ：使用 withValues(alpha:) 替代已废弃的 withOpacity()
状态同步：详情弹窗使用StatefulBuilder保持状态同步
发光效果：使用BoxShadow模拟灯光发光效果
渐变色温：色温滑块使用渐变背景直观展示

8.2 用户体验优化

💡 用户体验建议 💡

灯光状态一目了然
控制操作简单直观
场景切换快速便捷
参数调节精细灵活

8.3 常见问题

问题	原因	解决方案
灯光状态不更新	setState未调用	检查状态更新逻辑
弹窗状态不同步	StatefulBuilder未使用	使用setModalState
发光效果不显示	BoxShadow配置错误	检查alpha值设置
色温颜色不正确	渐变方向错误	检查LinearGradient

九、运行说明

9.1 环境要求

环境	版本要求
Flutter SDK	>= 3.0.0
Dart SDK	>= 2.17.0
鸿蒙OS	API 21+

9.2 运行命令

bash 复制代码

# 查看可用设备
flutter devices

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

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

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

十、总结

智能灯光控制应用通过完善的功能设计，帮助用户实现家居灯光的智能化管理。应用支持多房间灯光集中控制，每个房间可独立管理开关、亮度和色温。预设场景模式让用户一键切换不同氛围，满足阅读、观影、睡眠等多种使用场景。

详情面板提供精细化的灯光参数调节，亮度控制支持0-100%无级调节，色温控制覆盖暖白到冷白全范围，颜色选择支持多种预设颜色。快捷操作按钮让用户快速切换常用模式，收藏功能让常用灯光触手可及。

界面设计采用琥珀色主题风格，体现灯光的温暖与明亮。灯光卡片通过发光效果直观展示灯光状态，状态统计卡片实时显示设备概况。应用采用Material Design 3设计规范，遵循Flutter最佳实践，代码结构清晰，易于维护和扩展。

智能灯光，点亮美好生活！