HarmonyOS 5.0.0 或以上：构建分布式协同 UI（手机遥控大屏布局控制）

最新推荐文章于 2025-06-06 20:42:59 发布

前端付豪

最新推荐文章于 2025-06-06 20:42:59 发布

阅读量377

点赞数 20

分类专栏：华为鸿蒙从小白到大师文章标签： harmonyos 分布式 ui

本文链接：https://blog.csdn.net/weixin_43815680/article/details/148069671

版权

华为鸿蒙从小白到大师专栏收录该内容

123 篇文章

订阅专栏

📌 场景介绍

在 HarmonyOS 超级终端中，常见分布式 UI 协同场景包括：

手机控制电视播放 / 音量调节
手机作为遥控器控制平板界面
多端交互式协同，如 PPT 控制器、投屏控制面板

本篇实现：

手机端作为遥控器发送指令
大屏端实时响应并修改 UI 内容
使用 @ohos.distributedData 实现跨设备同步指令

🧱 页面结构（需两个页面分别部署在两个设备上）

/entry/src/main/ets
  └── pages/
       ├── RemoteControlPage.ets       // 手机端遥控器页面
       └── RemoteDisplayPage.ets       // 大屏端展示响应页面

🧱 权限配置（config.json）

"reqPermissions": [
  { "name": "ohos.permission.DISTRIBUTED_DATASYNC" }
]

🧩 RemoteControlPage.ets（遥控器页面）

import distributedData from '@ohos.distributedData'

@Entry
@Component
struct RemoteControlPage {
  private kvStore: distributedData.SingleKVStore | undefined

  async aboutToAppear() {
    const kvManager = distributedData.createKVManager({
      context: getContext(this),
      bundleName: 'com.example.demo'
    })

    this.kvStore = await kvManager.getSingleKVStore({
      storeId: 'control_store',
      syncable: true
    })
  }

  private async sendCommand(cmd: string) {
    if (!this.kvStore) return
    await this.kvStore.put('remote_cmd', cmd)
    await this.kvStore.sync({ deviceIdList: [], mode: distributedData.SyncMode.PUSH_ONLY })
  }

  build() {
    Column() {
      Text("📱 手机端控制器").fontSize(22).margin(20)

      Button("显示 红色页面").onClick(() => this.sendCommand('RED')).margin(10)
      Button("显示 绿色页面").onClick(() => this.sendCommand('GREEN')).margin(10)
      Button("显示 蓝色页面").onClick(() => this.sendCommand('BLUE')).margin(10)
    }
    .padding(30)
    .height('100%')
  }
}

🧩 RemoteDisplayPage.ets（大屏端响应页面）

import distributedData from '@ohos.distributedData'

@Entry
@Component
struct RemoteDisplayPage {
  @State bgColor: string = '#ffffff'
  private kvStore: distributedData.SingleKVStore | undefined

  async aboutToAppear() {
    const kvManager = distributedData.createKVManager({
      context: getContext(this),
      bundleName: 'com.example.demo'
    })

    this.kvStore = await kvManager.getSingleKVStore({
      storeId: 'control_store',
      syncable: true
    })

    this.kvStore.on('dataChange', distributedData.SubscribeType.SUBSCRIBE_TYPE_REMOTE, (change) => {
      const cmd = change.insertEntries[0].value.value
      switch (cmd) {
        case 'RED':
          this.bgColor = '#ff4d4f'
          break
        case 'GREEN':
          this.bgColor = '#52c41a'
          break
        case 'BLUE':
          this.bgColor = '#1890ff'
          break
        default:
          this.bgColor = '#ffffff'
      }
    })
  }

  build() {
    Column() {
      Text("📺 大屏展示页面").fontSize(24).margin(30)
    }
    .backgroundColor(this.bgColor)
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}