引言

随着智能家居设备的普及，用户对多设备统一控制的需求日益增长。传统开发模式中，不同设备（手机、平板、智慧屏）的APP需独立开发，且设备状态同步、跨端操作体验割裂等问题显著。鸿蒙ArkUI-X凭借​​声明式UI+状态驱动​​的核心能力，结合鸿蒙分布式技术，为开发者提供了“一套代码、多端协同”的智能家居APP开发解决方案。本文将以“智能灯光控制”场景为例，演示如何通过ArkUI-X实现多端协同的设备控制界面设计与开发。

---

一、场景需求与技术选型

1. 核心需求

• ​​设备列表展示​​：支持手机、平板、智慧屏等多端显示不同布局（如手机竖屏列表、平板横屏网格）。
• ​​状态实时同步​​：灯光开关、亮度、色温状态变化时，所有关联设备（如手机、平板）UI自动更新。
• ​​跨端控制​​：任意端均可发送控制指令（如手机关闭客厅灯，平板同步显示状态）。
• ​​设备联动​​：支持场景化控制（如“回家模式”一键开启玄关灯、调节客厅亮度）。

2. 技术选型

ArkUI-X的多端协同能力通过以下机制实现：

• ​​分布式软总线​​：设备间通信底层支撑，支持状态实时同步。
• ​​状态驱动UI​​：通过@State、@Prop等装饰器管理设备状态，状态变更自动触发跨端UI更新。
• ​​响应式布局​​：基于屏幕尺寸、设备类型的条件渲染，实现多端适配。

---

二、开发实战：智能灯光控制APP

1. 设备数据模型定义

首先定义灯光设备的数据结构，包含基础信息、实时状态及控制指令：

// 设备类型枚举
enum DeviceType {
  LIGHT = 'light',
  SOCKET = 'socket',
  AIR_CONDITIONER = 'air_conditioner'
}

// 灯光模式枚举
enum LightMode {
  WARM = 'warm',   // 暖光
  DAYLIGHT = 'daylight', // 白光
  COLORFUL = 'colorful'  // 彩光
}

// 灯光设备状态类
class LightState {
  isOn: boolean = false;     // 开关状态
  brightness: number = 50;   // 亮度（0-100）
  colorTemp: number = 4000;  // 色温（2700-6500K）
  mode: LightMode = LightMode.DAYLIGHT; // 当前模式
}

// 灯光设备数据模型
class LightDevice {
  id: string;          // 设备唯一ID
  name: string;        // 设备名称（如"客厅主灯"）
  type: DeviceType.LIGHT; // 固定为灯光类型
  state: LightState;   // 实时状态
  roomId: string;      // 所属房间（如"living_room"）
}

2. 设备列表页面开发（多端适配）

使用ArkUI-X的List组件实现设备列表，并通过@MediaQuery装饰器实现多端布局适配（手机竖屏/平板横屏）：

import mediaQuery from '@ohos.mediaQuery';
import { LightDevice } from '../model/LightDevice';

@Entry
@Component
struct LightControlPage {
  // 模拟从分布式设备管理获取的设备列表（实际开发中调用鸿蒙API）
  @State deviceList: LightDevice[] = [
    new LightDevice('light_001', '客厅主灯', DeviceType.LIGHT, 
      new LightState(true, 80, 4200, LightMode.DAYLIGHT), 'living_room'),
    new LightDevice('light_002', '卧室暖灯', DeviceType.LIGHT, 
      new LightState(false, 30, 2800, LightMode.WARM), 'bedroom'),
    new LightDevice('light_003', '玄关装饰灯', DeviceType.LIGHT, 
      new LightState(true, 60, 5000, LightMode.COLORFUL), 'entrance')
  ];

  // 响应式布局：根据屏幕宽度切换排列方式
  @MediaQuery(function(mediaQuery: MediaQuery) {
    return mediaQuery.width >= 720; // 平板/智慧屏宽度≥720px
  })
  isWideScreen: boolean = false;

  build() {
    Column() {
      Text('智能家居灯光控制')
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 30 })

      // 多端布局适配：平板/智慧屏显示网格，手机显示列表
      if (this.isWideScreen) {
        Grid() {
          ForEach(this.deviceList, (device: LightDevice) => {
            GridItem() {
              LightControlCard(device)
                .onClick(() => this.navigateToDetail(device))
            }
            .width('100%')
            .height(180)
          })
        }
        .columnsTemplate('1fr 1fr') // 两列网格
        .columnsGap(20)
      } else {
        List() {
          ForEach(this.deviceList, (device: LightDevice) => {
            ListItem() {
              LightControlCard(device)
                .onClick(() => this.navigateToDetail(device))
            }
            .width('100%')
          })
        }
        .divider({ strokeWidth: 1, color: '#f0f0f0' })
      }
    }
    .width('100%')
    .height('100%')
    .padding(16)
  }

  // 跳转到设备详情页（跨端保持路由一致）
  private navigateToDetail(device: LightDevice) {
    router.pushUrl({
      url: 'pages/LightDetail',
      params: { deviceId: device.id }
    });
  }
}

// 设备控制卡片组件（复用跨端）
@Component
struct LightControlCard {
  @Prop device: LightDevice; // 通过@Prop接收父组件传递的设备数据

