概述

目前家庭電視機主要通過其自帶的遙控器進行操控，實現的功能較為單一。例如，當我們要在TV端搜索節目時，電視機在遙控器的操控下往往只能完成一些字母或數字的輸入，而無法輸入其他復雜的內容。分布式遙控器將手機的輸入能力和電視遙控器的遙控能力結合為一體，從而快速便捷操控電視。

分布式遙控器的實現基于OpenHarmony的分布式能力和RPC通信能力，UI使用eTS進行開發。如下圖所示，分別用兩塊開發板模擬TV端和手機端。

分布式組網后可以通過TV端界面的Controller按鈕手動拉起手機端的遙控界面，在手機端輸入時會將輸入的內容同步顯示在TV端搜索框，點擊搜索按鈕會根據輸入的內容搜索相關節目。

還可以通過點擊方向鍵（上下左右）將焦點移動到我們想要的節目上，再點擊播放按鈕進行播放，按返回按鈕返回TV端主界面。

同時還可以通過手機遙控端關機按鈕同時關閉TV端和手機端界面。

實現TV端界面

在本章節中，您將學會開發TV端默認界面和TV端視頻播放界面，示意圖參考第一章圖1和圖3所示。

建立數據模型，將圖片ID、圖片源、圖片名稱和視頻源綁定成一個數據模型。詳情代碼可以查看MainAbility/model/PicData.ets和MainAbility/model/PicDataModel.ets兩個文件。

實現TV端默認頁面布局和樣式，在MainAbility/pages/TVIndex.ets 主界面文件中添加入口組件。頁面布局代碼如下：

// 入口組件

@Entry

@Component

struct Index {

private letters: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9']

private source: string

@State text: string = ''

@State choose: number = -1

build() {

Flex({ direction: FlexDirection.Column }) {

TextInput({text: this.text, placeholder: 'Search' })

.onChange((value: string) => {

this.text = value

})

Row({space: 30}) {

Text('Clear')

.fontSize(16)

.backgroundColor('#ABB0BA')

.textAlign(TextAlign.Center)

.onClick(() => {

this.text = ''

})

.clip(true)

.borderRadius(10)

Text('Backspace')

.fontSize(16)

.backgroundColor('#ABB0BA')

.textAlign(TextAlign.Center)

.onClick(() => {

this.text = this.text.substring(0, this.text.length - 1)

})

.clip(true)

.borderRadius(10)

Text('Controller')

.fontSize(16)

.backgroundColor('#ABB0BA')

.textAlign(TextAlign.Center)

.onClick(() => {

......

})

.clip(true)

.borderRadius(10)

}

Grid() {

ForEach(this.letters, (item) => {

GridItem() {

Text(item)

.fontSize(20)

.backgroundColor('#FFFFFF')

.textAlign(TextAlign.Center)

.onClick(() => {

this.text += item

})

.clip(true)

.borderRadius(5)

}

}, item => item)

}

.rowsTemplate('1fr 1fr 1fr 1fr')

.columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr')

.columnsGap(8)

.rowsGap(8)

.width('75%')

.height('25%')

.margin(5)

.backgroundColor('#D2D3D8')

.clip(true)

.borderRadius(10)

Grid() {

ForEach(this.picItems, (item: PicData) => {

GridItem() {

PicGridItem({ picItem: item })

}

}, (item: PicData) => item.id.toString())

}

.rowsTemplate('1fr 1fr 1fr')

.columnsTemplate('1fr 1fr')

.columnsGap(5)

.rowsGap(8)

.width('90%')

.height('58%')

.backgroundColor('#FFFFFF')

.margin(5)

}

.width('98%')

.backgroundColor('#FFFFFF')

}

}

（左右移動查看全部內容）

其中PicGridItem將PicItem的圖片源和圖片名稱綁定，實現代碼如下：

// 九宮格拼圖組件

@Component

struct PicGridItem {

private picItem: PicData

build() {

Column() {

Image(this.picItem.image)

.objectFit(ImageFit.Contain)

.height('85%')

.width('100%')

.onClick(() => {

......

})

})

Text(this.picItem.name)

.fontSize(20)

.fontColor('#000000')

}

.height('100%')

.width('90%')

}

}

（左右移動查看全部內容）

