SameX

Posted on Nov 20

鸿蒙案例实践：智能家居控制面板的并发任务与UI交互设计

#harmonyos

本文旨在深入探讨华为鸿蒙HarmonyOS Next系统（截止目前API12）的技术细节，基于实际开发实践进行总结。主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。本文为原创内容，任何形式的转载必须注明出处及原作者。

1. 项目概述与需求分析

背景：

随着物联网（IoT）的发展，智能家居系统越来越普及，用户可以通过手机或平板等设备对家庭中的各种设备进行控制，如灯光、空调、窗帘等。为了让用户能够更加便捷地控制这些设备，要求开发一个智能家居控制面板应用，能够异步控制多台设备，并实时反馈设备状态到用户界面。

需求：

用户可以通过控制面板的按钮控制智能灯、空调和窗帘。
设备的控制是异步的，避免阻塞主线程影响用户体验。
每个设备的状态（开启、关闭）应及时反馈到 UI 界面上。
界面交互应简洁流畅，并具有良好的用户体验。
需要处理设备无法响应或出错的情况，并通过 UI 提示给用户。

2. 技术分析

关键技术：

ArkUI 的声明式 UI 编程：声明式编程能够简化 UI 的开发，状态的变更可以自动触发界面刷新，减少手动操作和逻辑耦合。
@Concurrent 装饰器：用于异步执行控制设备的任务，避免设备控制时的阻塞，保证用户界面的流畅性。
TaskPool 并发任务调度：通过 TaskPool 进行任务的管理与调度，支持高效的多线程任务执行。
Promise 异步处理：处理异步任务的执行结果并捕获可能发生的异常，确保操作失败时能够正确处理。
状态管理：通过 ArkUI 的状态管理机制实现设备状态的跟踪与 UI 的自动更新。

设计考虑：

性能：设备控制和状态反馈是异步的，避免阻塞 UI 线程，提升性能。
容错性：确保设备控制时能处理设备响应失败的情况，避免影响用户体验。
模块化：每个设备的控制任务应独立，并且可以扩展更多设备。

3. 整体架构设计

架构层次

UI 层：
- 负责界面展示与用户交互，包括按钮点击和状态显示。
- 使用 ArkUI 的声明式 UI 编程，实现设备状态的实时反馈。
逻辑层：
- 负责控制设备的业务逻辑，实现设备的开关控制。
- 使用 @Concurrent 装饰器异步执行设备控制，任务由 TaskPool 调度。
数据层：
- 模拟设备的状态信息（例如“打开”或“关闭”），并通过 Promise 的返回值告知设备操作是否成功。

模块划分

设备控制模块：
- 每个设备（灯、空调、窗帘）都有独立的控制逻辑模块，确保模块之间解耦，便于扩展新设备。
状态管理模块：
- 通过 ArkUI 状态管理功能，跟踪设备当前的状态，并根据状态变化自动更新 UI。
异常处理模块：
- 在设备控制过程中可能出现的异常，如设备无法连接、操作失败等，这些异常将被捕获并反馈到 UI 层，用户可以清楚了解设备的操作状态。

架构图示意

--------------------------------------
|           UI层 (ArkUI)             |
|------------------------------------|
| 设备控制按钮 | 状态显示 | 错误提示  |
--------------------------------------
|         逻辑层 (并发控制)           |
|------------------------------------|
| @Concurrent 并发任务执行            |
| TaskPool 任务调度与执行            |
--------------------------------------
|         数据层 (设备模拟)           |
|------------------------------------|
| Promise 异步处理与状态反馈          |
--------------------------------------

4. 软件设计

在软件设计中，我们将项目划分为几个独立的模块来处理不同的功能需求。

4.1 UI 设计与状态管理

UI 部分使用 ArkUI 的声明式编程，将设备控制按钮与状态显示模块化。每个按钮触发一个设备控制任务，状态则通过 ArkUI 的 @State 自动绑定到 UI。