  build() {
    Column() {
      Row() {
        Text(this.device.name)
          .fontSize(18)
          .fontWeight(FontWeight.Medium)
        
        Blank()
        
        // 状态同步：实时显示开关状态
        Toggle({ type: ToggleType.Switch, isOn: this.device.state.isOn })
          .onChange((isOn) => {
            this.device.state.isOn = isOn; // 修改状态触发UI更新
            this.sendControlCommand('power', isOn); // 发送控制指令到设备
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .margin({ bottom: 10 })

      // 亮度调节滑块（仅当灯光开启时显示）
      if (this.device.state.isOn) {
        Row() {
          Text('亮度:')
            .fontSize(16)
          
          Slider({
            value: this.device.state.brightness,
            min: 0,
            max: 100,
            step: 1
          })
          .onChange((value) => {
            this.device.state.brightness = value;
            this.sendControlCommand('brightness', value);
          })
        }
        .width('100%')
        .margin({ bottom: 10 })
      }

      // 模式切换按钮组
      Row({ space: 10 }) {
        Button('白光')
          .backgroundColor(this.device.state.mode === LightMode.DAYLIGHT ? '#007DFF' : '#E0E0E0')
          .onClick(() => this.setLightMode(LightMode.DAYLIGHT))
        
        Button('暖光')
          .backgroundColor(this.device.state.mode === LightMode.WARM ? '#FF9500' : '#E0E0E0')
          .onClick(() => this.setLightMode(LightMode.WARM))
        
        Button('彩光')
          .backgroundColor(this.device.state.mode === LightMode.COLORFUL ? '#FF2D55' : '#E0E0E0')
          .onClick(() => this.setLightMode(LightMode.COLORFUL))
      }
      .margin({ top: 10 })
    }
    .width('100%')
    .padding(16)
    .borderRadius(12)
    .backgroundColor('#FFFFFF')
    .shadow({ radius: 4, color: 'rgba(0,0,0,0.1)' })
  }

  // 发送控制指令到设备（模拟分布式调用）
  private sendControlCommand(type: string, value: any) {
    console.info(`发送指令：设备${this.device.id}，类型${type}，值${value}`);
    // 实际开发中调用鸿蒙分布式设备管理API：
    // deviceManager.sendCommand(this.device.id, type, value);
  }

  // 设置灯光模式
  private setLightMode(mode: LightMode) {
    this.device.state.mode = mode;
    this.sendControlCommand('mode', mode);
  }
}

3. 关键技术解析

（1）状态驱动的UI更新

• ​​@State与@Prop的作用​​：
  deviceList使用@State修饰，当设备状态（如isOn、brightness）变化时，框架会触发LightControlPage的重新渲染。
  LightControlCard通过@Prop接收device数据，由于@Prop是单向数据流（父→子），子组件修改device.state会同步到父组件的@State变量，从而触发全局UI更新。

（2）多端布局适配

• ​​@MediaQuery的使用​​：通过媒体查询检测屏幕宽度，动态切换Grid（平板/智慧屏）和List（手机）布局，实现“同一套代码，不同端适配”。
• ​​响应式组件设计​​：LightControlCard组件内部通过条件渲染（if (this.device.state.isOn)）动态显示/隐藏亮度滑块，确保不同状态下UI的合理性。

（3）跨端状态同步

• ​​分布式设备管理​​：实际开发中，通过鸿蒙deviceManager接口获取所有在线设备，并监听设备状态变化（如onDeviceStateChange事件）。当某台设备（如客厅灯）状态变更时，所有关联设备（手机、平板）的deviceList状态会同步更新，触发UI重新渲染。
• ​​控制指令下发​​：点击按钮时，通过sendControlCommand调用鸿蒙分布式软总线API，将指令发送至目标设备，实现跨端控制。

---

三、场景扩展：设备联动与场景模式

为提升用户体验，可添加“场景模式”功能（如“回家模式”一键开启玄关灯、调节客厅亮度）。通过ArkUI-X的状态管理，可轻松实现多设备协同控制：

// 场景模式组件
@Component
struct SceneModeCard {
  @State isHomeMode: boolean = false;

  build() {
    Column() {
      Text('场景模式')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 })

      Row() {
        Text('回家模式')
          .fontSize(18)
        
        Blank()
        
        Toggle({ type: ToggleType.Switch, isOn: this.isHomeMode })
          .onChange((isOn) => {
            this.isHomeMode = isOn;
            if (isOn) {
              this.triggerHomeMode(); // 触发回家模式
            }
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .width('100%')
    .padding(16)
    .borderRadius(12)
    .backgroundColor('#F5F5F5')
  }

  // 触发回家模式：联动开启玄关灯、调节客厅亮度
  private triggerHomeMode() {
    // 查找玄关灯并开启
    const entranceLight = this.deviceList.find(d => d.roomId === 'entrance');
    if (entranceLight) {
      entranceLight.state.isOn = true;
      entranceLight.state.brightness = 70;
      entranceLight.state.mode = LightMode.DAYLIGHT;
    }

    // 查找客厅灯并调至暖光
    const livingRoomLight = this.deviceList.find(d => d.roomId === 'living_room');
    if (livingRoomLight) {
      livingRoomLight.state.brightness = 80;
      livingRoomLight.state.mode = LightMode.WARM;
    }
  }
}

---

四、总结

通过本文的实践，我们展示了如何利用ArkUI-X的​​声明式UI​​和​​状态驱动​​特性，结合鸿蒙分布式能力，高效开发跨端智能家居APP：

• ​​多端适配​​：通过响应式布局和媒体查询，实现手机、平板、智慧屏的UI自适应。
• ​​状态同步​​：@State和@Prop装饰器确保设备状态变更时，所有关联端UI自动更新。
• ​​跨端控制​​：调用鸿蒙分布式API下发指令，实现任意端对设备的控制。