實現TV端視頻播放界面，在MainAbility/pages/VideoPlay.ets 文件中添加組件。頁面布局代碼如下：

import router from '@system.router'

@Entry

@Component

struct Play {

// 取到Index頁面跳轉來時攜帶的source對應的數據。

private source: string = router.getParams().source

build() {

Column() {

Video({

src: this.source,

})

.width('100%')

.height('100%')

.autoPlay(true)

.controls(true)

}

}

}

（左右移動查看全部內容）

在MainAbility/pages/TVIndex.ets中，給PicGridItem的圖片添加點擊事件，點擊圖片即可播放PicItem的視頻源。實現代碼如下:

Image(this.picItem.image)

......

.onClick(() => {

router.push({

uri: 'pages/VideoPlay',

params: { source: this.picItem.video }

})

})

（左右移動查看全部內容）

實現手機遙控端界面

在本章節中，您將學會開發手機遙控端默認界面，示意圖參考第一章圖2所示。

PhoneAbility/pages/PhoneIndex.ets 主界面文件中添加入口組件。頁面布局代碼如下：

@Entry

@Component

struct Index {

build() {

Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {

Row() {

Image($rawfile('TV.png'))

.width(25)

.height(25)

Text('華為智慧屏').fontSize(20).margin(10)

}

// 文字搜索框

TextInput({ placeholder: 'Search' })

.margin(20)

.onChange((value: string) => {

if (connectModel.mRemote){

......

}

})

Grid() {

GridItem() {

// 向上箭頭

Button({ type: ButtonType.Circle, stateEffect: true }) {

Image($rawfile('up.png')).width(80).height(80)

}

.onClick(() => {

......

})

.width(80)

.height(80)

.backgroundColor('#FFFFFF')

}

.columnStart(1)

.columnEnd(5)

GridItem() {

// 向左箭頭

Button({ type: ButtonType.Circle, stateEffect: true }) {

Image($rawfile('left.png')).width(80).height(80)

}

.onClick(() => {

......

})

.width(80)

.height(80)

.backgroundColor('#FFFFFF')

}

GridItem() {

// 播放鍵

Button({ type: ButtonType.Circle, stateEffect: true }) {

Image($rawfile('play.png')).width(60).height(60)

}

.onClick(() => {

......

})

.width(80)

.height(80)

.backgroundColor('#FFFFFF')

}

GridItem() {

// 向右箭頭

Button({ type: ButtonType.Circle, stateEffect: true }) {

Image($rawfile('right.png')).width(70).height(70)

}

.onClick(() => {

......

})

.width(80)

.height(80)

.backgroundColor('#FFFFFF')

}

GridItem() {

// 向下箭頭

Button({ type: ButtonType.Circle, stateEffect: true }) {

Image($rawfile('down.png')).width(70).height(70)

}

.onClick(() => {

......

})

.width(80)

.height(80)

.backgroundColor('#FFFFFF')

}

.columnStart(1)

.columnEnd(5)

}

.rowsTemplate('1fr 1fr 1fr')

.columnsTemplate('1fr 1fr 1fr')

.backgroundColor('#FFFFFF')

.margin(10)

.clip(new Circle({ width: 325, height: 325 }))

.width(350)

.height(350)

Row({ space:100 }) {

// 返回鍵

Button({ type: ButtonType.Circle, stateEffect: true }) {

Image($rawfile('return.png')).width(40).height(40)

}

.onClick(() => {

......

})

.width(100)

.height(100)

.backgroundColor('#FFFFFF')

// 關機鍵

Button({ type: ButtonType.Circle, stateEffect: true }) {

Image($rawfile('off.png')).width(40).height(40)

}

.onClick(() => {

......

})

.width(100)

.height(100)

.backgroundColor('#FFFFFF')

// 搜索鍵

Button({ type: ButtonType.Circle, stateEffect: true }) {

Image($rawfile('search.png')).width(40).height(40)

}

.onClick(() => {

......

})

.width(100)

.height(100)

.backgroundColor('#FFFFFF')

}

.padding({ left:100 })

}

.backgroundColor('#E3E3E3')

}

}

（左右移動查看全部內容）

原文標題：OpenHarmony 實例：DAYU200 分布式遙控器

文章出處：【微信公眾號：HarmonyOS官方合作社區】歡迎添加關注！文章轉載請注明出處。

審核編輯：湯梓紅