@State lightStatus: string = '关闭'
@State acStatus: string = '关闭'
@State curtainStatus: string = '关闭'

4.2 异步并发任务设计

每个设备控制任务都通过 @Concurrent 装饰器来声明为并发任务，这样可以确保操作不会阻塞主线程。任务的实际执行由 TaskPool 管理，这样可以并发执行多个设备的操作，提升响应速度。

@Concurrent
async function executeConcurrentTask(device: string): Promise<string> {
  // 模拟设备操作
}

4.3 状态反馈与 UI 更新

设备状态的更新通过 Promise 异步返回，并将返回值更新到绑定的状态变量中，UI 自动根据状态变化进行刷新，无需手动更新 UI。

executeConcurrentTask('light').then(status => {
  this.lightStatus = status;
}).catch(error => {
  console.error('灯控制失败: ' + error.message);
});

4.4 异常处理与容错设计

设备控制过程中可能会遇到设备无法响应或出现其他错误。在 Promise 中捕获这些异常，并通过 catch 回调将错误反馈到用户界面。

try {
  // 控制设备
} catch (error) {
  return `操作失败: ${error.message}`;
}

4.5 模块化设计

系统采用模块化设计，每个设备的控制逻辑独立，便于扩展。当需要增加新的设备时，只需增加对应的设备控制函数，并在 UI 层增加一个按钮与状态绑定即可。

5. 任务执行与状态反馈示例

下面是 TaskPool 中执行并发任务，并更新 UI 状态的代码示例：

async function controlLight() {
  let task: taskpool.Task = new taskpool.Task(executeConcurrentTask, 'light');
  taskpool.execute(task).then(result => {
    this.lightStatus = result as string;
  }).catch(error => {
    console.error("任务执行失败: " + error);
  });
}

6. 综合示例代码

完整的智能家居控制面板应用实现，包含 UI 层、异步任务层以及错误处理机制。

@Entry
@Component
struct ControlPanel {
  @State lightStatus: string = '关闭'
  @State acStatus: string = '关闭'
  @State curtainStatus: string = '关闭'

  build() {
    Column() {
      Row() {
        Button('控制灯')
          .onClick(() => {
            controlLight();
          })
        Text('灯状态: ' + this.lightStatus)
      }
      Row() {
        Button('控制空调')
          .onClick(() => {
            controlAC();
          })
        Text('空调状态: ' + this.acStatus)
      }
      Row() {
        Button('控制窗帘')
          .onClick(() => {
            controlCurtain();
          })
        Text('窗帘状态: ' + this.curtainStatus)
      }
    }
  }

  controlLight() {
    executeConcurrentTask('light').then(status => {
      this.lightStatus = status;
    }).catch(error => {
      console.error('灯控制失败: ' + error.message);
    });
  }

  controlAC() {
    executeConcurrentTask('ac').then(status => {
      this.acStatus = status;
    }).catch(error => {
      console.error('空调控制失败: ' + error.message);
    });
  }

  controlCurtain() {
    executeConcurrentTask('curtain').then(status => {
      this.curtainStatus = status;
    }).catch(error => {
      console.error('窗帘控制失败: ' + error.message);
    });
  }
}

@Concurrent
async function executeConcurrentTask(device: string): Promise<string> {
  try {
    switch (device) {
      case 'light':
        await delay(1000);
        return '已打开';
      case 'ac':
        await delay(2000);
        return '已打开';
      case 'curtain':
        await delay(1500);
        return '已打开';
      default:
        throw new Error('未知设备');
    }
  } catch (error) {
    return `操作失败: ${error.message}`;
  }
}

function delay(ms: number) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

7. 总结

在这篇文章中，吾尝试设计并实现了一个智能家居控制面板应用，展示了 ArkTS 结合 ArkUI 的强大功能。通过并发任务的使用，系统能够同时控制多个设备，并实时反馈状态。同时，应用良好的状态管理与容错设计，提升了用户体验和系统稳定性。这为未来更多智能家居应用的开发奠定了基础。

DEV Community